概览



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


一、搭建聊天页面





二、css 样式





三、使用 PHP 创建登录页面





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

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


调转至登录页面

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





欢迎和注销

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

1、把用户名显示出来：






2、注销确认

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



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




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




四、处理用户的输入

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

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




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

post.php



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



五、展示聊天记录的内容（log.html）

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


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




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



让聊天记录可以滚动：




3、实时更新聊天记录：



每 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



-