websocket h5控制 pc 大屏 進行操作

Latent發表於2020-09-02

接到產品需求單 ,哎說多都是累 這幾天介面寫個沒停? 今天搗鼓一下這個需求

需求簡要說明:客戶找我們做的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

測試一下結果 完成這兩個介面 其他的由前端去折騰吧~~

小夥伴們其他好點想法可以底下留言喲~~~:relaxed::relaxed::relaxed:
本作品採用《CC 協議》,轉載必須註明作者和本文連結
不成大牛,不改個簽

相關文章