如何用webSocket與Swoole打造一個小型聊天室

這篇文章主要介紹了如何用webSocket與Swoole打造一個小型聊天室的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何用webSocket與Swoole打造一個小型聊天室文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)主營文山州網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,手機APP定制開發(fā),文山州h5重慶小程序開發(fā)搭建,文山州網(wǎng)站營銷推廣歡迎文山州等地區(qū)企業(yè)咨詢

前端頁面代碼：

<!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>聊天區(qū)域</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()">發(fā)送</button>
</body>
</html>

JS 代碼：

在服務器信息回執(zhí)時，會有第一次連接回執(zhí)，還是服務端發(fā)送消息回執(zhí)的狀態(tài)區(qū)別，通過 msgType 來分辨，如果是第一次連接的回執(zhí)消息，則把 FD 做一個頁面留存，并不顯示在聊天消息區(qū)，如果收到的是消息回執(zhí)，就直接顯示到聊天消息區(qū)。

還有就是，前后端相互通信發(fā)送的東西，都是字符串性質(zhì)最優(yōu)，我前端處理的方法是先組合成一個對象，然后轉(zhuǎn) JSON 串。

<script>    
//滾動條最底部    
function scrolltest() {        
var div = document.getElementById("content");        
div.scrollTop = div.scrollHeight;    }    
var wsServer = 'ws://127.0.0.1:9502/websocket';    
var websocket = new WebSocket(wsServer);    
var nickname = Math.random().toString(36).substr(2);    
thisFd = '';    $('#nickname').html(nickname);    
//點擊發(fā)送    
function send() {        
var msg = $('#msg').val();        
var data = {            
'nickname': nickname,            
'fd': thisFd,            
'data': msg        }        
//生成json 方便后臺接收以及使用        
var data = JSON.stringify(data);        
websocket.send(data);        
//然后清空        
$('#msg').val('');    }    
//鏈接成功    
websocket.onopen = function (evt) {        
var data = {            
'msgType': 'open'        }        
var data = JSON.stringify(data);        
$("#content >p:last-child").after('<p> 服務器已連接,開始聊天吧 </p>');        
websocket.send(data);    };    
//鏈接斷開    
websocket.onclose = function (evt) {        
$("#content >p:last-child").after('<p> 服務器已斷開,請重新連接 </p>');    };    
//收到服務器消息    
websocket.onmessage = function (evt) {        
//握手成功后，會接受到服務端返回的fd ，msgType = 1        
//字符串格式化成json        
var data = eval('(' + evt.data + ')');        
// console.log(evt.data);        
switch (data.msgType) {            
case 1:                
thisFd = data.fd;                
$('#fd-samp').html(thisFd);                
$('#fd').val(thisFd);                
break;            case 2:                
if (data.nickname == nickname) {                    
data.nickname = '我';                }                
$("#content >p:last-child").after('<p>' + data.nickname + ' 在 ' + data.time + ' 說：<br>' + data.data + '</p>');                
//接收到消息自動觸底                
scrolltest();                
break;        }    };    
//服務器異常    
websocket.onerror = function (evt, e) {        
$("#content >p:last-child").after('<p> 服務器異常 </p>');    };    
//心跳,本次新增    
function heartbeat() {        var data = {            
'msgType': 'ping',        }        
//生成json 方便后臺接收以及使用        
var data = JSON.stringify(data);        
websocket.send(data);    }    
//30 秒一次    
setInterval(heartbeat, 30000);</script>

服務端代碼
協(xié)程，都需要在 Co\run(function () {}) 里。

<?php    
//定義獲取當前的id函數(shù)    
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('127.0.0.1', 9502, false);        
$server->set([            
'heartbeat_idle_time'      => 600, 
// 表示一個連接如果600秒內(nèi)未向服務器發(fā)送任何數(shù)據(jù)，此連接將被強制關(guān)閉            
'heartbeat_check_interval' => 60,  // 表示每60秒遍歷一次        ]);        
$server->handle('/websocket', function ($request, $ws) {            
$ws->upgrade();            
global $wsObjects;            
$objectId = getObjectId($ws);            
$wsObjects[$objectId] = $ws;            
while (true) {                
$frame = $ws->recv();                
if ($frame === '') {                    
unset($wsObjects[$objectId]);                    
$ws->close();                    
break;                
} else if ($frame === false) {                    
echo 'error : ' . swoole_last_error() . "\n";                    
break;                } 
else {                    
if ($frame->data == 'close' || get_class($frame) === Swoole\WebSocket\CloseFrame::class) 
{                        
unset($wsObjects[$objectId]);                        
$ws->close();                        
return;                    
}                    
//格式化接收到json                    
$data = json_decode($frame->data);                    
switch ($data->msgType){                        
case 'open':                            
//鏈接第一次                            
$data = json_encode([                                
'fd' => $objectId,                                
'msgType' => 1  
//代表第一次連接，前端處理fd                            
]);                            
$ws->push($data);                            
break;                        
case 'ping':                            
//接收到心跳 不作回復//                            
echo  $data->msgType;                            
break;                        
default :                            
// 原基礎上不動，增加一些自定義                            
$data->msgType = 2; //代表服務器端回復                            
$data->time = date('Y-m-d H-i-s');                            
$data = json_encode($data);                            
foreach ($wsObjects as $obj) {                                
$obj->push($data);                            
}                    }                
}            }        
});        
$server->start();    });

代碼齊全之后，接下來就只需要在控制臺執(zhí)行以下 PHP 文件就行。

然后前臺直接訪問你的網(wǎng)站地址，我的是本地 127.0.0.1

多開幾個窗口模擬多個用戶，然后發(fā)送消息測試即可

關(guān)于“如何用webSocket與Swoole打造一個小型聊天室”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何用webSocket與Swoole打造一個小型聊天室”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標題名稱：如何用webSocket與Swoole打造一個小型聊天室
分享地址：http://muchs.cn/article46/ijoihg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站內(nèi)鏈、網(wǎng)站建設、企業(yè)建站、網(wǎng)站維護、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設