<?phpdeclare (strict_types = 1);namespace app\subscribe;use app\Request;use Swoole\Server;use think\swoole\Table;use think\swoole\Websocket;class WebSocketEvent{ private $websocket = null; private $m2fd = null; private $fd2m = null; public function __construct(Websocket $websocket, Table $table) { $this->websocket = $websocket; $this->m2fd = $table->get('m2fd'); $this->fd2m = $table->get('fd2m'); } // 这里之所以注入一个请求,是因为如果我们不用type=11这种方式绑定,则可以通过new WebSocket的时候把用户ID传递过来,然后直接实现绑定 public function onOpen(Request $request) { $currentFd = $this->websocket->getSender(); $data = [ 'type' => 11, 'fd' => $currentFd ]; $this->websocket->push(json_encode($data)); } public function onClose() { $currentFd = $this->websocket->getSender(); // 通过fd找到用户ID $memberId = $this->fd2m->get((string)$currentFd, 'member_id'); // 如果没有找到映射,就说明没有绑定过,就什么不做,找到的话就解除绑定 if ($memberId) { $this->fd2m->del((string)$currentFd); // 根据用户ID找到映射的所有fd,然后把存在的当前fd移除掉 $fds = $this->m2fd->get((string)$memberId, 'fd'); if ($fds) { $fdArray = explode(',', $fds); $key = array_search($currentFd, $fdArray); unset($fdArray[$key]); if ($fdArray) { $resFds = implode(',', $fdArray); $this->m2fd->set((string)$memberId, $resFds); } else { $this->m2fd->del((string)$memberId); } } } } public function onApiEvent($data) { // $data是接口传递过来的参数,如果是11则实现绑定,是5就转发给from_id和to_id if ($data['type'] == 11) { // m2fd、fd2m俩个Table的映射 $this->fd2m->set((string)$data['fd'], ['member_id' => $data['member_id']]); // 先查找该用户ID是否已经绑定过其它fd了 $fds = $this->m2fd->get((string)$data['member_id'], 'fd'); if (!$fds) { $this->m2fd->set((string)$data['member_id'], ['fd' => $data['fd']]); } else { // 看看fd是否在已经映射的fd中,如果在就什么都不做,如果不在就追加到后面 $fdArray = explode(',', $fds); if (!in_array($data['fd'], $fdArray)) { $this->m2fd->set((string)$data['member_id'], ['fd' => $fds . ',' . $data['fd']]); } } } if ($data['type'] == 1) { // 根据from_id和to_id俩个用户ID找到对应的fd,然后发送消息 $fromFds = $this->m2fd->get((string)$data['from_id'], 'fd'); $toFds = $this->m2fd->get((string)$data['to_id'], 'fd'); $fromFdArray = $toFdArray = []; if ($fromFds) { $fromFdArray = explode(',', $fromFds); } if ($toFds) { $toFdArray = explode(',', $toFds); } // 合并所有发送者fd和接受者fd,之所以发送给发送者,一方面是简化前端工作,前端只需要接受websocket消息即可,另一方面,多端的话其它端可以可以即时看到聊天记录 $allFdArray = array_unique(array_merge($fromFdArray, $toFdArray)); // 发送消息 $this->websocket->to($allFdArray)->push(json_encode($data)); } }}
接口实现代码如下<?phpnamespace app\controller;class Index{ // 为了演示方便我们不使用路由了,使用控制器方法的方式访问 public function index() { // 聊天页面 return view(); } // 如果使用type=1的绑定方式就要,否则这个可以不要 public function bindMember() { // 用户ID本来是要从登录状态中获取的,这里我们是模拟演示,就让前端传 $params = request()->only(['member_id', 'fd']); // 触发ApiEvent事件,组装数据type=11、member_id、fd $data = $params; $data['type'] = 11; event('swoole.websocket.ApiEvent', $data); // 只要不抛异常就是绑定成功了 $res = [ 'code' => 1, 'msg' => '绑定成功' ]; return json($res); } // 我们只写一个发送文字消息的例子 public function sendMessage() { // 其它需要的字段我们就不写了,自己实现即可,持久化到数据库逻辑也不写了,只是写消息发送 $params = request()->only(['from_id', 'to_id', 'content']); $data = $params; $data['type'] = 1; event('swoole.websocket.ApiEvent', $data); // 不抛异常就是成功了 $res = [ 'code' => 1, 'msg' => '发送消息成功' ]; return json($res); }}
聊天页面代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>聊天页面</title> <style> #chat { height: 400px; width: 400px; background: gray; } </style></head><body><div id="chat"></div><button id="connect">链接websocket服务端</button><input type="text" id="content" value="内容" placeholder="聊天内容"><input type="text" id="to" placeholder="目标对象" value="1"><input type="text" id="from" placeholder="发送对象" value="1"><button id="submit">发送</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script> var ws = null; // 链接websocket $("#connect").click(function () { // TODO 改成自己的域名即可 ws = new WebSocket("ws://swoole.dreamphp.com.cn:8282"); ws.onmessage = function (res) { var data = JSON.parse(res.data); // 如果没有接管Handler,则消息格式就跟我们的不一样,可能会报错,不用理会的 if (data.type == 11) { $.ajax({ url: "{:url('index/bindMember')}", type: "post", data: {member_id: $("#from").val(), fd: data.fd}, dataType: "json", success: function (res) { console.log(res); } }); } if (data.type == 1) { $("#chat").append("用户" + data.from_id + ":" + data.content + "<br>"); } }; return false; }); // 发送内容 $("#submit").click(function () { var toId = $("#to").val(); var fromId = $("#from").val(); var content = $("#content").val(); $.ajax({ url: "{:url('index/sendMessage')}", type: "post", data: {from_id: fromId, to_id: toId, content: content}, dataType: "json", success: function (res) { console.log(res) } }); return false; });</script></body></html>
type说明(type为1可以去掉,可以换成new websocket的时候就直接绑定)(图片来源网络,侵删)
0 评论