版权声明:潘广宇博客, 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();