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,不是wsconn.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"),})breakcase 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("服务端已开启")

// 控制端代码<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>控制端</title></head><div><h2>视频1</h2><button onclick="sendMsg('start1')">播放</button><button onclick="sendMsg('stop1')">暂停</button></div><div><h2>视频2</h2><button onclick="sendMsg('start2')">播放</button><button onclick="sendMsg('stop2')">暂停</button></div><div><h2>视频3</h2><button onclick="sendMsg('start3')">播放</button><button onclick="sendMsg('stop3')">暂停</button></div><body><script>const ws = new WebSocket("ws://ws.xxx.com/ws")ws.onopen = function () {console.log("控制端连接成功...")}ws.onmessage = function (e) {console.log(e.data)}function sendMsg(msg) {ws.send(JSON.stringify({type: "control",content: msg,}))}</script></body>
</html>

// 展示端
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>显示端</title><link rel="stylesheet" type="text/css" href="lib/ckplayer.css" /><script type="text/javascript" charset="utf-8" src="lib/ckplayer.js"></script><style>.video {margin-right: 20px;width: 500px;height: 300px;}</style></head><div style="display: flex"><div class="video" id="video1"></div><div class="video" id="video2"></div><div class="video" id="video3"></div></div><body><script>var player1 = new ckplayer({container: "#video1",video: "video/1.mp4",volume: 0,})var player2 = new ckplayer({container: "#video2",video: "video/2.mp4",volume: 0,})var player3 = new ckplayer({container: "#video3",video: "video/3.mp4",volume: 0,})const ws = new WebSocket("ws://ws.xxx.com/ws")ws.onopen = function () {console.log("显示端已连接....")}ws.onmessage = function (e) {console.log(e.data)const data = JSON.parse(e.data)switch (data.msg) {case "start1":player1.play()breakcase "stop1":player1.pause()breakcase "start2":player2.play()breakcase "stop2":player2.pause()breakcase "start3":player3.play()breakcase "stop3":player3.pause()break}}</script></body>
</html>

源码地址

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

websocket 实现手机/平板控制大屏Demo相关推荐

手游还能这么玩？电脑控制手机鼠标键盘大屏玩手游了解一下
玩手游还在做手搓党?2018手游新玩法:手机投屏加电脑控制,无需安卓模拟器,不过多占用电脑内存也能在电脑上大屏玩手游,还能匹配手机玩家了解一下. 工具: TC Games电脑玩手机游戏助手(非模拟器) ...
android 6.0锁屏,安卓 Android 6.0~9.0 手机/平板清除锁屏密码教程 —— 让您瞬间变大神！...
摘要生活中总是有不少粗枝大叶的马大哈,一不小心操作失误或睡的太久就把锁屏密码给忘了!焦急.懊恼.彷徨--都已经于事无补!还是试试本教程吧!本教程只对安卓 Android 6.0~9.0 并且已经 R ...
大屏 android 平板,IDC：平板遭遇大屏电话冲击，Android 统治市场
根据IDC刚发布的未来五年平板市场预测报告,今年全球平板电脑的出货量预计将达到2亿2130万台,其中Android平板的市场份额为60.8% ,iPad为35% ,Windows和其它系统平板为2.3 ...
大屏网页手机缩放html,大屏页面三种缩放
(1)按分辨率进行缩放 html,body{ margin: 0; padding: 0; font-size: 16px; overflow: hidden; font-family: " ...
服务器控制大屏显示,显示大屏唯瑞（Vewell）显示屏多种尺寸可定制，可交互式电子显示屏VewellV82-T17BL3...
Vewell交互式电子白板·多点手势识别,操作轻快,流畅 ·超稳定系统支持,反应敏捷准确 ·生动,直观,环保,不影响健康 ·功能更加强大与完善 ·大大提高工作效率和增强教学效果 ·增强了师生互动,提高 ...
Android 声音分贝控制锁屏demo实现
标题demo实现总体逻辑: 1. 声明权限 2. 声明,注册 receiver,接收注册设别管理器结果 3. 完成注册APP为设备管理器 4. 录音权限申请 5. 编写类文件,实现业务逻辑 OK,我们 ...
车载平板android 002,用平板代替车载大屏，行得通吗？
自从特斯拉「开天辟地」地把17寸的大屏装进车里,人们开始对车载大屏有了更高的追求. 尽管还是有很多人依恋旋钮的操作手感,但是从趋势来看,那个时代可能离我们越来越远了.不管你喜不喜欢.习不习惯有个大屏幕 ...
借助近距离通信，实现手机作为游戏控制器掌控大屏游戏
一.前言随着移动互联网时代的深入发展,人们对电子产品的体验效果要求越来越高,各种游戏体验和效果都得到很大的提升.本文主要介绍使用手机或者平板作为游戏控制器,借助近距离通信(Nearby Servic ...
CAUNTLY：为什么人们更喜欢大屏手机
随着手机行业的发展,手机的屏幕越做越大,老罗的坚果手机5.5寸,周鸿祎的奇酷手机也从5.5寸起步,三星,小米,华为等厂商的主要产品线也都是5寸以上的大屏手机.近日雷军也在微博上跟网友进行关于屏幕尺寸的 ...

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

实现效果

实现思路:

主要代码

源码地址

websocket 实现手机/平板控制大屏Demo相关推荐

最新文章

热门文章

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

实现效果

实现思路:

主要代码

源码地址

websocket 实现 手机/平板 控制 大屏Demo相关推荐

最新文章

热门文章

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

websocket 实现手机/平板控制大屏Demo相关推荐