websocket 实现 手机平板 控制 大屏Demo

* 本文主要说明实现思路, 复杂效果可以基于此进行扩展

实现效果

手机/平板 控制大屏

实现思路:

1. 建立websocket 服务, 本文中是用 nodejs-websocket  来搭建, 需要安装相应依赖;

2. 控制端和展示端连上同一个websocket服务;

3. 控制端发送消息, 服务端收到消息后判断消息类型进行分发;

4. 展示端收到相应的消息, 作出相应的动作;

5. 视频播放基于 ckplayer 实现;

主要代码

const ws = require("nodejs-websocket")
const moment = require("moment")

function broadcast(obj) {
    server.connections.forEach(function (conn) {
        // 注意：这里是server,不是ws
        conn.sendText(JSON.stringify(obj)) // 注意：这里得转成字符串发送过去，不然会报错。
    })
}

const server = ws
    .createServer(function (conn) {
        conn.on("text", function (data) {
            console.log("data", data)
            const obj = JSON.parse(data)
            switch (obj.type) {
                case "control":
                    broadcast({
                        type: "control",
                        nickname: obj.nickname,
                        msg: obj.content,
                        date: moment().format("YYYY-MM-DD HH:mm:ss"),
                    })
                    break
                case 2:
                    broadcast({
                        type: 2,
                        nickname: obj.nickname,
                        uid: obj.uid,
                        msg: obj.msg,
                        date: moment().format("YYYY-MM-DD HH:mm:ss"),
                    })
                    break
            }
        })

        conn.on("close", function (e) {
            console.log(e, "服务端连接关闭")
        })

        conn.on("error", function (e) {
            console.log(e, "服务端异常")
        })
    })
    .listen(8080)
console.log("服务端已开启")

// 控制端代码



    
        
        
        
        
    

    
        视频1
        播放
        暂停
    
    
        视频2
        播放
        暂停
    
    
        视频3
        播放
        暂停
    
    
        
    

// 展示端


    
        
        
        
        
        
        
        
    
    
        
        
        
    
    
        
    

源码地址

https://github.com/byc233518/websocket-demo