Loading...
墨滴

leruge

2021/08/06  阅读:38  主题:默认主题

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 {
      height400px;
      width400px;
      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",
          successfunction (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",
      successfunction (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:leruge@163.com
  3. 微信:lerage

leruge

2021/08/06  阅读:38  主题:默认主题

作者介绍

leruge