# websocket
___
在一些场景中,我们需要实时推送一些设备消息到服务器上(设备在线状态)或者服务器发送一些实时的指令到设备上(服务器控制设备运行),这种实时性要求很高或者需要服务端推送到客户端指令的需求就要使用到websocket控件
## 一、使用控件
1. **定时器** 周期性触发输入时间戳或者相应的字符
![20190319192401.png](https://i.loli.net/2019/03/19/5c90d154165f7.png)
2. **websocket in** 用于创建websocket服务或者websocket客户端连接的输入
![20190319192838.png](https://i.loli.net/2019/03/19/5c90d268b1d89.png)
3. **websocket out** 用于创建websocket客户端连接或者websocket服务的输出
![20190319193122.png](https://i.loli.net/2019/03/19/5c90d30c24bb1.png)
4. **调试** 用于在调试窗口输出调试内容
![20190319194748.png](https://i.loli.net/2019/03/19/5c90d6e68653a.png)
## 二、配置界面
![20190319194136.png](https://i.loli.net/2019/03/19/5c90d5725dba1.png)
## 三、 节点属性配置
- **websocket in** 本案例中用于搭建websocket服务,用于客户端调用。类型选择连接,配置服务地址为/ws/input,那么完整的连接地址ws://为本机ip:1880/ws/input。配置详情如下图
![20190319195515.png](https://i.loli.net/2019/03/19/5c90d8a58ad67.png)
![20190319195447.png](https://i.loli.net/2019/03/19/5c90d888c9004.png)
- **调试** 用于打印输出websocket in控件接收到来自客户端的信息,拉取即可使用,无需配置
- **定时器** 本案例中用于周期性发送设备在线状态,我们这边设备为每秒发送一条json,内容为`{"status":"ok"}`,交付于websocket out控件。配置详情如下
![20190319200607.png](https://i.loli.net/2019/03/19/5c90db318e121.png)
- **websocket out** 本案例这中用于创建websocket客户端连接的输出,连接上面我们搭好的websocket服务,类型选择`连接`,地址选择我们上面配置好的地址`ws://127.0.0.1:1880/ws/input`。配置详情如下
![20190319203023.png](https://i.loli.net/2019/03/19/5c90e0e1cef24.png)
![20190319203040.png](https://i.loli.net/2019/03/19/5c90e0f2434fa.png)
## 四、部署调试
按照以上教程配置好流程后,点击菜单栏**部署**按钮进行部署程序。部署成功后程序开始运行,就会在调试窗口输出相应的结果
程序运行逻辑为:
websocket in控件搭建websocket服务,并将接收到的消息交付于调试控件在调试窗口打印输出。websocket out控件创建websocket客户端服务连接到websocket in控件搭建的websocket服务,并定时器周期性触发发送一条设备在线消息
调试界面:
![20190319204615.png](https://i.loli.net/2019/03/19/5c90e498ce8d7.png)
也可以使用前台js代码调用websocket服务,这边我们使用谷歌浏览调试界面进行调试
调试代码:
```js
var ws = new WebSocket("ws://127.0.0.1:1880/ws/input");
ws.onopen = function()
{
console.log("打开websocket连接");
ws.send("hello");
};
ws.onmessage = function(evt)
{
console.log(evt.data)
};
ws.onclose = function(evt)
{
console.log("WebSocketClosed!");
};
ws.onerror = function(evt)
{
console.log("WebSocketError!");
};
```
调试结果:
![20190319210550.png](https://i.loli.net/2019/03/19/5c90e93005b6f.png)
![20190319210616.png](https://i.loli.net/2019/03/19/5c90e949c654a.png)
## 五、示例代码
以上教程可以通过拷贝下面代码实现快速复用,在新建的流程中点击界面右侧 **菜单栏**-**导入**-**剪贴板**,在文本框中粘贴下面代码后点击确定,即可快速复用
```js
[
{
"id": "792d5460.ccc41c",
"type": "websocket in",
"z": "41f61d2.fbe09e4",
"name": "",
"server": "b0127548.86f728",
"client": "",
"x": 215,
"y": 140,
"wires": [
[
"5d716e38.8d8f7"
]
]
},
{
"id": "5d716e38.8d8f7",
"type": "debug",
"z": "41f61d2.fbe09e4",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"x": 420,
"y": 140,
"wires": []
},
{
"id": "66f23f0f.0b1cf",
"type": "websocket out",
"z": "41f61d2.fbe09e4",
"name": "",
"server": "",
"client": "c5e8ab54.85c258",
"x": 495,
"y": 280,
"wires": []
},
{
"id": "7f0bdfdd.5ba3d",
"type": "inject",
"z": "41f61d2.fbe09e4",
"name": "",
"topic": "",
"payload": "{\"status\":\"ok\"}",
"payloadType": "json",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 235,
"y": 280,
"wires": [
[
"66f23f0f.0b1cf"
]
]
},
{
"id": "b0127548.86f728",
"type": "websocket-listener",
"z": "",
"path": "/ws/input",
"wholemsg": "false"
},
{
"id": "c5e8ab54.85c258",
"type": "websocket-client",
"z": "",
"path": "ws://127.0.0.1:1880/ws/input",
"tls": "",
"wholemsg": "false"
}
]
```
- 海创IIoT可视化平台
- 简介
- 使用说明
- 安装
- 注册
- 控件使用说明
- serial
- mongodb-node
- websocket
- function
- Modbus连接接口
- Modbus连接说明
- Modbus连接示例
- 设备连接案例
- 单相智能电表(DL/T645-2007协议)
- 单相智能电表(Modbus协议)
- PLC连接案例
- 西门子PLC
- 三菱PLC
- 欧姆龙PLC(HostLink协议)
- 欧姆龙PLC(Fins协议)
- 西门子s7-200 smart跑马灯场景效果
- 松下PLC
- 传感器连接案例
- 温湿度变送器
- PM空气质量检测仪
- 数据上报阿里云
- 数据上报百度云
- 微信公众号连接示例
- 获取阿里云数据
- 使用OPCUA