在 Swoole 中使用 WebSocket 服务端和客户端

码农天地 -
在 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开发领域。

Tags 标签

phpswoolewebsocket

扩展阅读

加个好友,技术交流

1628738909466805.jpg