Swoole 搭建 Websocket 聊天室

版权声明：潘广宇博客， https://blog.csdn.net/panguangyuu/article/details/88383459

一、前端CSS代码

<script>

var wsServer = 'ws://服务器IP:9502';
var websocket = new WebSocket(wsServer);

// 监听打开连接
websocket.onopen = function (evt) {
    console.log("Connected to WebSocket server.");
};

// 关闭连接
websocket.onclose = function (evt) {
    console.log("Disconnected");
};

// 接受服务器推送的信息
websocket.onmessage = function (evt) {

    console.log('Retrieved data from server: ' + evt.data);
	
	var json = JSON.parse(evt.data);
	
	var dat = new Date();
	
	var data = "<span style='color:blue;font-weight:bolder;font-size:14px;'>"+json['user']+" ("+dat.getHours()+":"+dat.getMinutes()+")：</span><span>"+json['message']+"</span><br />";
	$("#msgboard").append(data);
};

// 异常处理
websocket.onerror = function (evt, e) {
    console.log('Error occured: ' + evt.data);
};

$("#post").click(function() {
	var htm = $("#msg").val();
	websocket.send(htm);
});

</script>

二、服务器端 Server.php ， 执行 php Server.php

<?php

$ws = new swoole_websocket_server("0.0.0.0", 9502);

// 监听websocket连接打开事件

$ws->on('open', function ($ws, $request) {
    // var_dump($request->fd, $request->get, $request->server);

        global $ws;

        foreach ($ws->connections as $val) {
                $ws->push($val, '{"user":"'.$request->fd.'", "message":"我上线啦"}');
        }

});

// 监听websocket消息事件

$ws->on('message', function ($ws, $frame) {
        echo "Message: {$frame->data}\n";

        $link = link_redis();

        push_array($frame->fd, $link);

        $onlineUser = getOnlineUser($link);

        global $ws;

    foreach ($ws->connections as $val) {
                $ws->push($val, '{"user":"'.$frame->fd.'", "message":"'.$frame->data.'"}');
        }


});

// 监听websocket连接关闭事件

$ws->on("close", function ($ws, $fd) {
        $link = link_redis();

        $link->sRem("test_chat", $fd);

        echo "client-{$fd} is closed\n";
});

$ws->start();