前端项目接入node-red实现多端口多实例流程设计

前言

node-red是什么

node-red是基于流式的低代码编程工具，node-red通过node.js实现的基于浏览器的低代码编译器，可以轻松的将节点连接在一起，将硬件设备 ，API 和在线服务连接在一起。示例如下图：

在很多中台系统中，有很多需要去创建流程以及工作流的业务，通过node-red就可以低成本实现。

为什么要实现多实例

拿我们的业务举例子，我们是自建物联网平台，对外会承接很多IOT项目，这些数据，流程，设备会维护在自主平台中，会有不同的业务开发人员去使用到我们的IOT工作台，创建独属于自己项目的流程，所以多端口多实例是很有必要的。

如何实现

我们先了解一下node-red的单实例实现以及本地的安装和部署。以下操作都是拿本地window系统举例子

新建一个文件夹用来存放我们的node-red

选择文件夹打开终端执行npm install --safe node-red安装完成后会生成node-red的代码文件

在node_modules文件夹内查找node-red文件夹，进入ndoe-red的setting.js文件首先我们配置地址信息刚才下载的node-red在哪个文件夹中就在该setting.js中配置在setting.js置顶创建变量

js 复制代码

const home_path = "D:\node-reds\node-red-1880"

在setting中找到flowFile字段，设置一个唯一的json名，本地不需要创建这个文件，但是需要文件名字唯一，因为仅存放当前流程的json文件例如

js 复制代码

flowFile: 'flows1880.json',

设置端口号

js 复制代码

uiPort: process.env.PORT || 1880, // 设置端口号

设置ip地址

js 复制代码

uiHost: "10.96.33.12", // 设置ip地址

修改静态资源地址

js 复制代码

httpStatic:  home_path + '/nol/node-red-static/',

然后进入node_moudules的node-red文件执行setting.js文件 node red.js --settings settings.js 可以显示node-red启动成功

会显示成功的ip地址和端口号，如果想要创建多实例，多端口，就重复步骤不过settings.js文件中flowFile、 uiPort、uiHost必须唯一不然会冲突。修改对应的setting.js文件启动即可进行一机多端口。

前端引入

node-red实例创建好后，进行前端引入，前端采用原始的iframe引入，如果你的服务端框架是express则可以不需要采用先创建node-red实例再引入，本篇讲的是纯前端引入node-red，拿VUE框架举例，我们的业务实现的是，业务人员使用当前页面后，可以接入未使用的端口号去新建自己的实例流程，我们是先创建好多个实例和端口，拿20个举例子，开放一个端口号，则可选择的端口就少一个。我会在前端维护一个NODE_MAP,该map就是记录所有的node-red端口，需要后端部署后给前端提供

iframe实现，直接通过动态把url传给组件进行展示即可

js 复制代码

<template>
  <a-card :body-style="{ paddingBottom: 0, minHeight: '854px' }" :bordered="false">
    <div>
        <iframe :src="iframeUrl" frameborder="0" width="100%" height="850px"></iframe>
    </div>
  </a-card>

  </template>
  import { NODELIST_MAP } from '@/config/nodeList.js';
  export default {
    name: 'SysTenentNodeList',
    data() {
      return {
        iframeUrl: '',
      }
    },
    
    mounted() {
    },
    
    methods: {
    }
  }

通过逻辑把当前的端口号给全局变量iframeUrl即可这样将node-red部署以及接入到前端项目中就结束了

当然在服务器部署不会这么麻烦，可以通过镜像就行，此篇方便只会前端的同学自己部署以及接入前端，后面如果后端同学部署到服务器后，会更简单。