Build a real-time chat app with Node-RED in 5 minutes

08 August 2014
PDF (752 KB)
Share:

Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you quickly build and deploy your next mobile or web application.

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.

We'll show you how to build a real-time chat application on Node-RED using Bluemix in just a few minutes.

On IBM Bluemix 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 Bluemix.

What you'll need

 
  • A Bluemix account
  • Basic knowledge of HTML, CSS, and JavaScript. We provide all the necessary code, but a basic understanding of these technologies will help you understand the details.

Step 1. Create your Node-RED application

 
  1. Log in to your Bluemix account and create a new Node-RED boilerplate.

    Click to see larger image

  2. Give your application a name and click CREATE.Give your Node-RED app a name

    Click to see larger image

  3. On the Bluemix dashboard, navigate to the URL provided for your newly created application to launch Node-RED's main page.Node-RED URL on Bluemix
  4. Now click Go to your Node-RED flow editor to open the flow editor.Node-RED's main page

    Click to see larger image

  5. You should see a blank sheet where you can start building your app. When using Node-RED we build our apps using this graphical editor interface to wire together the blocks we need. We can simply drag and drop the blocks from the left menu into the workspace in the centre of the screen and connect them to create a new flow.New empty sheet on Node-RED

    Click to see larger image

Step 2. 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.

  1. Access the project repository on IBM DevOps Services and open the nodechat.json file.
  2. Copy the entire file's content, then go back to Node-RED in your browser.
  3. Click on the menu button in the top right corner and select Import from… > Clipboard…
    Import menu on Node-RED
  4. Paste the file's content that you copied from the repository and click Ok.Area to paste code to be imported
  5. Click somewhere on the blank sheet to add the nodes that were imported.
    Importing an app in Node-RED

    Click to see larger image

We will explain what each piece does later on this article, but now it's time to deploy and run your application.

Step 3. Deploy and run application

 
  1. Click the red Deploy button next to the menu button to make your application live.
    Deploy button on Node-RED
  2. 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.
    Success message
  3. 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.
    Running our chat app

    Click to see larger image

  4. 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.
    Sending a message using our chat

    Click to see larger image

  5. Open the chat in a second window or send the link to some friends and have fun. You should receive the messages instantaneously.
    Real-time conversation with multiple users

    Click to see larger image

Step 4. 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.

  1. In the first section, we have three nodes:
    • WebSocket in
    • Function
    • WebSocket out
    First flow of the application

    These are the blocks responsible for creating the communication channel and processing the messages in real-time using the WebSocket protocol. The Function block is very simple. It only removes the value for _session from the msg object so that the message is broadcast to all clients connected to the WebSocket.

    Code to broadcast message
  2. The second flow is responsible for the client-side code. It has an HTTP in node, a Template to render an HTML page, and an HTTP out node for response. Second flow in thr application

    The HTTP in node ([get] /chat) creates an endpoint to receive GET requests and forwards those requests to the Template. The HTTP out node creates the proper response to be sent back to the user after the template has been rendered.

  3. The template can be broken into three parts: page structure, message handling, and visual.
  4. The page structure is a simple HTML page that contains a div that will receive all the chat messages, and a footer that holds the fields for sending messages. HTML structure of the app
  5. Message handling is done using JavaScript. First, we open a connection to the WebSocket endpoint we created using Node-RED.
    Openning a WebSocket connection

    Next, we register event handlers for the ws object to handle events such as opening and closing connections with the server and receiving new messages.

    Registering event handlers
  6. When the user sends a message we create an object with the username and the message, which is sent to the server using the send method in our ws object. Code to send a new message
  7. The visual part is done with some simple CSS rules that are not covered in this article.

Conclusion

 

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 Bluemix 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.

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing
ArticleID=979786
ArticleTitle=Build a real-time chat app with Node-RED in 5 minutes
publish-date=08082014