Node Red 有一个 UiBuilder，但我想从另一个应用程序监听它，使用 socket.io-client，无法建立连接

Question

我的客户希望让 OP 工程师运行 Node Red 一侧，但所有操作支持人员都将使用单页应用程序（并且永远不会接触 Node Red），所以我的一部分想法是，使用一个示例 uibuilder 页面将创建一个套接字，但如果我有一个 Angular 应用程序存在并且该套接字也存在，我就可以获得我需要的所有数据，而无需将代码拼凑在一起。随着他们不断扩展用例，UI 构建器正在从简单的屏幕组件切换到 1 个端点中的列表、表单、加载器等，具有层、大量内联类，并且没有组织。

我有一个用于 NodeRed 的示例 UiBuilder，名为“launch”，在处理某些示例时，它有一个我可以监听的套接字。我认为如果我可以创建一个不同的应用程序，它也监听这个套接字，那将会很有用。对于收到的每条消息，如果列表中不存在，它会将其添加到列表中，然后我们将从那里开始用户故事。

我想通过我创建的服务在 Angular 应用程序中实现套接字。我使用在线找到的一些演示创建了一个简单的客户端-服务器关系，但我现在尝试将其链接到现有的 Node Red uibuilder 启动。

我以为这就像更新 URL 或路径一样简单，但这似乎行不通。

这是我正在使用的示例文件：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as io from 'socket.io-client'
import { environment } from 'src/environments/environment';
import * as Rx from 'rxjs/Rx';
export class SocketioService {
  private _socket;
  constructor(){}
  setupSocketConnection(){ 
    this._socket = io.connect(environment.SOCKET_ENDPOINT);
    let observable = new Observable( observer => {
      this.socket.on('msg', (data:string) => {
        console.log("INFO DUMP", data);
        observer.next(data)
      })
      return () => { this.socket.disconnect(); }
    })
    
    let observer = {
      next: (data: Object) => {
        console.log("In Emit.")
        this.socket.emit('msg', JSON.stringify(data));
      }
    }
    return Rx.Subject.create(observer, observable);
  }
}

我的环境变量是：

https://localhost:1800/uibuilder/vendor/socket.io/

，因为当查找对我创建的示例/启动的网络请求时，它看起来像是在引用此处。

这是我正在使用的演示。 https://tutorialedge.net/typescript/angular/angular-socket-io-tutorial/ 使用 angular8 创建一些东西。

我还注意到的另一件事是，IntelliSense 似乎不喜欢我的行实现：

this._socket = io.connect(...);

说“无法在环境上下文中声明访问器”。具体来说：“类型‘typeof import(.....node_modules/socket.io-client/build/index’”上不存在属性‘connect’”

我在想可能需要进行某种握手来验证套接字，但似乎永远不会走到这一步。

个人资料：

• 角8
• 套餐：
• rxjs
• rsjx 兼容
• socket.io
• socket.io-客户端
• @types/socket.io-client

我在这里的真正目的只是查看示例套接字控制台转储，因此没有真正的前端，只是在 :4200 上运行的默认 Angular 应用程序。

我认为应用程序本身不会在 uibuilder 文件夹下工作，而只是部署在其他地方并建立此连接。

Answer 1

您可以使用 uibuilder 创建 Angular SPA。

uibuilder 将扩展 Node-RED Web 服务来为您的 SPA 和您选择安装的任何其他前端库提供服务。

此外，它还在 Node-RED 和您的 SPA 之间创建 Websocket 连接。

因此您不需要任何其他外部 Web 或 Websocket 资源，uibuilder 会为您管理所有这些。

---

话虽如此，如果您确实需要的话，可以从不同的网络服务器运行 uibuilder 前端应用程序。它没有经过特别充分的测试，并且确实需要您手动添加一些配置。在这种情况下，uibuilder 仍然会创建 websocket 连接并为您管理它。