Build a real-time chat app with Node-RED in 5 minutes
Learn how to build a real-time chat application quickly by simply dragging and dropping components and wiring them together
Node-RED is a new open-source tool created by the IBM Emerging Technology team that lets you build applications by simply wiring pieces together. These pieces can be hardware devices, web APIs, or online services.
On IBM Cloud it’s easy to create a new Node-RED runtime. With just a few clicks you have a working environment, ready for you to create your new application. In this article, we’ll show you how to build—in just a few minutes—a real-time chat application on Node-RED using IBM Cloud.
What you’ll need
- An IBM Cloud account
Create your Node-RED application
Follow the steps in this tutorial, “Create a Node-RED starter application.”
Import the code
Every Node-RED application can be imported and exported using the JSON format. So let’s import our chat app into the new sheet.
- Access the project repository and open the
- Copy the entire file’s content, then go back to Node-RED in your browser.
- Click on the menu button in the top right corner and select
Import from…> Clipboard…
- Paste the file’s content that you copied from the repository and click Import.
- Click somewhere on the blank sheet to add the nodes that were imported.
We will explain what each piece does later on in this article, but now it’s time to deploy and run your application.
Deploy and run application
- Click the red Deploy button next to the menu button to make your application live.
- You should see a success message appear on the top, and the blue dots on the nodes will disappear. These dots indicate when a node has been changed but not yet deployed.
- Now open a new tab on your browser and go to
http://[app name].mybluemix.net/chat, changing
[app name]to the name you gave your application.
- You now have your chat application running. Enter a username in the field on the left, write a message on the box on the right, and press Send.
- Open the chat in a second window or send the link to some friends and have fun. You should receive the messages instantaneously.
Explaining the code (optional)
In this section, we explain the code behind our application in more detail. You can skip this section, but we recommend you read through it to better understand how the app is built and to learn more about how Node-RED works.
- In the first section, we have three nodes:
WebSocket outThese are the blocks responsible for creating the communication channel and processing the messages in real-time using the WebSocket protocol. The
Functionblock is very simple. It only removes the value for
msgobject so that the message is broadcast to all clients connected to the WebSocket.
- The second flow is responsible for the client-side code. It has an
HTTP innode, a
Templateto render an HTML page, and an
HTTP outnode for response. The
HTTP innode (
[get] /chat) creates an endpoint to receive GET requests and forwards those requests to the
HTTP outnode creates the proper response to be sent back to the user after the template has been rendered.
- The template can be broken into three parts: page structure, message handling, and visual.
- The page structure is a simple HTML page that contains a
divthat will receive all the chat messages, and a footer that holds the fields for sending messages.
Next, we register event handlers for the
wsobject to handle events such as opening and closing connections with the server and receiving new messages.
- When the user sends a message we create an object with the username and the message, which is sent to the server using the
sendmethod in our
- The visual part is done with some simple CSS rules that are not covered in this article.
Node-RED simplifies code development by providing us with a set of nodes ready to be wired together and used. As shown in this article, it takes very little work to have a server set up on IBM Cloud to use in your projects. You can enhance this simple chat application even more by adding new nodes and creating new flows to connect to the existing ones.