连接WebSocket

在前面的教程中我们已经给大家介绍了API 接口的具体设置，本文主要介绍一下如何连接WebSocket。

WebSocket 是一种允许客户端与服务器之间进行实时双向通信的技术，非常适合用于需要频繁更新的数据展示场景，如实时监控面板、金融数据流等。

1. 选择数据类型

在数据源编辑窗口中，在左侧选择“添加数据”选项卡，然后在右侧点击接口分类中的“WebSocket”按钮：

点击“WebSocket”按钮后会弹出输入“连接 WebSocket”的设置框，此处可以设置 WebSocket 连接的“名称、协议、模式、url”等，如下图所示：

在此处可以修改**WebSocket 连接的名称**，如下图所示：

Socket.io 和 Ws 是两种不同的库，它们都用于实现 WebSocket 功能，但它们的工作原理和提供的功能有所不同，下面简单为大家介绍一下它们的特点。

Socket.IO 是一个功能丰富的库，不仅支持 WebSocket 协议，还兼容其他传输方式如长轮询，确保了广泛的浏览器和环境支持。它使用简单，允许你轻松发送和接收消息，并且可以通过“房间”功能将用户分组管理，还自带自动重连功能，确保连接不会轻易断开。

Ws 是一个轻量级的 WebSocket 库，专注于提供原生的 WebSocket 协议实现，且非常高效。它不依赖其他协议，只支持 WebSocket，适合那些对性能有较高要求并且需要简洁实现的实时数据传输应用。

“主动拉取数据”和“等待推送数据”是两种不同的数据传输模式，它们在实时性、资源利用、网络流量以及应用的架构设计上有着显著的区别。

主动拉取数据是指客户端按照一定的时间间隔或根据需要向服务器请求最新信息的方式。这种方式简单直接，适用于可以容忍轻微延迟的应用场景，比如刷新新闻或天气更新。

等待推送数据则是服务器在有新信息时立即通知客户端的一种机制。这种方式几乎能实现实时更新，确保用户第一时间获取到最新的数据变化。此外，它更高效地利用了资源，只有在真正有新数据时才进行通信，减少了无效的网络请求。

在数据响应中可以选择“实时更新”或“累积更新”，前者会实时同步数据，后者会在累积了一定量的数据变更后，再一次性推送这批数据，大家可以根据具体的需求进行选择，如下图所示：

在此处需要填写 WebSocket 连接的url，根据连接的协议填写相应的格式：http:// 或 **ws:// **，如下图所示：

在下方需要定义表格字段，可以修改“事件名”和“事件参数”，如下图所示：

点击“+添加数据表”，可以新建一个空白数据表，如下图所示：

点击右侧按钮可以删除当前选中的数据表或字段，如下图所示：

设置完成后，可以对数据进行预览，点击“确定”按钮即可完成 WebSocket 数据的连接。

为数据表格组件绑定 WebSocket 数据，效果如下图所示：