Injecting Realtime Live Weather Data into a Chat App

How to deliver up-to-the-second forecasts upon request directly into a messaging app, no additional servers required

Chat isn’t simply sending and receiving messages anymore. We’re sprinkling feature after feature, taking chat apps from simple communication to robust information delivery. Think Slack. There’s integrations for product teams and giving tacos. Really, there’s an infinite amount of use cases.

In this tutorial, we’ll walk you through implementing third party web services, specifically weather data, into a chat app. And we’ll achieve this with minimum fuss and zero infrastructure overhead.

Take Me to the Code

The source code is available in the GitHub Repository

Going Serverless

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.

And once the ATC operator enters his name and selects his location, he can enter the chat room.

Chat Message Orchestration

If you have used PubNub before, then building a serverless chat app will be a no-brainer for you. If you haven’t, we have a great getting started guide for building a chat application using AngularJS.

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

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.

{"command":"join","user":”john”,"ATClocation":”seattle”}

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 message

When an ATC user sends out a chat message, it is transmitted upstream to BLOCKS as message command.

{"command":"message","user":”Peter”,"ATClocation":”portland”,"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.

{"command":"message","user":”Peter”,"ATClocation":”portland”,"userMessage":”PanAm 113 just took off, handing over to Anchorage”,”weatherStatus”:”Cloudy”} yh

Upon receiving the downstream message the chat UI updates the chat window with the received chat message and displays am icon to indicate the state of weather received in the message.

3. ATC User leaves the chat room

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

{"command":"leave","User":”john”,"ATClocation":”seattle”}

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.

Originally published at www.pubnub.com.