溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何用webSocket與Swoole打造一個(gè)小型聊天室的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何用webSocket與Swoole打造一個(gè)小型聊天室文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。
前端頁(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 代碼：
在服務(wù)器信息回執(zhí)時(shí)，會(huì)有第一次連接回執(zhí)，還是服務(wù)端發(fā)送消息回執(zhí)的狀態(tài)區(qū)別，通過(guò) msgType 來(lái)分辨，如果是第一次連接的回執(zhí)消息，則把 FD 做一個(gè)頁(yè)面留存，并不顯示在聊天消息區(qū)，如果收到的是消息回執(zhí)，就直接顯示到聊天消息區(qū)。
還有就是，前后端相互通信發(fā)送的東西，都是字符串性質(zhì)最優(yōu)，我前端處理的方法是先組合成一個(gè)對(duì)象，然后轉(zhuǎn) JSON 串。
<script>
//滾動(dòng)條最底部
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);
//點(diǎn)擊發(fā)送
function send() {
var msg = $('#msg').val();
var data = {
'nickname': nickname,
'fd': thisFd,
'data': msg }
//生成json 方便后臺(tái)接收以及使用
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> 服務(wù)器已連接,開(kāi)始聊天吧 </p>');
websocket.send(data); };
//鏈接斷開(kāi)
websocket.onclose = function (evt) {
$("#content >p:last-child").after('<p> 服務(wù)器已斷開(kāi),請(qǐng)重新連接 </p>'); };
//收到服務(wù)器消息
websocket.onmessage = function (evt) {
//握手成功后，會(huì)接受到服務(wù)端返回的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 + ' 說(shuō)：<br>' + data.data + '</p>');
//接收到消息自動(dòng)觸底
scrolltest();
break; } };
//服務(wù)器異常
websocket.onerror = function (evt, e) {
$("#content >p:last-child").after('<p> 服務(wù)器異常 </p>'); };
//心跳,本次新增
function heartbeat() { var data = {
'msgType': 'ping', }
//生成json 方便后臺(tái)接收以及使用
var data = JSON.stringify(data);
websocket.send(data); }
//30 秒一次
setInterval(heartbeat, 30000);</script>服務(wù)端代碼
協(xié)程，都需要在 Co\run(function () {}) 里。
<?php
//定義獲取當(dāng)前的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,
// 表示一個(gè)連接如果600秒內(nèi)未向服務(wù)器發(fā)送任何數(shù)據(jù)，此連接將被強(qiáng)制關(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;
}
//格式化接收到j(luò)son
$data = json_decode($frame->data);
switch ($data->msgType){
case 'open':
//鏈接第一次
$data = json_encode([
'fd' => $objectId,
'msgType' => 1
//代表第一次連接，前端處理fd
]);
$ws->push($data);
break;
case 'ping':
//接收到心跳 不作回復(fù)//
echo $data->msgType;
break;
default :
// 原基礎(chǔ)上不動(dòng)，增加一些自定義
$data->msgType = 2; //代表服務(wù)器端回復(fù)
$data->time = date('Y-m-d H-i-s');
$data = json_encode($data);
foreach ($wsObjects as $obj) {
$obj->push($data);
} }
} }
});
$server->start(); });代碼齊全之后，接下來(lái)就只需要在控制臺(tái)執(zhí)行以下 PHP 文件就行。
然后前臺(tái)直接訪問(wèn)你的網(wǎng)站地址，我的是本地 127.0.0.1
多開(kāi)幾個(gè)窗口模擬多個(gè)用戶，然后發(fā)送消息測(cè)試即可
關(guān)于“如何用webSocket與Swoole打造一個(gè)小型聊天室”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何用webSocket與Swoole打造一個(gè)小型聊天室”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼