Swoole 快速起步:创建 WebSocket 服务器(聊天室)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章