和 HTTP 協議一樣，WebSocket 協議 也是建立在 TCP/IP協議 基礎上的協議 ，但不一樣的是 HTTP 協議 爲單向協議，即瀏覽器只能向服務器請求資源，服務器才能將數據傳送給瀏覽器。 WebSocket 協議 是一種雙向通信協議，在建立連接後，WebSocket服務器和 Browser/UA 都能主動的向對方發送或接收數據！
WebSocket 服務器腳本
1. 創建腳本：ws_server.php
<?php
// 創建websocket服務器對象，監聽 0.0.0.0:9501 端口
$server = new Swoole\WebSocket\Server("0.0.0.0", 9501);
// 配置
// $server->set([]);
// 監聽 WebSocket 連接打開事件
$server->on('open', function ($server, $request) {
foreach ($server->connections as $key => $fd) {
// 遍歷發送加入文案
$server->push($fd,"Welcome User_{$request->fd} joined this chat room.");
}
});
// 監聽 WebSocket 消息事件
$server->on('message', function ($server, $frame) {
foreach ($server->connections as $k => $v) {
// 羣發消息
$server->push($v, "User_".$frame->fd.":".$frame->data);
}
});
// 監聽關閉
$server->on('close', function ($ser, $fd) {
echo "User_{$fd} closed\n";
});
// 啓用服務
$server->start();
2. 啓動服務：
php73 ./ws_server.php
3. 創建客戶端js腳本：ws_client.html
<!DOCTYPE html>
<html>
<head>
<title>swoole test</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>swoole test</h1>
<div class="show-data"></div>
<input class="content">
<button class="send-btn">send</button>
<script>
// server 地址
var ws_url = "ws://kder.top:9501";
var ws = new WebSocket(ws_url);
// 點擊發送
$(".send-btn").click(function () {
var content = $(".content").val();
// 給服務器發送文案
ws.send(content);
$(".content").val("");
});
// 監聽接收新消息
ws.onmessage = function (ent) {
// 展示
$(".show-data").append(ent.data + "<br>");
}
// 關閉
ws.onclose = function (ent) {
console.log("onclose", ent);
}
</script>
</body>
</html>
4. 瀏覽器訪問ws_client.html
>>>對比 && 總結 GatewayWorker 開發實時聊天功能的基本思路