WebSocket

WebSocket 节点用于在大屏或大屏与第三方系统之间通信。

通过 WebSocket 节点，可实现在大屏与大屏、大屏与移动端设备、大屏与其他控制端等不同端之间的通信。

基本信息

特性	说明
是否支持添加多个	✔️
是否有配置项	✔️

WebSocket 配置项

属性	说明
服务地址	使用自定义的第三方 WebSocket 服务的地址， 形如 ws://xxxxx 或 wss://xxxxx。
控制端	控制端的大屏编码，当前大屏将允许被所填编码所指的大屏控制。
受控端	受控端的大屏编码，当前大屏想要控制的大屏的编码。
接收消息 （可添加多个）	当前 WebSocket 节点能接收的来自其他端的消息事件的名称，需要在整个页面内唯一。
发送消息 （可添加多个）	通过当前 WebSocket 节点发送到其他端的消息事件的名称，需要在整个页面内唯一。

详细说明

WebSocket 有两种模式：

1. 使用平台内置的 WebSocket 服务器
2. 使用自定义的第三方 WebSocket 服务器

使用内置服务器

使用内置服务器，可以进行大屏与大屏之间的消息传递。

若要使用内置服务器，请保持「服务地址」为空，然后分别填写「控制端」和「受控端」信息。

假设有两个大屏，A 和 B，大屏编码分别为 testWsA 与 testWsB，想要使 A 能控制 B。则需：

在大屏 A 中，将「受控端」的值设置为 B 的编码 (testWsB)；
在大屏 B 中，将「控制端」的值设置为 A 的编码 (testWsA)。

如下表所示：

大屏名称	A	B
大屏编码[1]	testWsA	testWsB
角色	控制端，对 B 进行控制	受控端，被 A 控制
服务地址	——[2]	——
控制端	——	填入 testWsA
受控端	填入 testWsB	——

TIP

[1]：大屏编码在创建大屏时设置，可以在大屏设计器右侧属性面板中查看；

[2]：—— 表示不填写。

举例，大屏 A 控制 B 显示当前时间

1. 创建两个大屏 A 和 B；
2. A 中有一个通用标题，用于响应点击事件，通过 WebSocket 发送消息给 B；
3. B 中有一个通用标题，当 WebSocket 收到消息时，更新标题文本内容。

如下图大屏内容分别为：

大屏 A：

大屏 B：

两个大屏的节点编程配置分别为：

大屏 A：

转换器中的代码为：

// 返回的消息会原样发送给接收端
return {
  text: "现在是: ",
  date: new Date(),
};

大屏 B：

转换器中的代码为：

var text = data.text;
// Date 类型会被序列化为字符串，所以需要重新调用 Date 构造函数
var date = new Date(data.date).toLocaleString();

// 返回通用标题所需的格式
return {
  title: text + date,
};

同时预览大屏 A 和 B，点击大屏 A 中的「更新时间」按钮，大屏 B 中的内容将会随之更新，如下图：

使用第三方服务器

使用第三方服务器，不仅可以进行大屏与大屏之间，也可以进行大屏与除平台大屏外的其他控制端之前的消息传递。

若要使用第三方服务器，请将「服务地址」设置为您自己创建的 WebSocket 服务的 URL 地址。
地址请以 ws:// 或 wss:// 开始。

可视化平台将会把以下内容发送给 WebSocket 服务器：

{
  "config": {
    "key": "自动生成的 key",
    "name": "所填写的消息名称，节点编程中主要依靠此值来分辨不同的消息"
  },
  "messageSourceCode": "发出此条消息的大屏编码",
  "sourceCode": "节点编程中，此 WebSocket 节点所填写的「控制端」编码",
  "targetCode": "节点编程中，此 WebSocket 节点所填写的「受控端」编码",
  "payload": null /* 此 WebSocket 的上游节点所返回的值，可为任意类型 */
}

WebSocket 服务器应发送给大屏的数据结构为：

{
  "config": {
    "name": "消息名称"
  },
  "payload": null /* 消息负载，可为空、可为任意类型，将会原样交给「接收消息」的下游节点处理 */
}