NodeRed系列——websoket展示数据

本文使用nodered创建websocket连接，通过http网页websocket连接nodered展示数据，最后通过网页发送websocket消息给nodered

本文在以下作者内容上进行修改通过Node-Red在本地网页上实现PLC数据可视化（MySQL+HTML+JavaScript+CSS+WebSocket）_香风冰织的博客-CSDN博客_plc可视化

目录

一 配置结果

二 具体配置

1. 在nodered配置websocket out给所有客户端发送websocket消息

 2. 创建网页websocket连接nodered，展示数据

3. nodered配置websocket in接收发送的消息并显示

---

一 配置结果

在nodered配置如下：http://localhost:1880/

结果如下

(1)http://localhost:1880/hello

（2）使用http://www.jsons.cn/websocket/

连接nodered的websocket效果，自动获取到客户端消息如下

（3）使用网页客户端发送websocket消息

nodered显示如下

二 具体配置

1. 在nodered配置websocket out给所有客户端发送websocket消息

（1）inject节点

（2）random

新增random插件

拖拽random控件到工作区，设置From最小值和To最大值

（3）使用websocket out节点，类型选择连接，url填写ws/request 

(4) debug节点正常配置

配置完成后即可使用http://www.jsons.cn/websocket/

进行连接测试，地址栏输入：ws://localhost:1880/ws/request

 2. 创建网页websocket连接nodered，展示数据

（1）配置http in进行创建get请求

（2） 使用template节点创建网页模版 

代码参考通过Node-Red在本地网页上实现PLC数据可视化（MySQL+HTML+JavaScript+CSS+WebSocket）_香风冰织的博客-CSDN博客_plc可视化

具体内容

    
    

    
    

    

    



    
    

    

    
    

        连接 WebSocket
    

 （3）配置http response节点

配置完成后，打开浏览器 输入http://localhost:1880/hello

点击连接websocket，指针随值转动 

3. nodered配置websocket in接收发送的消息并显示

（1）配置websocket in

选择类型为连接，URl填为ws/request 

(2) debug输出配置

 配置完成后，在json网页发送websocket消息，debug将接收到发送的内容

http://www.jsons.cn/websocket/