Overview

Skill Level: Intermediate

Developers and Architects

This article is in continuation to previous two articles - Message Hub Data Ingestion Pattern – Pull and Simulating Batch Data Ingestion With Message Hub and discusses Implementation of message hub subscriber to render live on client application.

Ingredients

DataIngest application must be Installed in prior with binding to Message Hub Instance. This article completes the data Ingestion pattern discussed in article Message Hub Data Ingestion Pattern - Pull

Step-by-step

  1. Introduction

    In this article we will see how one can use Web Sockets to capture data from Message Hub and share it with client application which in our case is a browser based applications. This article is an extension to previous two articles – Message Hub Data Ingestion Pattern – Pull and Simulating Batch Data Ingestion With Message Hub where first article discussed a design pattern for application which pulls data from data sources and send it to Interested consumers and the second discussed multiple ways one can ingest data in message hub and then consumer.

    This article discuss the Java based Web Socket consumer Implementation for Message Hub to publish live data in client which in this case is html.

    Fig1

    This article will also explain generalization of Web Socket consumers properties through Cloudant by storing its run-time properties there.

    Fig2

    Web Sockets

    Web sockets are defined as a two-way communication between the servers and the clients, which mean both the parties communicate and exchange data at the same time. The key points of Web Sockets are true concurrency and optimization of performance, resulting in more responsive and rich web applications.

    The main features of web sockets are as follows –

    • Web socket protocol is being standardized, which means real time communication between web servers and clients is possible with the help of this protocol.
    • Web sockets are transforming to cross platform standard for real time communication between a client and the server.
    • This standard enables new kind of the applications. Businesses for real time web application can speed up with the help of this technology.
    • The biggest advantage of Web Socket is it provides a two-way communication (full duplex) over a single TCP connection.

    WebSocket URL Syntax

    Fig3

    Note:  When in secured environment (SSL enabled) use wss:// instead of ws://

  2. Message Hub Web Socket Consumer Application Architecture

    Fig4

    1. The message hub web socket consumer application is comprised of call back methods such as Open, OnMessage, error and closedConnection respectively.
    2. Open method is called when the first request from Web Socket consumer hits the application URL end point. The end point url is created automatically through @ServerEndpoint annotation. This method creates a unique session for the client and stores it in internal data structure for further reference.Fig5
    3. The Open method is Implemented to pull in the client Information from Cloudant database as mentioned in Figure 2. The Information is comprise of apiKey, broker url and topic of message hub apart from other useful Information.

         Fig6

          4. The session Information along with Message Hub is passed to consumer thread which uses this Information from   respective topic and passes it to correct client using the client session passed to it by Web Socket server. 

  3. Web Socket Consumer Implementation

     Create a database in Cloudant and enter consumer properties data required by message hub consumer as a json document. Click on API option as mentioned below and copy the URL.

    Fig7

     

    Make sure to select Include Docs option to let document data come in JSON to consumer application.

    Read the JSON document in Consumer application using the URL that we have copied from Cloudant with the help of http client code. In current article java.net.URL is been used.

    Fig8

    The Document received is then processed to create properties object which is then further used to create Kafka consumer.

    Fig9

    Fig10

    Note: Make sure that the credentials should be of the service binded to Data Ingest application as mentioned in second article.

    Fig11

    This will make web socket application pull the data from topics of binded message hub application.

     

    Fig12

     

    Hardcode username and password of binded message hub application in server.xml file of Liberty application server on which Web Socket application is deployed and tested.

     

     

    Fig13

    Make sure to have deferServletLoad=”false” property in server.xml else WebSocket won’t work.

  4. WebSocket Client Implementation

    The web socket client will point to web socket server application through URL and will replace the data id with the real time data it receives from server.

    Note: Change localhost to hostname of WebSocket application deployed on Bluemix.

     

    Fig14

  5. Application Deployment from Scratch

    Upload the DataIngest first followed by WebSocket application on Bluemix. Bind DataIngest application to Message Hub service. Copy username and password of binded Message Hub Service and copy them in server.xml of liberty sever of Web Socket application.

    Fig15

    Modify Web Socket URL in Client application with that of bluemix.

    Fig16

    Trigger DataIngest application and observer results in browser.

     

    Fig17

    The data will keep on changing. The vanilla output could be beautified using JS widgets.

  6. References

    a) Data Ingestion Service: https://developer.ibm.com/recipes/tutorials/simulating-batch-data-ingestion-with-message-hub/

    b) Web Socket Subscriber: https://github.com/sharadc2001/MessageHubWebSockets

    c) NodeJS Web Socket Client: https://github.com/sharadc2001/WebSocketNodeJSClient

    d) https://www.tutorialspoint.com/websockets/websockets_quick_guide.htm

     

Join The Discussion