利用swoole框架和Websocket实现聊天室
2022-05-31MYSQL
利用swoole框架和Websocket实现聊天室， 用swoole框架和Websocket开发简单聊天室, Swoole WebSocket聊天室, 利用Swoole实现PHP+websocket 聊天室
一、Swoole聊天室工作原理
案例演示链接：
二、什么是消息推送
推送技术的基础思想是将浏览器主动查询信息改为服务器主动发送信息。服务器发送一批数据，浏览器显示这些数据，同时保证与服务器的连接。当服务器需要再次发送一批数据时，浏览器显示数据并保持连续。以后，服务器仍然可以发送批量数据，浏览器继续显示数据，依次类推。
三、实现思路
1. 管理员连接swoole服务并且发送消息到swoole服务
2. swoole服务接收到管理员发送的信息后并且发送给连接到swoole上的其他的客户端
3. 其他的客户端通过websocket监听swoole服务发送过来的信息并且输出
四、php代码——server.php
<?php
// swoole不小心开启了守护进程如何关闭？ https://blog.csdn.net/qq_33679504/article/details/78659220
// 后台运行swoole命令 screen php server.php
$server = new Swoole\WebSocket\Server("0.0.0.0", 9501);
// 监听事件，客户端连接到服务器时，自动触发open事件，自动执行回调函数
$server->on('open', function ($server, $request) {
echo "server: handshake success with fd{$request->fd}\n";
});
// 客户端发送消息到服务器时，自动触发message事件，自动执行回调函数
$server->on('message', function ($server, $request) {
// $request->fd 客户端连接成功时，服务器分配给它的标识
// $server->push($request->fd, $request->data);
// $request->data 接收到客户端发送过来的消息
$fd_list = $server->connections; // 所有连接的客户端
if(!empty($fd_list)){
foreach ($fd_list as $fd){
$server->push($fd, $request->data);
}
}
});
// 客户端自动断开时触发close断开连接事件
$server->on('close', function ($server, $request) {
echo "client {$request} closed\n";
});
// 开启服务器
$server->start();
五、前端html代码——client.html
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var socket;
if ("WebSocket" in window) {
// 使用WebSocket对象连上swoole的WebSocket服务器
var ws = new WebSocket("ws://swoole.whmblog.cn:9501");
socket = ws;
// 绑定连接事件
ws.onopen = function() {
$("#showMes").append("连接成功<br/>");
};
// 绑定消息事件，有收到服务器推送的消息时，就自动触发
ws.onmessage = function(evt) {
var received_msg = JSON.parse(evt.data);
var show_msg = '<b style="color: red;">'+received_msg.nickname+"</b>: "+received_msg.message+"<br/>";
$('#showMes').append(show_msg);
// 让div滚动条一直保持在最下方
// https://blog.csdn.net/kukudehui/article/details/89376980
var div_scroll = document.getElementById('showMes');
div_scroll.scrollTop = div_scroll.scrollHeight;
};
// 绑定断开连接事件
ws.onclose = function() {
$('#showMes').append('断开了连接');
};
} else {
alert("浏览器不支持WebSocket");
}
$('#sendMsg').click(function () {
console.log("sendMsg",socket);
var nickname = $("#nickname").val();
var message = $("#message").val();
var send_data = {nickname: nickname, message: message};
socket.send(JSON.stringify(send_data));
});
});
</script>
</head>
<body>
<div id="showMes" style="width:300px;height:500px;background-color: #dddddd;overflow:auto;"></div>
<br/>
<label>名称</label>
<input type="text" id="nickname" value="whmblog" />
<br/>
<label>消息</label>
<textarea id="message">来一个消息</textarea>
<button id="sendMsg">发送</button>
</body>
</html>
很赞哦！ ()
