和 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 开发实时聊天功能的基本思路