服務器代碼：
<?php
# 定義clientFds數組 保存所有websocket連接
$clientFds = [];
# 創建websocket服務
$server = new swoole_websocket_server("0.0.0.0", 9300);
# 握手成功 觸發回調函數
$server->on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) {
# echo "server: handshake success with fd{$request->fd}\n";
# 將所有客戶端連接標識，握手成功後保存到數組中
$clientFds[] = $request->fd;
});
# 收到消息 觸發回調函數
$server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) {
# echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
# $server->push($frame->fd, "this is server");
# 當有用戶發送信息，發送廣播通知所有用戶
foreach ($clientFds as $fd) {
$server->push($fd, $frame->data);
}
});
# 關閉連接 觸發回調函數
$server->on('close', function ($ser, $fd) use (&$clientFds) {
# echo "client {$fd} closed\n";
# 關閉會話 銷燬標識fd
# 根據value 去數組中找對應的key
$res = array_search($fd, $clientFds, true);
unset($clientFds[$res]);
});
# 啓動websocket服務
$server->start();
前端html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket聊天室</title>
</head>
<body>
聊天窗口：
<div id="main" style="width:600px;height: 300px; overflow: auto;border: solid 2px black;">
</div>
<textarea id="textarea" placeholder="在這裏輸入信息"></textarea>
<br />
<input type="button" value="發送聊天" onclick="send()">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var myDate = new Date();
var name = prompt("請輸入您的暱稱", ""); //彈出input框
// 打開一個 web socket
var ws = new WebSocket("ws://192.168.10.10:9300");
ws.onopen = function () {
console.log("連接成功");
};
//收到消息 觸發回調
ws.onmessage = function (evt) {
var data = evt.data;
console.log("收到socket服務消息，內容：" + data);
$('#main').append("<p>" + data + "</p>");
};
function send() {
var data = $('#textarea').val();
ws.send(name + ":" + data);
}
ws.onclose = function () {
// 關閉 websocket
console.log("連接已關閉...");
};
</script>
</body>
</html>
虛擬機中確保已經有了swoole環境
啓動websocket服務：
頁面顯示：
當輸入名字後，F12查看我們輸出的信息，顯示的是websocket連接成功。
這時我們多開幾個窗口連接我們的websocket服務器。
並輸入名字測試，在聊天窗口上觀察數據。
這樣就實現了簡單的聊天室demo