参考的钉钉调试页面实现,仅供学习!
功能为:
PC端编写代码,手机端执行
解决的痛点是:
避免了调试
应用时重复写各种测试页面
- hybrid
源码
github.com/dailc/node-…
运行
- 1.`npm install`
- 2.`npm run serve`启动`node`服务
- 3.浏览器打开`. / test / debugroom.html`页面
- 4.开始测试(浏览器直接打开或手机扫码)
- 注意,手机端链接请确保在同一个网段
注意⚠️,实际情况请重写
页面,让其支持对于
- client
容器的API
- Hybrid
示例
原理其实非常简单,就是
中的
- HTML5
,而且为了方便,还直接使用了成熟的第三方库
- websocket
- socket.io
基本交互如下:
- 1.先启动一个node后台(控制台),基于`express`和`socket.io`监听`socket`连接
- 2.打开一个PC端调试页面,连接后台,创建一个房间(可以创建N个房间)
- 3.PC端页面基于房间号生成对应房间的客户端地址(每一个房间中可以有`N`个客户端),并基于地址创建二维码,方便使用(可以基于`qrcode.js`等库)
- 4.`Hybrid`客户端扫码后(或者打开客户端链接后),客户端页面连接后台,根据当前的房间号,在房间中创建客户端
- 5.PC端输入代码后,点击执行时,会将代码文本发送到后台,然后后台再推送给客户端,客户端通过`eval`即可执行这段代码,执行完毕后也可通过同样方式通知PC端
需要注意的是:
的
- npm
包
- socket.io
文件
- socket.io.js
另外:
语法编写的,然后基于
- es6
打包成
- gulp
文件,实际运行的是
- dest
中的发布文件,代码规范接近与
- dest
- airbnb
调试页面?因为打造它的核心需求就是用来调试
- hybrid
API
- hybrid
由于篇幅关系(也没有必要),并不会将所有代码都介绍一遍,只会介绍一些重点步骤,更多的可以直接阅读源码(源码中已经足够清晰)
(PC端)和
- DebugRoom
(
- DebugClient
端)
- hybrid
根据交互,PC端和hybrid端都需要和后台连接,因此这里直接单独封装了两个类
DebuRoom类
房间的定义是:
引用
- socket
标识
- id
- class DebugRoom {
- // 所属的房间号
- this._roomId
- // 所持有的socket对象
- this._socket
- // 客户端持有默认是一个空对象,key是clientid,value是client
- this._clients
- id()
- clients()
- socket()
- getClientsCount()
- removeClient(client)
- addClient(client)
- clearClients()
- }
DebugClient类
客户端的定义是:
引用
- socket
标识
- id
引用,指向对于的房间号(当然其实也可以是引用
- id
对象的)
- DebugRoom
- class DebugClient {
- // 所属的房间号
- this._roomId
- // 客户端id
- this._clientId
- // 所持有的socket对象
- this._socket
- id()
- roomId()
- socket()
- }
前后端交互通过
中定义的事件来,以下是房间以及客户端和后台的交互事件接口
- socket.io
通用交互事件
后台:
- // 后台监听连接,每有一个连接时(前端通过`io.connect`),会通知客户端触发'open'事件
- io.on('connection', ...)
- // 后台监听关闭连接,每当连接关闭时(前端直接关闭或调用`socket.disconnect`),会检测本地房间与客户端,如果关闭的是客户端,则移除这个客户端,对于的房间下的引用也置空,否则如果是房间,移除并关闭房间内所有的客户端
- io.on('disconnect', ...)
房间与客户端:
- // 前台监听打开事件,此时,如果是房间,则会通知后台触发'create room',否则通知后台触发'create client'
- socket.on('open', ...)
- // 前台监听连接是否关闭
- socket.on('disconnect', ...)
房间与后台交互事件
后台:
- // 监听创建房间,如果房间ID合法,则会创建一个新的房间(new DebugRoom)
- io.on('create room', ...)
- // 监听房间分发数据,并且将数据转发给房间内的所有客户端,通知客户端触发'receive dispatch data'事件
- io.on('dispatch data', ...)
房间:
- // 监听客户端创建,每一个客户端加入对应房间时都会通知这个房间
- socket.on('client created', ...)
- // 监听客户端关闭,每一个客户端退出时都会通知这个房间
- socket.on('client destroy', ...)
- // 监听客户端执行,客户端每执行一次分发数据时,都会通知房间是否执行成功
- socket.on('client excuted', ...)
客户端与后台交互事件
后台:
- // 监听客户端创建,如果房间已存在,并且客户端id合法,才会正常创建,创建完后会通知房间触发'client created'事件
- io.on('create client', ...)
- // 监听客户端响应执行,客户端执行一次分发数据后,会通知后台,后台接收到这个事件后,通知房间触发'client excuted'事件
- io.on('client excute notify', ...)
客户端:
- // 监听接收分发数据,接收完后会执行数据中的代码,并且通知后台是否执行成功,触发后台的'client excute notify'事件
- socket.on('receive dispatch data', ...)
以上流程就是整套程序的基本思路与交互,这里再补充一些交互细节
和
- roomsHash
缓存住所有的房间和客户端,方便直接查询
- clientsHash
可以直接绑定在对于的
- id
中,这样更方便
- socket
最好不要直接使用,可以进过一次编码(这样可以直接使用中文)
- id
更多源码请参考github.com/dailc/node-…
来源: https://juejin.im/post/5a1d2470f265da432a7b538c