node-red 可视化探索

• node-red的基础使用不讲了，百度有较多资料，跟着官网也可以写个简单的自定义组件
• 这里主要讲的是如何将复杂的组件输出成一个 独立的html页面并于vue框架结合形成一个友好的频繁交互页面
• 第一：创建一个”config“类型的配置项，从而创建一个websocket长连接，进行频繁的数据交换
• 第二：创建一个html文件，引入vue，写一个漂亮一些的可视化页面
• 第三：创建一个组件，提供一些node服务，并关联上你写的websocket服务，启动你的html页面

配置socket

选择配置

流程

产生url

• ui文件夹是组件加入后需要公开的文件
• mycom 是自定义组件
• socket 是长链接配置
• 下面上代码

my-com.js

module.exports = function (RED) {
    "use strict";
    const path = require('path');
    const express = require('express');
    const { networkInterfaces } = RED.require('os');

    function myCom(config) {
        RED.nodes.createNode(this, config);
        const node = this;
        const socket = RED.nodes.getNode(config.socket);
        // 提供一些node能力 比如检测IPv4网口
        function getWorks() {
            const nif = networkInterfaces();
            const works = [];
            Object.keys(nif).forEach(i => {
                nif[i].forEach(j => {
                    j.family == 'IPv4' && works.push({ ...j, name: `${i} ( ${j.address} )` })
                })
            })
            return works;
        }
        node.getWorks = getWorks;
        node.on('input', ({ topic }) => {
            const order = `http://127.0.0.1:1880/ui.html?id=${config.id}&port=${socket.port}`; // 发布之后的url
            if (socket.statusText == 'start') { // socket已启动