Enrich your chat app with live weather data using PubNub BLOCKS and IBM Bluemix

Share this post:

Have you ever felt the need for decorating the chat messages with additional information that could be relevant for the people using your chat app? In this blog post, we show you how to achieve this with minimum fuss and zero infrastructure overhead.

If you are thinking of building a chat application the old school way, then your priority would be to set up the server infrastructure. All chat messages get intercepted by the server and then forwarded to the chat clients. And if there is a need to mashup additional information with the chat messages, then the server is also responsible for this orchestration. If this is the way you are thinking of building your chat app, then it is time to adopt the serverless paradigm.

Welcome to PubNub BLOCKS, a serverless way of programming your apps with one click deployment. BLOCKS lets you put computation into the network with each block responding to events and performing actions.

Weather Enabled Chat

Imagine you are an air traffic control (ATC) operator sitting at the ATC control tower of a busy airport. Your job is to coordinate with nearby airports/ATCs within the region for handing over and taking over the outgoing and incoming flights.  Let’s assume that you have a chat interface through which you are in constant touch with your counterparts in the other ATC towers. Since the weather has a high influence on air traffic operations, wouldn’t it make perfect sense if all the ATC operators are aware of their neighbor’s weather conditions?

Overview of ATC Chat App

If this concept sounds interesting to you, then let’s dive deeper and build this ‘ATC Chat’ app.  This requires fetching of weather information and mashing it with chat data that is forwarded to all chat client UIs.  And, most importantly, we are going to achieve this without any server infrastructure overhead by using PubNub BLOCKS.

We are going to keep it simple. A basic chat app to facilitate coordination between four regional ATC locations along the Pacific Northwest: Anchorage, Vancouver, Seattle and Portland.Screen shot of the ATC map
And once the ATC operator enters his name and selects his location, he can enter the chat room.Screen shot of ATC chat app

Chat Message Orchestration

If you have used PubNub before, then building a serverless chat app will be a no-brainer for you. Check out the resources on the PubNub blog on how to build chat apps powered by the PubNub data stream network.

Orchestration of third party data with chat messages can pose some challenges because it involves additional computation and processing. This is where PubNub BLOCKS can come in handy. A PubNub BLOCK is a standalone computing entity that can sit in between the data stream and execute a small piece of code. In our case, this computation follows three simple steps:

  1. Intercept incoming chat messages from an ATC user.
  2. Get the ATC location and fetch the current weather information for that location using the Bluemix Weather Company API.
  3. Combine the weather information with the chat message and send it out to all ATC users.PubNub weather app diagram

PubNub works on the principle of data streams which are represented by channels. A channel is a real-time, bi-directional pipe between multiple end points on the Internet for exchanging data in a secure and reliable way.

There are two PubNub data stream channels involved in this interaction between the chat web UI and BLOCKs. Channel ‘chat_send’ is used to send the messages upstream from the chat web UI to BLOCKS and channel ‘chat_receive’ is used to send the messages downstream from BLOCKS to the chat web UI.

The Weather Company API is available as part of the IBM Bluemix catalog of services. Check out the documentation to know how to get started with this service. For this app, we are going to use the REST API to fetch current weather conditions for the four ATC locations.

ATC Chat Project Source

The complete source code of ATC-Chat app is available under GitHub. There are two parts to the project sources:

  1. Chat Web UI (app) – Web based UI for the chat client.
  2. BLOCKS code (blocks) –  This is the Node.JS business logic running under PubNub BLOCKs that combines the weather information with chat messages.

Refer the accompanying README file for instructions on how to setup Bluemix Weather Company service and BLOCKs for this application. You can login from more than one chat window to test run the app and get a feel of it.Map of four regional ATC locations

To try this app, you will need to create a Bluemix and PubNub account. Visit the IBM Bluemix registration page and PubNub add-on page to create your respective accounts. Both of the services offer a free tier account to play around with their offerings.

ATC Chat User Operations

The operations of ATC-Chat is split into three stages based on the actions taken by the user.

  1. ATC User joins the chat room
    When a new ATC user joins the chat room, the chat web UI sends a join command to the BLOCKS.






    This triggers a weather lookup in the BLOCKS handler for the first time. Subsequently, BLOCKS stores the weather information in its internal key value store and sends the same JOIN command downstream so that all the chat UI instances get a notification about the new user joining the chat room.

    The weather information is refreshed periodically (every 15 mins) in the BLOCKS logic and this is triggered with message command as explained below.

  2. ATC User sends a chat messageWhen a ATC user sends out a chat message, it is transmitted upstream to BLOCKS as message command.





    "userMessage":”PanAm 113 just took off, handing over to Anchorage”


    BLOCKS retrieves the location of the ATC user from the incoming message. It then retrieves the weather information of that location from its key value store, augments this data to the json message and then sends it downstream.





    "userMessage":”PanAm 113 just took off, handing over to Anchorage”,



    Upon receiving the downstream message the chat UI updates the chat window with the received chat message and displays a icon to indicate the state of weather received in the message.Screen shot of ATC chat example

  3. ATC User leaves the chat roomWhen an ATC user leaves the chat room, the chat web UI sends a leave command to the BLOCKS.






    BLOCKS forwards this command as-is on the downstream channel. All chat web UIs update their display to remove the user from the screen.

Over to You

Now it’s your turn to try this application. Go ahead and clone the GitHub repository, set up the Bluemix and PubNub BLOCKS service. Now you’re all set!

If you have a similar need which could be applied to your use case then please share your views in the comments below. We will be glad to hear about how you are planning to use PubNub BLOCKS with Bluemix services in your applications. Stay tuned for more on Bluemix and PubNub showcases here on the Bluemix blog!

More How-tos stories
May 1, 2019

Two Tutorials: Plan, Create, and Update Deployment Environments with Terraform

Multiple environments are pretty common in a project when building a solution. They support the different phases of the development cycle and the slight differences between the environments, like capacity, networking, credentials, and log verbosity. These two tutorials will show you how to manage the environments with Terraform.

Continue reading

April 29, 2019

Transforming Customer Experiences with AI Services (Part 1)

This is an experience from a recent customer engagement on transcribing customer conversations using IBM Watson AI services.

Continue reading

April 26, 2019

Analyze Logs and Monitor the Health of a Kubernetes Application with LogDNA and Sysdig

This post is an excerpt from a tutorial that shows how the IBM Log Analysis with LogDNA service can be used to configure and access logs of a Kubernetes application that is deployed on IBM Cloud.

Continue reading