Gunakan webSocket dan Swoole untuk membuat ruang sembang kecil (coroutine)-Swoole-php.cn

Gunakan webSocket dan Swoole untuk membuat ruang sembang kecil (coroutine)

谨言慎行

Lepaskan： 2022-02-22 09:32:05

asal

2670 orang telah melayarinya

Kata Pengantar

Saya menulis bilik sembang tak segerak yang ringkas sebelum ini, dan kemudian saya memikirkannya, jadi saya juga membuat coroutine, jadi saya mempunyai artikel ini fungsi Mereka semua hampir sama, dengan hanya beberapa perbezaan, dan semuanya mudah.
Alamat catatan blog: Menggunakan webSocket dan Swoole untuk mencipta ruang sembang kecil (tak segerak)
Kali ini tiada fungsi tambahan, cuma satu. Degupan jantung, hantar ping secara berkala dari bahagian hadapan, pelayan tidak bertindak balas, itu sahaja.

Kod muka surat hadapan:

<!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>

Salin selepas log masuk

Kod JS:

Apabila maklumat pelayan diterima, adakah terdapat resit sambungan pertama atau adakah pelayan menghantar mesej? Perbezaan status resit boleh dibezakan dengan msgType Jika ia adalah mesej resit untuk sambungan pertama, FD akan disimpan pada halaman dan tidak akan dipaparkan dalam kawasan mesej sembang resit diterima, ia akan dipaparkan terus dalam mesej sembang.

Selain itu, perkara yang dihantar oleh komunikasi hujung hadapan dan belakang antara satu sama lain adalah semua sifat rentetan terbaik saya ialah menggabungkannya terlebih dahulu menjadi objek dan kemudian menukarnya ke dalam rentetan 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>

Salin selepas log masuk

Kod pelayan
coroutine perlu ada dalam Corun(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();    
});

Salin selepas log masuk

Selepas kod selesai, anda hanya perlu melaksanakan fail PHP berikut dalam konsol.

Kemudian kaunter penerimaan tetamu terus mengakses alamat tapak web anda, saya adalah 127.0.0.1 setempat

Buka beberapa tetingkap lagi untuk mensimulasikan berbilang pengguna, Kemudian hantar mesej untuk menguji:

Helo, pekerja.

Kod ini sangat mudah dan tidak sukar, tetapi ia boleh menggambarkan kuasa webScoket dan Swoole dengan sangat ringkas.

Atas ialah kandungan terperinci Gunakan webSocket dan Swoole untuk membuat ruang sembang kecil (coroutine). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!