WebSocket实现网页端远程控制幻灯片翻页，核心是建立浏览器与服务端双向实时通道，手机或另一设备作为遥控器发送“上一页”“下一页”指令，主展示页即时响应；服务端用Node.js+ws库搭建，维护连接列表并广播指令；演示页监听消息调用Reveal.next()/prev()；遥控页通过按钮或快捷键发送JSON指令；需注意跨域、WSS加密及移动端休眠问题。
用 WebSocket 实现网页端远程控制幻灯片翻页，核心在于建立浏览器与服务端的双向实时通道，让手机或另一台设备作为遥控器，发送“上一页”“下一页”指令，主展示页即时响应。关键不在轮询或刷新，而是一条长连接把动作秒级同步过去。
服务端需启动 WebSocket 服务器
浏览器无法直接让两个页面通信，必须通过中间服务转发消息。可用 Node.js + ws 库快速搭建：
- 安装：
npm install ws - 新建
server.js，监听端口（如 8080），维护客户端连接列表 - 当任一客户端发来
{"action":"next"}或{"action":"prev"}，立刻广播给所有其他连接（排除自己） - 注意：生产环境建议加简单鉴权（如 token 校验），避免被随意操控
演示页监听指令并触发翻页
在你的幻灯片 HTML 页面中（如用 Reveal.js、Swiper 或自研翻页逻辑），引入 WebSocket 客户端代码：
- 创建连接：
const socket = new WebSocket('ws://localhost:8080'); - 监听
message事件，解析 JSON 数据 - 收到
next就调用Reveal.next()；收到prev就调用Reveal.prev() - 建议加个状态提示（如右下角浮动文字“已切换到第3页”），增强操作反馈
遥控页只需轻量表单或按钮
另起一个 HTML 文件（可部署在手机浏览器打开），不需复杂 UI：
- 两个大按钮：◀ 上一页 和 ▶ 下一页
- 点击时通过同一 WebSocket 连接发送对应指令对象
- 可选：添加快捷键支持（
←/→键），提升操作效率 - 无需刷新页面，也不依赖后端 API，纯前端交互靠 WebSocket 驱动
跨域与部署注意事项
本地开发时若演示页和遥控页协议/端口不同（如 http://localhost:3000 和 http://localhost:8080），WebSocket 默认允许跨域，但需确保服务端未显式拒绝 Origin —— ws 库默认放行所有来源，上线前务必收紧。
- 上线时推荐统一域名：遥控页用
remote.yoursite.com，演示页用slides.yoursite.com，WebSocket 地址写wss://yoursite.com/ws - 启用 WSS（WebSocket Secure）：配合 HTTPS 使用，避免被中间设备拦截或复位连接
- 移动端测试时关闭省电模式，防止 WebSocket 连接被系统休眠中断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
