基于node.js的ws模块和net模块实现的浏览器与tcp客户端实时通讯小例程

项目运行

项目地址:tcp-ws

下载之后进入文件夹,控制台执行npm install安装依赖包.

安装完毕后npm start启动,控制台提示http,websocket,tcp三个服务启动完毕,则程序正常运行.端口根据自己的需求更改.

打开浏览器,输入http服务的地址: 127.0.0.1:9560,可看到程序的界面.

测试通讯

使用tcp调试助手连接服务器,使用
{“deviceNum”:“xx22”,“login”:“true”}
这种json格式的数据执行tcp客户端登录,浏览器界面会增加一个显示在线客户端的块,
使用
{“deviceNum”:“xx22”,“sendData”:“true”,“data”:{“key1”:“123”,“key2”:“abc”,“key3”:“abc123”}}
这种json格式的数据发送实时数据,浏览器界面会实时更新数据的值.数据格式的键不能变,值可以随便改.
点击浏览器界面上的发送按钮,查看tcp调试助手,可实现浏览器到tcp客户端的实时通讯.

功能描述

项目模拟的场景是终端设备接入时就发送登录信息,并且每一个终端设备的编号不能重复.

控制台提示三个服务启动完毕

调试助手建立tcp客户端连接,模拟终端设备,发送登录数据.后端保存登录的信息.

浏览器连接http服务器的端口,默认是9560.
websocket服务也使用9560端口,服务器会自动区分请求信息是http格式还是websocket发送的信息,不用担心会冲突,也可使用不同的端口.
页面上会显示已经登录的终端信息.

使用调试助手发送数据信息,前端就会事实更新数据内容.

打开两个调试助手连接并发送数据信息,可看到网页端实时更新了数据.
新打开一个网页端监控,界面会生成两个终端设备信息,但终端发送的数据并没有保存,直到终端下一次发送数据时才会实时更新.后端可根据需求选择保存数据进入数据库的时机.
当tcp客户端断开连接之后,网页端会实时去掉终端信息块.

点击网页端的发送按钮,相应的终端会收到controlInfo字符,实现从网页端到终端设备的实时控制.
同一个deviceNum多次登录,控制台会提示deviceNum重复.

通过使用net模块集中处理tcp客户端,使用ws创建websocket服务,浏览器是ws客户端,tcp服务端程序和ws服务端程序通过event模块交互,实现连接,断开,实时数据展示的通道,给有类似需求的同学们提供一个例程.具体业务可以在此基础之上扩展.

ws模块和net模块的教程有很多,但都没有结合起来,找点实时数据展示的资料都是些ajax长轮询之类的解决方案,性能不高,实时性不好,于是就自己写这个.接触node半年多,代码不完善的地方很多,仅供参考.
如果对你有帮助麻烦star一下.