think-swoole简易使用教程--websocket

think-swoole使用教程

核心思想是swoole只是作为一个消息转发器，业务逻辑还是通过接口来实现，发送消息也是使用接口，客服端websocket只负责创建和监听接受消息即可。

环境

1. centos8

2. PHP7.4

3. thinkphp6

开发过程

1. 安装think-swoole扩展

2. 为了方便我们安装think-view扩展

3. 配置swoole.php文件

   1. server.host 服务器IP

   2. server.port 服务器端口

   3. server.options.daemonize 是否进程

   4. websocket.enable 打开websocket

   5. websocket.handle 自己接管或者删除这一项（我们下面讲的是删除这一个配置项）

   6. websocket.subscribe 创建事件订阅，我这里的文件名是WebSocketEvent（也可以使用监听，只不过需要多个文件）

   7. 因为是多进程，我们需要共享变量，可以用MySQL、redis等，我们这里使用swoole的共享内容Table，因为同一个用户可能是多端登录，我们创建俩个Table，一个是用户映射fd，一个是fd映射用户，Table的映射是一对一的，但是一个用户可能有多个fd，所以用户映射fd的Table的值使用逗号分隔的多个值，例如用户1->fd1,fd2

   8. 配置tables俩个table，分别是m2fd、fd2m，thinkphp实现的Table如何使用请自己看代码

       'tables'     => [
           'm2fd' => [
               'size' => 102400,
               'columns' => [
                   ['name' => 'fd', 'type' => \Swoole\Table::TYPE_STRING, 'size' => 50]
               ]
           ],
           'fd2m' => [
               'size' => 102400,
               'columns' => [
                   ['name' => 'member_id', 'type' => \Swoole\Table::TYPE_INT]
               ]
           ],
       ],
   

4. 通过订阅实现websocket逻辑

5. 把我们需要使用的类通过构造函数依赖注入，方便使用

6. 我们需要WebSocket类实现通信逻辑，Table类实现用户fd映射

7. 如果我们使用了type为1的绑定方式，则订阅open事件，发送给客户端

8. message事件方法体留空或者不写即可，我们使用接口来实现逻辑

9. close事件移除用户和fd的映射关系

10. 我们定义一个事件，用于接口触发，从而实现发送消息逻辑，事件名称叫做ApiEvent，代码如下

<?php
declare (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;
    private $server = null;

    public function __construct(Websocket $websocket, Table $table, Server $server)
    {
        $this->websocket = $websocket;
        $this->m2fd = $table->get('m2fd');
        $this->fd2m = $table->get('fd2m');
        $this->server = $server;
    }

    // 这里之所以注入一个请求，是因为如果我们不用type=1这种方式绑定，则可以通过new WebSocket的时候把用户ID传递过来，然后直接实现绑定
    public function onOpen(Request $request)
    {
        $currentFd = $this->websocket->getSender();
        $data = [
            'type' => 1,
            '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是接口传递过来的参数，如果是1则实现绑定，是5就转发给from_id和to_id
        if ($data['type'] == 1) {
            // 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'] == 5) {
            // 根据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));
            // 使用websocket不知道为什么会串台
            // $this->websocket->to($allFdArray)->push(json_encode($data));
            foreach ($allFdArray as $v) {
                $this->server->push((int)$v, json_encode($data));
            }
        }
    }
}

1. 接口实现代码如下

<?php
namespace app\controller;

class Index
{
    // 为了演示方便我们不使用路由了，使用控制器方法的方式访问
    public function index()
    {
        // 聊天页面
        return view();
    }

    // 如果使用type=1的绑定方式就要，否则这个可以不要
    public function bindMember()
    {
        // 用户ID本来是要从登录状态中获取的，这里我们是模拟演示，就让前端传
        $params = request()->only(['member_id', 'fd']);
        // 触发ApiEvent事件，组装数据type=1、member_id、fd
        $data = $params;
        $data['type'] = 1;
        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'] = 5;
        event('swoole.websocket.ApiEvent', $data);
        // 不抛异常就是成功了
        $res = [
            'code' => 1,
            'msg' => '发送消息成功'
        ];
        return json($res);
    }
}

1. 聊天页面代码

<!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 () {
    // 改成自己的域名即可
    ws = new WebSocket("ws://swoole.dreamphp.com.cn:8282");

    ws.onmessage = function (res) {
      console.log(res)
      var data = JSON.parse(res.data);
      if (data.type == 1) {
        $.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 == 5) {
        $("#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的时候就直接绑定）

type	说明	额外说明
1	通知用户要绑定了	fd
5	聊天消息	id消息ID，chat_type下面说明，room_num房间号，from_id发送者ID，to_id接受者ID，avatar发送者头像，nickname发送者昵称，create_time发送时间，content发送内容，duration音视频时间

chat_type说明

chat_type	content所代表内容	额外说明
1	文字消息	----
2	表情地址	----
3	图片地址	----
4	语音地址	duration语音时长
5	视频地址	duration视频时长

联系方式

1. QQ:305530751

2. EMAIL:[e-mail]

3. 微信:lerage