PHP实现最简单的聊天室应用

介绍

聊天应用程序在网上非常常见。开发人员在构建这类应用程序时的选择也很多。这篇文章介绍了如何实现基于PHP-AJAX的聊天应用程序,并且不需要刷新页面就可以发送和接收消息。

核心逻辑

在定义应用程序的核心功能之前,先来看一看聊天应用程序的基本外观,如以下截图所示:

通过聊天窗口底部的输入框输入聊天文本。点击Send按钮,就开始执行函数set_chat_msg。这是一个基于Ajax的函数,因此无需刷新页面就可以将聊天文本发送到服务器。程序在服务器中执行chat_send_ajax.php以及用户名和聊天文本。

  1. // 
  2. // Set Chat Message 
  3. // 
  4.  
  5. function set_chat_msg() 
  6.     if(typeof XMLHttpRequest != "undefined") 
  7.     { 
  8.         oxmlHttpSend = new XMLHttpRequest(); 
  9.     } 
  10.     else if (window.ActiveXObject) 
  11.     { 
  12.        oxmlHttpSend = new ActiveXObject("Microsoft.XMLHttp"); 
  13.     } 
  14.     if(oxmlHttpSend == null) 
  15.     { 
  16.        alert("Browser does not support XML Http Request"); 
  17.        return; 
  18.     } 
  19.  
  20.     var url = "chat_send_ajax.php"; 
  21.     var strname="noname"; 
  22.     var strmsg=""; 
  23.     if (document.getElementById("txtname") != null) 
  24.     { 
  25.         strname = document.getElementById("txtname").value; 
  26.         document.getElementById("txtname").readOnly=true; 
  27.     } 
  28.     if (document.getElementById("txtmsg") != null) 
  29.     { 
  30.         strmsg = document.getElementById("txtmsg").value; 
  31.         document.getElementById("txtmsg").value = ""; 
  32.     } 
  33.  
  34.     url += "?name=" + strname + "&msg=" + strmsg; 
  35.     oxmlHttpSend.open("GET",url,true); 
  36.     oxmlHttpSend.send(null); 

PHP模块从Query String(查询字符串)中接收表单数据,更新到命名为chat的数据库表中。chat数据库表有命名为IDUSERNAMECHATDATEMSG的列。ID字段是自动递增字段,所以这个ID字段的赋值将自动递增。当前的日期和时间,会更新到CHATDATE列。

  1. require_once('dbconnect.php'); 
  2.  
  3. db_connect(); 
  4.  
  5. $msg = $_GET["msg"]; 
  6. $dt = date("Y-m-d H:i:s"); 
  7. $user = $_GET["name"]; 
  8.  
  9. $sql="INSERT INTO chat(USERNAME,CHATDATE,MSG) " . 
  10.       "values(" . quote($user) . "," . 
  11.       quote($dt) . "," . quote($msg) . ");"; 
  12.  
  13.       echo $sql; 
  14.  
  15. $result = mysql_query($sql); 
  16. if(!$result) 
  17.     throw new Exception('Query failed: ' . mysql_error()); 
  18.     exit(); 

为了接收来自数据库表中所有用户的聊天消息,timer函数被设置为循环5秒调用以下的JavaScript命令,即每隔5秒时间执行get_chat_msg函数。

var t = setInterval(function(){get_chat_msg()},5000);

get_chat_msg是一个基于Ajax的函数。它执行chat_recv_ajax.php程序以获得来自于数据库表的聊天信息。在 onreadystatechange属性中,另一个JavaScript 函数get_chat_msg_result被连接起来。在返回来自于数据库表中的聊天消息的同时,程序控制进入到 get_chat_msg_result函数。

  1. // 
  2. // General Ajax Call 
  3. // 
  4.  
  5. var oxmlHttp; 
  6. var oxmlHttpSend; 
  7.  
  8. function get_chat_msg() 
  9.     if(typeof XMLHttpRequest != "undefined") 
  10.     { 
  11.         oxmlHttp = new XMLHttpRequest(); 
  12.     } 
  13.     else if (window.ActiveXObject) 
  14.     { 
  15.        oxmlHttp = new ActiveXObject("Microsoft.XMLHttp"); 
  16.     } 
  17.     if(oxmlHttp == null) 
  18.     { 
  19.         alert("Browser does not support XML Http Request"); 
  20.        return; 
  21.     } 
  22.  
  23.     oxmlHttp.onreadystatechange = get_chat_msg_result; 
  24.     oxmlHttp.open("GET","chat_recv_ajax.php",true); 
  25.     oxmlHttp.send(null); 

在chat_recv_ajax.php程序中,来自于用户的聊天消息会通过SQL select命令进行收集。为了限制行数,在SQL查询中还给出了限制子句(limit 200),即要求聊天数据库表中的最后200行。所获得的消息再返回给Ajax函数,用于在聊天窗口中显示内容。

  1. require_once('dbconnect.php'); 
  2.  
  3. db_connect(); 
  4.  
  5. $sql = "SELECT *, date_format(chatdate,'%d-%m-%Y %r') 
  6. as cdt from chat order by ID desc limit 200"; 
  7. $sql = "SELECT * FROM (" . $sql . ") as ch order by ID"; 
  8. $result = mysql_query($sql) or die('Query failed: ' . mysql_error()); 
  9.  
  10. // Update Row Information 
  11. $msg=""; 
  12. while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) 
  13.    $msg = $msg . "" . 
  14.         "" . 
  15.         ""; 
  16. $msg=$msg . "<table style="color: blue; font-family: verdana, arial; " . 
  17.   "font-size: 10pt;" border="0"> 
  18.   <tbody><tr><td>" . $line["cdt"] . 
  19.   " </td><td>" . $line["username"] . 
  20.   ": </td><td>" . $line["msg"] . 
  21.   "</td></tr></tbody></table>"; 
  22.  
  23. echo $msg; 
  24.  
  25. 数据准备就绪的同时,JavaScript函数会收集来自于PHP接收到的数据。这些数据将被安排置于DIV标签内。oxmlHttp.responseText会保留从PHP程序接收到的聊天消息,并复制到DIV标签的document.getElementById(“DIV_CHAT”).innerHTML属性。 
  26.  
  27. function get_chat_msg_result(t) 
  28.     if(oxmlHttp.readyState==4 || oxmlHttp.readyState=="complete") 
  29.     { 
  30.         if (document.getElementById("DIV_CHAT") != null) 
  31.         { 
  32.             document.getElementById("DIV_CHAT").innerHTML =  oxmlHttp.responseText; 
  33.             oxmlHttp = null; 
  34.         } 
  35.         var scrollDiv = document.getElementById("DIV_CHAT"); 
  36.         scrollDiv.scrollTop = scrollDiv.scrollHeight; 
  37.     } 

下面的SQL CREATE TABLE命令可用于创建名为chat的数据库表。所有由用户输入的信息都会进入到数据库表中。

create table chat( id bigint AUTO_INCREMENT,username varchar(20),
chatdate datetime,msg varchar(500), primary key(id));

兴趣点

这段用于实现聊天应用程序的代码非常有意思。它可以改进成为一个完全成熟的HTTP聊天应用程序。创建该应用程序的逻辑也非常简单。即使是初学者理解起来也不会有任何困难。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
想要实现 WebSocket 聊天室功能,需要以下步骤: 1. 创建一个 WebSocket 服务器 使用 PHP 的 Swoole 扩展可以快速创建一个 WebSocket 服务器,代码如下: ``` $server = new Swoole\WebSocket\Server("0.0.0.0", 9501); // 监听 WebSocket 连接事件 $server->on('open', function (Swoole\WebSocket\Server $server, $request) { echo "opened: {$request->fd}\n"; }); // 监听 WebSocket 消息事件 $server->on('message', function (Swoole\WebSocket\Server $server, $frame) { echo "received message: {$frame->data}\n"; }); // 启动服务器 $server->start(); ``` 2. 处理聊天消息 在上面的代码中,当接收到 WebSocket 消息事件时,会输出消息内容。我们可以根据消息内容来处理聊天室功能。比如,如果消息内容是“加入房间”,我们可以将该用户加入到聊天室中,如果消息内容是“发送消息”,我们就将该消息发送给所有人。代码示例: ``` $server->on('message', function (Swoole\WebSocket\Server $server, $frame) { $data = json_decode($frame->data, true); switch ($data['action']) { case 'join': // 将用户加入到聊天室 $server->push($frame->fd, json_encode(['action' => 'join', 'message' => '加入聊天室成功'])); break; case 'send': // 将消息发送给所有人 foreach ($server->connections as $fd) { $server->push($fd, json_encode(['action' => 'send', 'message' => $data['message']])); } break; default: break; } }); ``` 3. 前端页面实现 最后,需要写一个前端页面来连接 WebSocket 服务器,并实现聊天室功能。代码示例: ``` <html> <head> <title>WebSocket 聊天室</title> </head> <body> <div> <input type="text" id="message" placeholder="请输入消息"> <button id="send">发送</button> </div> <ul id="messages"></ul> <script> var ws = new WebSocket('ws://localhost:9501'); ws.onopen = function(event) { // 连接成功,发送加入房间消息 ws.send(JSON.stringify({'action': 'join'})); }; ws.onmessage = function(event) { var data = JSON.parse(event.data); switch (data.action) { case 'join': // 加入聊天室成功 addMessage('系统消息', '加入聊天室成功'); break; case 'send': // 收到消息 addMessage('其他用户', data.message); break; default: break; } }; document.getElementById('send').addEventListener('click', function() { // 发送消息 var message = document.getElementById('message').value; ws.send(JSON.stringify({'action': 'send', 'message': message})); document.getElementById('message').value = ''; }); function addMessage(user, message) { // 添加消息到列表中 var li = document.createElement('li'); li.innerHTML = '<strong>' + user + '</strong>: ' + message; document.getElementById('messages').appendChild(li); } </script> </body> </html> ``` 以上就是实现 WebSocket 聊天室功能的全部代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值