websocket h5控制 pc 大屏 进行协同操作

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

需求简要说明：客户找我们做的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){ }else{ $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([]); }

执行文件

php h5_remote.php start

测试一下结果 完成这两个接口 其他的由前端去折腾吧～～

小伙伴们其他好点想法可以底下留言哟～～～☺️☺️☺️