接到產品需求單 ,哎說多都是累 這幾天介面寫個沒停? 今天搗鼓一下這個需求
需求簡要說明:客戶找我們做的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
測試一下結果 完成這兩個介面 其他的由前端去折騰吧~~
小夥伴們其他好點想法可以底下留言喲~~~
本作品採用《CC 協議》,轉載必須註明作者和本文連結