npm 包 node-red-contrib-datakitjs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

本文主要介绍如何在 Node-RED 中使用 node-red-contrib-datakitjs 这个 npm 包，该包可以方便地将数据通过 WebSocket 实时传输到前端页面，为前端数据可视化提供支持。

安装

在 Node-RED 根目录下通过 npm 安装该包：

npm install node-red-contrib-datakitjs

使用

在 Node-RED 中添加 node-red-contrib-datakitjs 节点。
在该节点的设置中，输入 WebSocket 服务的地址和端口号，如 ws://localhost:8080。
将需要传输的数据发送到该节点，可以使用 inject 节点模拟数据输入。数据格式为 JSON，如：
```
{
    "key": "value"
}
```

在前端页面中引入 datakitjs：

<script src="/path/to/datakitjs.js"></script>

在页面中创建一个 DataKit 实例：
```
var datakit = new DataKit();
```
向 DataKit 实例中添加服务器地址和端口号：
```
datakit.addServer('ws://localhost:8080');
```
启动 DataKit 实例：
```
datakit.start();
```
在 DataKit 实例中添加监听器，监听数据的变化：
```
datakit.addListener(function(data) {
    console.log(data);
});
```
当有新数据传输时，页面中的 console 将输出该数据。

示例代码

Node-RED 节点

[{"id":"4d9a77af.0b0a3","type":"inject","z":"f638cf28.ed168","name":"","topic":"","payload":"{\"key\":\"value\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":120,"wires":[["d914f9ef.1f2fc"]]},{"id":"d914f9ef.1f2fc","type":"datakitjs","z":"f638cf28.ed168","name":"","server":"ws://localhost:8080","x":370,"y":120,"wires":[]}]

前端页面

-- -------------------- ---- -------
--------- -----
------
------
    -------------- ---------------
    ------- -------------------------------------
-------
------
    --------
        --- ------- - --- ----------
        -----------------------------------------
        ----------------
        ---------------------------------- -
            ------------------
        ---
    ---------
-------
-------

总结

node-red-contrib-datakitjs 使得数据通过 WebSocket 实时传输到前端变得非常简单，为前端数据可视化提供了很大的便利。使用该包需要了解 Node-RED 和 WebSocket 的相关知识，同时需要掌握一定的前端编程技巧。希望这篇教程对大家有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8ded