搜索
首页php框架Swoole利用 webSocket 与 Swoole 打造一个小型聊天室(协程)

前言

    前面有写一个异步简单的聊天室,然后想着,就把协程的也弄了吧所以就有了这个文章,其实所有的功能都大差不差,就仅仅几个地方不一样而已,也都是简单的地方。
博文地址:利用 webSocket 与 Swoole 打造一个小型聊天室 (异步)
本次也没增加功能,就是增加了一个心跳,从前端定时发送一个 ping ,服务端不作反应,仅此而已。

前端页面代码:

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>打工人聊天室</title>   
<!--需要引入jq 文件--></head><style>    
.content {        
height: 400px;        
max-width: 400px;        
overflow: auto;        
border-radius: 5px;        
border: 1px solid #f0f0f0;    
}</style>
<body>            
<div id="content" class="content">                
<p>聊天区域</p>            
</div>            
你好打工人:<samp id="nickname">昵称</samp> <br>            
本次连接FD: <samp id="fd-samp"></samp> <br>            
<input type="text" id="msg">            
<input type="hidden" id="fd" value="">            
<button id="send" onclick="send()">发送</button>
</body>
</html>

JS 代码:

    在服务器信息回执时,会有第一次连接回执,还是服务端发送消息回执的状态区别,通过 msgType 来分辨,如果是第一次连接的回执消息,则把 FD 做一个页面留存,并不显示在聊天消息区,如果收到的是消息回执,就直接显示到聊天消息区。

    还有就是,前后端相互通信发送的东西,都是字符串性质最优,我前端处理的方法是先组合成一个对象,然后转 JSON 串。

<script>    
//滚动条最底部    
function scrolltest() {        
var div = document.getElementById("content");        
div.scrollTop = div.scrollHeight;    }    
var wsServer = &#39;ws://127.0.0.1:9502/websocket&#39;;    
var websocket = new WebSocket(wsServer);    
var nickname = Math.random().toString(36).substr(2);    
thisFd = &#39;&#39;;    $(&#39;#nickname&#39;).html(nickname);    
//点击发送    
function send() {        
var msg = $(&#39;#msg&#39;).val();        
var data = {            
&#39;nickname&#39;: nickname,            
&#39;fd&#39;: thisFd,            
&#39;data&#39;: msg        }        
//生成json 方便后台接收以及使用        
var data = JSON.stringify(data);        
websocket.send(data);        
//然后清空        
$(&#39;#msg&#39;).val(&#39;&#39;);    }    
//链接成功    
websocket.onopen = function (evt) {        
var data = {            
&#39;msgType&#39;: &#39;open&#39;        }        
var data = JSON.stringify(data);        
$("#content >p:last-child").after(&#39;<p> 服务器已连接,开始聊天吧 </p>&#39;);        
websocket.send(data);    };    
//链接断开    
websocket.onclose = function (evt) {        
$("#content >p:last-child").after(&#39;<p> 服务器已断开,请重新连接 </p>&#39;);    };    
//收到服务器消息    
websocket.onmessage = function (evt) {        
//握手成功后,会接受到服务端返回的fd ,msgType = 1        
//字符串格式化成json        
var data = eval(&#39;(&#39; + evt.data + &#39;)&#39;);        
// console.log(evt.data);        
switch (data.msgType) {            
case 1:                
thisFd = data.fd;                
$(&#39;#fd-samp&#39;).html(thisFd);                
$(&#39;#fd&#39;).val(thisFd);                
break;            case 2:                
if (data.nickname == nickname) {                    
data.nickname = &#39;我&#39;;                }                
$("#content >p:last-child").after(&#39;<p>&#39; + data.nickname + &#39; 在 &#39; + data.time + &#39; 说:<br>&#39; + data.data + &#39;</p>&#39;);                
//接收到消息自动触底                
scrolltest();                
break;        }    };    
//服务器异常    
websocket.onerror = function (evt, e) {        
$("#content >p:last-child").after(&#39;<p> 服务器异常 </p>&#39;);    };    
//心跳,本次新增    
function heartbeat() {        var data = {            
&#39;msgType&#39;: &#39;ping&#39;,        }        
//生成json 方便后台接收以及使用        
var data = JSON.stringify(data);        
websocket.send(data);    }    
//30 秒一次    
setInterval(heartbeat, 30000);</script>

服务端代码
协程,都需要在 Co\run(function () {}) 里。

<?php    
//定义获取当前的id函数    
function getObjectId(\Swoole\Http\Response $response) {        
if (PHP_VERSION_ID < 70200) {            
$id = spl_object_hash($response);        
} else {            
$id = spl_object_id($response);        }        
return $id;    }    
Co\run(function () {        
$server = new Co\Http\Server(&#39;127.0.0.1&#39;, 9502, false);        
$server->set([            
&#39;heartbeat_idle_time&#39;      => 600, 
// 表示一个连接如果600秒内未向服务器发送任何数据,此连接将被强制关闭            
&#39;heartbeat_check_interval&#39; => 60,  
// 表示每60秒遍历一次        
]);        
$server->handle(&#39;/websocket&#39;, function ($request, $ws) {            
$ws->upgrade();            
global $wsObjects;            
$objectId = getObjectId($ws);            
$wsObjects[$objectId] = $ws;            
while (true) {                
$frame = $ws->recv();                
if ($frame === &#39;&#39;) {                    
unset($wsObjects[$objectId]);                    
$ws->close();                    
break;                
} else if ($frame === false) {                    
echo &#39;error : &#39; . swoole_last_error() . "\n";                    
break;                } 
else {                    
if ($frame->data == &#39;close&#39; || get_class($frame) === Swoole\WebSocket\CloseFrame::class) 
{                        
unset($wsObjects[$objectId]);                        
$ws->close();                        
return;                    
}                    
//格式化接收到json                    
$data = json_decode($frame->data);                    
switch ($data->msgType){                        
case &#39;open&#39;:                            
//链接第一次                            
$data = json_encode([                                
&#39;fd&#39; => $objectId,                                
&#39;msgType&#39; => 1  
//代表第一次连接,前端处理fd                            
]);                            
$ws->push($data);                            
break;                        
case &#39;ping&#39;:                            
//接收到心跳 不作回复
//                            
echo  $data->msgType;                            
break;                        
default :                            
// 原基础上不动,增加一些自定义                            
$data->msgType = 2; 
//代表服务器端回复                            
$data->time = date(&#39;Y-m-d H-i-s&#39;);                            
$data = json_encode($data);                            
foreach ($wsObjects as $obj) {                                
$obj->push($data);                            
}                    
}                
}            }        
});        
$server->start();    
});

代码齐全之后,接下来就只需要在控制台执行以下 PHP 文件就行。

然后前台直接访问你的网站地址,我的是本地 127.0.0.1

多开几个窗口模拟多个用户,然后发送消息测试即可:

你好,打工人。

代码很简单,难度不大,但是可以很简洁的反应出 webScoket 和 Swoole 的一种强大。

以上是利用 webSocket 与 Swoole 打造一个小型聊天室(协程)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具