接到产品需求单 ，哎说多都是累 这几天接口写个没停🤚 今天捣鼓一下这个需求
需求简要说明：客户找我们做的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
在这里插入图片描述
测试一下结果 完成这两个接口 其他的由前端去折腾吧～～
在这里插入图片描述
在这里插入图片描述
