workman实现websocket即时通讯很方便简单。根据官方文档的案例来实现:
https://www.workerman.net/doc/workerman/getting-started/simple-example.html
简单介绍一下实现步骤:
安装workman
在一个空目录中运行
composer require workerman/workerman
在项目根目录下创建ws_test.php
<?php
use Workerman\Worker;
use Workerman\Connection\TcpConnection;
require_once __DIR__ . '/vendor/autoload.php';
// 注意:这里与上个例子不同,使用的是websocket协议
$ws_worker = new Worker("websocket://0.0.0.0:2000");
// 启动4个进程对外提供服务
$ws_worker->count = 4;
// 当收到客户端发来的数据后返回hello $data给客户端
$ws_worker->onMessage = function(TcpConnection $connection, $data)
{
//在控制台打印客户端发送过来的消息
var_dump($data);
var_export($data);
// 向客户端发送hello $data
$connection->send('hello ' . $data);
};
// 运行worker
Worker::runAll();
在项目根路径下创建chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input name="message"><button id="sendMessage">发送消息</button>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 假设服务端ip为127.0.0.1
ws = new WebSocket("ws://127.0.0.1:2000");
ws.onopen = function() {
console.log("连接成功")
};
//点击发送消息
$("#sendMessage").click(function () {
let mgs = $("input[name=message]").val();
console.log(mgs)
ws.send(mgs);
})
//监听服务端发送回来的消息
ws.onmessage = function(e) {
alert("收到服务端的消息:" + e.data);
};
</script>
</html>
最终的项目结构如下:
先开启服务端:
php ws_test.php start
再打开chat.html页面,输入消息回车后开前端和后端的控制台
检查前端是否真的连接的是websocket
前端加入心跳检测
// 假设服务端ip为127.0.0.1
ws = new WebSocket("ws://127.0.0.1:2000");
let heart_check_timer = null
ws.onopen = function() {
console.log("连接成功")
//每隔一段时间进行心跳检测
heart_check_timer = setInterval(heart_check_fun,3000);
};
//点击发送消息
$("#sendMessage").click(function () {
let mgs = $("input[name=message]").val();
console.log(mgs)
ws.send(mgs);
});
//监听服务端发送回来的消息
ws.onmessage = function(e) {
console.log("收到服务端的消息:" + e.data);
};
//定时发送心跳包
heart_check_fun = function () {
let data = {
type:'heartCheck',
msg:'ping'
};
ws.send(JSON.stringify(data));
};
//连接关闭函数
ws.onclose = function () {
console.log("连接已关闭...");
// webSocketReconnect(wsUrl)//如果连接关闭则重连
//关闭websocket的时候停止setInterval()
clearInterval(heart_check_timer);
};
//连接错误函数
ws.onerror = function () {
console.log("连接错误...");
};