在 5 分钟内使用 Node-RED 构建实时的聊天应用程序

Node-RED 是 IBM Emerging Technology 团队创建的一个新开源工具，它允许您通过组合各部件来编写应用程序。这些部件可以是硬件设备、Web API 或在线服务。

“我们将向您介绍如何使用
Bluemix 在几分钟内在 Node-RED 上构建一个实时的聊天应用程序。”

在 IBM Bluemix 上，新 Node-RED 运行时创建起来很容易。只需点击几下，您就有了一个正常的工作环境，为创建新应用程序做好准备。在本文中，我们将向您介绍如何使用 Bluemix 在几分钟内在 Node-RED 上构建一个实时的聊天应用程序。

先决条件

*一个 Bluemix 帐户

*对 HTML、CSS 和 JavaScript 的基本了解。我们提供了所有必要代码，但对这些技术的基本了解有助于您理解有关的细节。

步骤 1. 创建您的 Node-RED 应用程序

登录到您的 Bluemix 帐户并创建一个新的 Node-RED 样板。


为您的应用程序命名并单击 CREATE。


在 Bluemix 仪表板上，导航到为您新创建的应用程序提供的、用于启动 Node-RED 主页的 URL。


下面单击 Go to your Node-RED flow editor 打开流程编辑器。


您应当看到一个空白表单，您可以从这里开始构建您的应用程序。在使用 Node-RED 时，我们会使用这个图形编辑器界面将所需的代码块连接在一起，用它们来构建我们的应用程序。我们可以将代码块从左侧菜单拖放到屏幕中间的工作区，并连接它们来创建一个新流程。

步骤 2. 导入代码

可以使用 JSON 格式导入和导出每个 Node-RED 应用程序。下面将我们的聊天应用程序导入新表单。

访问 IBM DevOps Services 上的 项目存储库 并打开

nodechat.json

文件。

复制整个文件的内容，然后在浏览器中返回到 Node-RED。

单击右上角的菜单按钮并选择

Import
from…

>

Clipboard…

粘贴您从存储库复制的文件内容并单击 Ok。


单击空白表单上的某处，添加导入的节点。



本文后面我们将解释每一部分的作用，但现在该部署和运行您的应用程序了。

步骤 3. 部署和运行应用程序

单击菜单按钮旁边的红色 Deploy 按钮，让您的应用程序上线。



您应当在顶部看到一条成功消息，节点上的蓝点会消失。这些点表示有节点被更改但尚未部署。



接下来在浏览器中打开一个新标签，转到

http://[app
name].mybluemix.net/chat

，将

[app
name]

改为您提供给应用程序的名称。



现在聊天应用程序运行了。在左侧字段中输入用户名，在右侧框内写一条消息，并按下Send。



在第二个窗口中打开聊天，或者发送链接给一些朋友。您应当会立即收到消息。

步骤 4. 解释代码（可选）

在本节中，我们将更详细地解释应用程序背后的代码。您可以跳过这一节，但我们建议您读完这些内容，以便更好地了解应用程序是如何构建的，并进一步了解 Node-RED 的工作原理。

在第一个部分，我们有三个节点：

WebSocket in

Function

WebSocket out

这些代码块负责创建通信渠道并使用 WebSocket 协议实时处理消息。

Function

块非常简单。它仅从

msg

对象中删除

_session

的值，以便将消息广播给连接到
WebSocket 的所有客户端。



第二个流程负责客户端代码。它有一个

HTTP
in

节点、一个用于渲染 HTML 页面的

Template

和一个用于响应的

HTTP
out

节点。

HTTP in

节点
(

[get] /chat

)
创建一个端点来接收 GET 请求，并将这些请求转发到

Template

。

HTTP
out

节点创建了渲染模板后要发送回给用户的适当响应。

模板可分为三个部分：页面结构、消息处理和可视化。

页面结构是一个简单的 HTML 页面，包含将接收所有聊天消息的一个

div

和保留发送消息所需字段的一个
footer。


消息处理使用 JavaScript 完成。首先，我们使用 Node-RED 打开所创建的 WebSocket 端点连接。



接下来，我们为

ws

对象注册事件处理程序来处理事件，比如打开和关闭服务器连接以及接收新消息。



当用户发送一条消息时，我们创建一个包含用户名和消息的对象，使用

ws

对象中的

send

方法将其发送到服务器。


可视化部分通过本文未涵盖的一些简单 CSS 规则完成。

结束语

Node-RED 提供给我们一组随时可连接在一起并使用的节点，从而简化了开发。如本文中所示，要在 Bluemix 上设置服务器以供项目使用，需要做的工作并不多。您可以添加新节点，并创建新流程来连接到现有的节点，进一步增强这个简单的聊天应用程序。

点击这里，查看原文