websocket h5控制 pc 大屏协同

Latent 的个人博客 / 99 / 1 / 创建于 3年前 / 更新于 3年前

交互体验

接到产品需求单，哎说多都是累这几天接口写个没停🤚 今天捣鼓一下这个需求

需求简要说明：客户找我们做的pc端可视化大屏需要扫码到 h5端移动端控制pc端大屏移动端当然也是一个网页一对一操控分n个大屏于是我快速梳理了一下需求将结果完成之后做一个小小的总结：上图

在这里插入图片描述

整个流程用到的技术 websocket和 redis （workerman原因使用方便不限环境）

项目是前后端分离的将逻辑梳理清楚后工作量也就不大了前后端对半开

下载 workerman 官网文档

//composer 安装
composer require workerman/workerman

编写推送的websocket文件

<?php
/**
 * Created by PhpStorm
 * User: pl
 * Date: 2020/9/2
 * Time: 10:46
 */
use Workerman\Worker;

require_once './Autoloader.php';

$worker = new Worker("websocket://0.0.0.0:2345");

//开启的worker进程数
$worker->count = 4;

//前端连接发送的消息数据
$worker->onMessage = function ($connection,$data){
    $redis = new \Redis();
    $redis->connect('127.0.0.1','6379');
    $redis->select(2);
    //前端发送过来的唯一值 绑定连接的id
    $redis->set($connection->id,$data);
    $connection->send('已连接服务');
};

$worker->onWorkerStart = function ($ws_worker) {

    \Workerman\Timer::add(1,function () use($ws_worker){
        foreach($ws_worker->connections as $connection) {

            $redis = new \Redis();
            $queue = "nan_ling_";
            $redis->connect('127.0.0.1','6379');
            $redis->select(2);
            //获取消费的队列
            $rpop_list = $redis->get($connection->id);
            //消费路由数据
            if($rpop_list){
             $queue = $queue.$rpop_list;
                $value = $redis->rPop($queue);
                if(!is_null($value)){
                     //推送给前端
                    $connection->send($value);
                }
            }
        }
    });
};

//监听断开连接
$worker->onClose = function ($connection){
    $redis = new \Redis();
    $redis->connect('127.0.0.1','6379');
    $redis->auth('');
    $redis->select(2);
    // 删除连接的唯一值
    $redis->del($connection->id);
    echo "connection closed\n".$connection->id;
};

Worker::runAll();

二、h5更新路由接口

/**
 * 将用户信息写入队列
 * @param Request $request
 * @throws \think\Exception
 */

public function updateRoute(Request $request)
{
    $db = new Redis();
     //扫码获取的唯一值
    $client_sn = $request->header("issue");
    if(!$client_sn) {
        return $this->error([],'请重新扫码',500);
    }
    $data = $request->put();
    //组装队列名
    $queue = self::$table.$client_sn;
    //将点击的路由放入队列
    $db->redis->rPush($queue,json_encode($data,JSON_UNESCAPED_UNICODE));
    return $this->success();
}