`

javascript之小应用:网页在线聊天

阅读更多
概览



这款使用 PHP 和 javascript 搭建的网页在线聊天程序包括:用户登录、注销、Ajax 功能 并且支持多用户。


一、搭建聊天页面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
 
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b></b></p>
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
        <div style="clear:both"></div>
    </div>
     
    <div id="chatbox"></div>
     
    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
    </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
 
});
</script>
</body>
</html>






二、css 样式


/* CSS Document */
body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }
  
form, p, span {
    margin:0;
    padding:0; }
  
input { font:12px arial; }
  
a {
    color:#0000FF;
    text-decoration:none; }
  
    a:hover { text-decoration:underline; }
  
#wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }
  
#loginform { padding-top:18px; }
  
    #loginform p { margin: 5px; }
  
#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }
  
#usermsg {
    width:395px;
    border:1px solid #ACD8F0; }
  
#submit { width: 60px; }
  
.error { color: #ff0000; }
  
#menu { padding:12.5px 25px 12.5px 25px; }
  
.welcome { float:left; }
  
.logout { float:right; }
  
.msgln { margin:0 0 2px 0; }






三、使用 PHP 创建登录页面




<?
session_start();
 
function loginForm(){
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
        <p>Please enter your name to continue:</p>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
        <input type="submit" name="enter" id="enter" value="Enter" />
    </form>
    </div>
    ';
}
 
if(isset($_POST['enter'])){
    if($_POST['name'] != ""){
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }
    else{
        echo '<span class="error">Please type in a name</span>';
    }
}
?>




该登录页面要求用户输入用户名,使用if else 语句判断是否用户输入了用户名。
如果输入了用户名,则将其存入session中:$_SESSION['name']

特别说明一点是:我们使用了 htmlspecialchars() 函数,将 HTML 字符转换为其字符本身,以防止用户输入恶意的代码( Cross-site scripting (XSS))。


调转至登录页面

如果用户没登录,则 session 不会被创建。所以我们使用 if else 语句进行判断:


<?php
if(!isset($_SESSION['name'])){
    loginForm();
}
else{
?>
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
        <div style="clear:both"></div>
    </div>    
    <div id="chatbox"></div>
     
    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
    </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>





欢迎和注销

我们尚未完成登录模块。应该允许用户注销和结束会话。
让我们在 Menu 菜单栏中增加一些 PHP 代码,以实现这个功能:

1、把用户名显示出来:

<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>





2、注销确认

使用 jQuery 完成用户注销时的确认窗口:


<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
	//If user wants to end session
	$("#exit").click(function(){
		var exit = confirm("Are you sure you want to end the session?");
		if(exit==true){window.location = 'index.php?logout=true';}		
	});
});
</script>



如果用户点击确认注销,则网页会跳转至这个网址:index.php?logout=true




我们需要使用 php 获取注销页面传递过来的参数:

if(isset($_GET['logout'])){ 
     
    //before session destroy, simple exit message is written to a log file.
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
    fclose($fp);
     
    session_destroy();
    header("Location: index.php"); //Redirect the user
}




四、处理用户的输入

当用户点击发送按钮后,我们想获取用户的输入内容,并将其写入日志中。

1、使用 jQuery 获取用户的输入内容,并异步的发生post请求。


//If user submits the form
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});




2、使用 php 在服务器端接受请求,并获取用户发送的内容,将其写入日志文件中:

post.php


<?
session_start();
if(isset($_SESSION['name'])){
    $text = $_POST['text'];
     
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
    fclose($fp);
}
?>



我们将用户输入的信息都存储在 log.html 文件中。



五、展示聊天记录的内容(log.html)

向用户显示最近更新的聊天记录。


1、为了节省加载时间,可以提前将 log.html 加载:


<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
    $handle = fopen("log.html", "r");
    $contents = fread($handle, filesize("log.html"));
    fclose($handle);
     
    echo $contents;
}
?></div>




2、使用  jQuery.ajax  发送请求:


//Load the file containing the chat log
function loadLog(){
    $.ajax({
        url: "log.html",
        cache: false,
        success: function(html){
            //Insert chat log into the #chatbox div
            $("#chatbox").html(html);		
        },
    });
}



让聊天记录可以滚动:


//Load the file containing the chat log
function loadLog(){
    //Scroll height before the request
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
    $.ajax({
        url: "log.html",
        cache: false,
        success: function(html){
            //Insert chat log into the #chatbox div	
            $("#chatbox").html(html); 
            
            //Auto-scroll
            //Scroll height after the request
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
            if(newscrollHeight &gt; oldscrollHeight){
                //Autoscroll to bottom of div
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); 
            }				
        },
    });
}




3、实时更新聊天记录:


//Reload file every 2500 ms or x ms if you wish to change the second parameter

setInterval (loadLog, 2500);	



每 2.5 秒钟从新加载用户聊天记录文件。






更多阅读:


Secure Your Forms With Form Keys - prevent prevent XSS (Cross-site scripting) and Cross-site request forgery

Submit A Form Without Page Refresh using jQuery - Expand on our ajax request

How to Make AJAX Requests With Raw Javascript - Learn how  requests  work behind the scenes with raw javascript.





-

引用:

https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931




-
转载请注明:
原文出处:http://lixh1986.iteye.com/blog/2336028



-


  • 大小: 4.6 KB
  • 大小: 2 KB
  • 大小: 1.4 KB
  • 大小: 11.5 KB
分享到:
评论

相关推荐

    网页在线聊天模块

    在网页聊天模块中,JSP用于接收和处理用户的输入,如发送的消息,同时也能将服务器端的更新内容发送回客户端。 **DWR (Direct Web Remoting)** 是一个开源Java库,专门用于实现Web应用程序中的AJAX(Asynchronous ...

    JavaScript实例应用 JavaScript实例应用

    10. **Websocket**:JavaScript可以实现Websocket协议,提供实时双向通信,常用于在线聊天、实时股票报价、多人在线游戏等场景。 11. **Web Workers**:JavaScript的Web Workers特性可以开启后台线程,处理大量计算...

    网页版QQ在线聊天系统

    网页版QQ在线聊天系统是一种基于Web技术实现的即时通讯平台,它允许用户通过浏览器进行实时的文本、语音甚至视频交流,无需安装任何客户端软件。这种系统的设计灵感来源于早期的快狗聊天系统,它在功能上提供了类似...

    简单实现网页在线聊天

    【标题】"简单实现网页在线聊天"涉及到的技术和知识点主要集中在使用ASP(Active Server Pages)技术构建一个实时的、基于Web的聊天应用。ASP是一种由微软开发的服务器端脚本环境,它允许开发者使用诸如VBScript或...

    纯网页实现聊天功能

    总的来说,纯网页聊天功能是通过结合HTML、CSS和JavaScript,尤其是利用WebSocket和jQuery库,来实现的一种无刷新、实时互动的Web应用。这个【chat_demo】项目提供了一个简单的实例,帮助开发者理解并实践这一技术。

    网页聊天室不用登陆在线聊天

    网页聊天室是一种基于Web技术实现的在线交流平台,用户无需注册或登录即可参与聊天,提供了一种便捷的社交方式。这种技术主要依赖于浏览器的JavaScript、HTML和CSS等前端技术,以及服务器端的技术支持,如WebSocket...

    程序天下:JavaScript实例自学手册PDF

    JavaScript作为全球最广泛使用的脚本语言之一,它在网页开发、服务器端编程、移动应用、游戏开发等多个领域都有广泛应用。这本书通过丰富的实例,帮助读者深入理解JavaScript的核心概念和技术,从而能够独立进行Web...

    js实现网页在线聊天室

    **JavaScript实现网页在线聊天室详解** 在Web开发中,创建一个在线聊天室是常见的应用场景,它允许用户实时地进行互动交流。本篇文章将深入探讨如何使用JavaScript这一强大的客户端脚本语言来实现一个基本的在线...

    网页聊天应用

    - **实时通信**: 在网页聊天应用中,可能会用到Ajax(Asynchronous JavaScript and XML)技术来实现局部刷新,提升用户体验。WebSocket协议可以提供双向通信,使得服务器能够主动推送消息给客户端,实现即时聊天功能...

    Java网页实时聊天

    【Java网页实时聊天】是一种利用Web技术实现实时通信的应用,尤其在当今互联网时代,用户对即时互动的需求日益增长,这种技术变得尤为重要。本项目基于反向Ajax(也称为Comet技术)实现,旨在提供一个低延迟、高效能...

    网页版在线聊天444

    网页版在线聊天是一种基于网页技术实现的实时通讯方式,它让用户无需下载安装任何客户端软件,只需通过浏览器访问特定网页即可进行即时沟通。这种技术在互联网上广泛应用,为用户提供了便捷的交流途径,尤其适合跨...

    网页在线聊天简易实现.

    5. **前端框架**:现代网页聊天应用往往采用React、Vue.js或Angular等前端框架,这些框架提供了丰富的组件和工具,简化了开发过程,提高了用户体验。 6. **数据库管理**:为了持久化存储聊天记录,需要使用数据库,...

    挑战javascript&ajax应用开发

    4. **WebSockets**:提供双向通信的协议,适用于实时应用,如在线聊天、股票交易等。 通过不断学习和实践,你将能熟练掌握 JavaScript 和 AJAX 技术,开发出更加高效、交互性强的 web 应用。记住,理论知识是基础,...

    网页版聊天室

    在网页聊天室中,每个用户登录后,服务器会为该用户创建一个唯一的Session ID,存储在服务器端。每当用户发送或接收消息时,服务器都会检查对应的Session ID,以确认用户身份,保证消息的正确路由。Session还帮助...

    chatserver:网页在线聊天系统特定

    【标题】"chatserver:网页在线聊天系统特定" 指的是一个专为网页设计的在线聊天系统的实现,它基于Java技术。这个系统允许用户在网页上进行实时交流,提供了基本的聊天功能,可能包括一对一私聊、群组聊天、消息发送...

    在线聊天网页

    【在线聊天网页】是一种利用现代Web技术实现的实时通信平台,它允许用户通过网页进行实时交互,无需安装额外的应用程序。这种系统的核心是利用Ajax(Asynchronous JavaScript and XML)技术来实现实时更新,提高用户...

    ASP在线网页聊天室

    ASP在线网页聊天室是一种基于Active Server Pages(ASP)技术实现的实时交互平台,它允许用户在网页上进行实时对话,无需安装任何客户端软件,只需通过浏览器即可参与聊天。这种技术在20世纪90年代末至21世纪初非常...

    Java中网页版聊天

    这里,我们主要探讨的是一个名为"web-im-1.0.7.2"的项目,它提供了详细的文档和源代码,用于帮助开发者理解和构建自己的网页聊天应用。 1. **Web开发基础**: - HTML/CSS/JavaScript:网页的基础框架,HTML负责...

    ASP.NET在线聊天室源码

    在这个聊天室项目中,可能会采用Web Forms,这是一种事件驱动的模型,允许开发者创建类似于桌面应用程序的网页。 2. **页面生命周期**:在ASP.NET Web Forms中,理解页面生命周期至关重要,包括初始化、加载、回发...

Global site tag (gtag.js) - Google Analytics