websocket在php端,【php】在 Swoole 中使用 WebSocket 服务端和客户端

编写前端及服务器端代码

创建一个前端页面,连接到本地的WebSocket服务器:

WebSocket

发送

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);

}

创建一个HTTP服务器文件,用来接收前端的页面请求:

#!/usr/bin/env 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

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->set([

// 配置 Task 进程的数量

'task_worker_num' => 10,

// 关闭 Task 协程支持

'task_enable_coroutine' => false

]);

$ws->on('open', function (Swoole\WebSocket\Server $ws, Swoole\Http\Request $request) {

echo '[info] new connection, fd is ' . $request->fd . PHP_EOL;

$ws->push($request->fd, "hello, welcome\n");

});

$ws->on('message', function (Swoole\WebSocket\Server $ws, Swoole\WebSocket\Frame $frame) {

echo '[info] new message from fd ' . $frame->fd . PHP_EOL;

$ws->push($frame->fd, "success!");

$ws->task($frame->data);

});

$ws->on('task', function (Swoole\WebSocket\Server $ws, int $task_id, int $src_worker_id, $data) {

echo "[task] new async task[id=$task_id] : " . PHP_EOL;

list($toFd, $message) = explode(" ", $data);

// $ws->connections 遍历所有websocket连接用户的fd

foreach ($ws->connections as $fd) {

// 需要先判断是否是正确的websocket连接,否则有可能会push失败

if ($fd == $toFd && $ws->isEstablished($fd)) {

$ws->push($fd, $message);

}

}

$ws->finish("");

});

$ws->on('finish', function (Swoole\WebSocket\Server $ws, int $task_id, $data) {

echo "[task] async task[id=$task_id] finish" . PHP_EOL;

});

$ws->on('close', function (Swoole\WebSocket\Server $ws, int $fd) {

echo '[closed] client '. $fd . ' closed' . PHP_EOL;

});

$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

测试从前端页面收发消息

打开一个标签页访问:

95156cf89b64d52c674e31a2b2244efc.png

d6e5518100b97e2ca04bbbd92c617f17.png

另外打开一个标签页访问:

a5a55df3d1b1a00302bc1a1aab7fefba.png

974ce719e7b7a14f978f7e395be1bc57.png

在标签页1给标签页2发送消息:

6e38ac2072ecb3f85f7b44661edf0d74.png

标签页2收到消息:

7b5c1e5881ecee07990005419c2902b0.png

标签页2给标签页1发送消息:

dba1dde4cdf9e760fe5163d6041c3230.png

标签页1收到消息:

b221bba48ae94833406e278bdbf945d9.png

测试从后端程序收发消息

编写一个客户端给标签页1和标签页2发送消息:

use SwooleCoroutine;

use SwooleCoroutineHttpClient;

use function SwooleCoroutinerun;

run(function () {

$client = new Client("127.0.0.1", 8081);

$ret = $client->upgrade("/");

if ($ret) {

$client->push("1 hello111");

$client->push("2 hello222");

$recv = json_encode($client->recv(5));

echo '[info] retrieved data from server: ' . $recv . PHP_EOL;

Coroutine::sleep(0.1);

}

});

执行客户端代码:

62c240cfbdf8b3ca8ad12cd18b23df8a.png

a74a1384066e66ec094ca5d3a5577f17.png

标签页1收到消息:

7e799047c7ecc0bd249ac1ebf43511ac.png

标签页2收到消息:

ffd7c3b3ffce51593e50665962b7a8ee.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值