在 Swoole 中使用 WebSocket 服务端和客户端
码农天地 -编写前端及服务器端代码
创建一个前端页面,连接到本地的WebSocket服务器:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>WebSocket</title>
</head>
<body>
<input id="sendTxt" type=text>
<button id="sendBtn">发送</button>
<div id="recv"></div>
</body>
<script type=text/javascript>
var wsServer = 'ws://127.0.0.1:8081';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
console.log("Connected to WebSocket server.");
document.getElementById("recv").innerHTML = "Connected to WebSocket server.";
};
websocket.onclose = function (evt) {
console.log("Disconnected to WebSocket server.");
};
websocket.onmessage = function (evt) {
console.log('Retrieved data from server: ' + evt.data);
document.getElementById("recv").innerHTML = 'Retrieved data from server: ' + evt.data;
};
websocket.onerror = function (evt, e) {
console.log('Error occured: ' + evt.data);
document.getElementById("recv").innerHTML = 'Error occured: ' + evt.data;
};
document.getElementById("sendBtn").onclick = function() {
var txt = document.getElementById("sendTxt").value;
websocket.send(txt);
}
</script>
</html>
创建一个HTTP服务器文件,用来接收前端的页面请求:
#!/usr/bin/env php
<?php
declare(strict_types=1);
$http = new Swoole\Http\Server("0.0.0.0", 80);
$http->on(
"request",
function (Swoole\Http\Request $request, Swoole\Http\Response $response) {
$response->end(
file_get_contents("./index.html")
);
}
);
$http->start();
创建一个WebSocket服务器文件,用来处理前端的WebSocket请求:
#!/usr/bin/env php
<?php
declare(strict_types=1);
echo "running...\n";
//创建WebSocket Server对象,监听0.0.0.0:8081端口
$ws = new Swoole\WebSocket\Server('0.0.0.0', 8081);
$ws->on('open', function (Swoole\WebSocket\Server $ws, $request) {
var_dump($request->fd, $request->server);
$ws->push($request->fd, "hello, welcome\n");
});
$ws->on('message', function (Swoole\WebSocket\Server $ws, $frame) {
list($toFd, $message) = explode(" ", $frame->data);
echo "Message: {$frame->fd}:{$message}\n";
$ws->push($frame->fd, "{$message}");
global $ws;
// $ws->connections 遍历所有websocket连接用户的fd
foreach ($ws->connections as $fd) {
// 需要先判断是否是正确的websocket连接,否则有可能会push失败
if ($ws->isEstablished($fd) && $fd == $toFd) {
$ws->push($fd, "{$message}");
}
}
});
$ws->on('close', function (Swoole\WebSocket\Server $ws, $fd) {
echo "client-{$fd} is closed\n";
});
$ws->start();
启动相关服务启动容器及HTTP服务器:
docker run --rm -p 80:80 -p 8081:8081 --name swoole -v /d/swoole/www:/var/www phpswoole/swoole:4.5.9-php7.4
进入容器启动WebSocket服务器:
docker exec swoole bash
php ws.php
测试从前端页面收发消息打开一个标签页访问:
另外打开一个标签页访问:
在标签页1给标签页2发送消息:
标签页2收到消息:
标签页2给标签页1发送消息:
标签页1收到消息:
测试从后端程序收发消息编写一个客户端给标签页1和标签页2发送消息:
<?php
Co\run(function () {
$client = new Swoole\Coroutine\Http\Client("127.0.0.1", 8081);
$ret = $client->upgrade("/");
if ($ret) {
$client->push("1 hello111");
$client->push("2 hello222");
var_dump($client->recv());
co::sleep(0.1);
}
});
执行客户端代码:
标签页1收到消息:
标签页2收到消息:
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
php介绍
PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。
下一篇: Swoole 协程快速上手