简介
Web 应用程序通常需要从服务器获取数据并实时刷新页面。json-realtime 是一个 npm 包，可让开发人员在 Web 应用程序中直接观察和使用实时 JSON 数据。
json-realtime 底层使用 WebSocket 技术，它会将 JSON 数据发送到客户端，从而使客户端能够实时更新数据。json-realtime 将每个更改推送到客户端，只需轻轻一点触摸即可轻松更新 UI。
安装
您可以在终端中使用以下命令安装 json-realtime：
npm install json-realtime --save
使用
引入模块
var jsonRealtime = require('json-realtime');创建一个服务器
json-realtime 有一个内置的服务器，您只需创建一个实例并指定要连接的数据库即可开始使用。
var server = jsonRealtime.createServer("mongodb://localhost/test");配置并启动服务器
您可以使用选项对象配置服务器的行为。例如，可以配置服务器仅使新连接者接收增量更新。
var options = {
broadcastNewUser: true
};
server.listen(8080, options);监听事件
json-realtime 是事件驱动的。您可以侦听以下事件：
- change：当文档更改时发出事件。参数列表包括文档 ID，更改后的文档和类型（例如插入、更新或删除）。
- connection：当新客户端连接时发送事件。参数列表包括客户端 ID 和客户端的 IP 地址。
- error：当发生错误时发出事件。参数列表包括错误对象。
- ready：当服务器准备好时发出事件。
例如，要在客户端连接时发送消息，请执行以下操作：
server.on('connection', function(clientId, clientAddress) {
console.log('New client connected:', clientId, 'from:', clientAddress);
});使用客户端 API
您可以在客户端上使用以下 API：
var client = jsonRealtime.createClient('ws://localhost:8080', 'my-unique-client-id');- createClient：使用 WebSocket 协议和服务器的 URL 创建新实例。必须提供唯一的客户端ID。
- get：使用文档 ID 获取文档。
- set：使用文档 ID 和一个对象设置文档。
- remove：使用文档 ID 删除文档。
- subscribe：使用文档 ID 订阅文档的更改。
- unsubscribe：取消对文档的更改订阅。
- getList：获取数据库中所有文档的 ID。
例如，要获取名为 "user1" 的文档，请执行以下操作：
client.get("user1", function(data) {
console.log("Data received", data);
});示例代码
以下是一个实际示例，它使用 json-realtime 订阅名为“messages”的文档的更改。每当有新消息时，当前聊天会话将在页面中实时更新。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
-------
------
---- --------------------------
----- ---------------
------ ----------- ----------------
------- ---------------------------
-------
------- --------------------------------------------------------
------- ---------------------------------------------------------------------------------
--------
--- ------ - ------------------------------------------------ ---------------
----- - ----------------
------ - -----------------
---------- - ---------------------
------------ - -----------
-------------------------------
------------------- --------------- ----- ---------- -
-- ------ --- ------------ -- --------- --- --------- -
--- ----- - -----------
-------------------- - -- - - --------------
-------------------------
-
---
------------------ ----------- -
-------------------
--- ------- - -------------
-- ---------------- -
--- ---- - -
----- -----
-------- -------
--
------------------------ ------
---------------
-
---
---------
-------
-------结论
npm 包 json-realtime 是一个非常有用的工具，方便地实现 Web 应用程序中实时数据可视化的功能。我们可以通过创建服务器和客户端，订阅文档的更改来实现实时更新 UI 的效果，并且它的 API 使用方法也非常简单，易于上手。如果您需要构建实时可视化应用程序，json-realtime 可以成为你不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581e81e8991b448d548e