MuleSoft Chat: Web and Mule!

MuleSoft is loaded with features. Mule runtime engine (Mule) is a lightweight integration engine that runs Mule applications and supports domains and policies. MuleSoft is well known for getting APIs and integrations done in short time.
I would like to demonstrate how I got a real time chat application working with MuleSoft.
Some components used:

  1. HTTP
  2. Web Socket
  3. Object Store
  4. DataWeave

The end to end app allows users to join a room over android app or web. 😀🙌


WebSocket : two-way interactive communication

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection, i.e both server and client can send messages across the network.
The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

The solution is divided into two parts:

  1. The System API to store data of users and handle room details
  2. The Experience layer in form of a WebSocket Server

High Level Architecture

Object Stores

Object Store Connector is a Mule component that allows for simple key-value storage. Although it can serve a wide variety of use cases, it is mainly design for:

  • Storing synchronization information, such as watermarks.
  • Storing temporal information such as access tokens.
  • Storing user information.

Here, we will use Object Store to save the users joining into Chat rooms.

The Object Store config looks like below:

Experience Layer : Mule Chat App

This application also written in Mule and HTML, CSS, JS allows multiple users to join multiple rooms and start interacting with each other.

WebSocket:
The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.
Unlike the method where client polls for data every time, Websocket allows server to push data to client as and when available.

WebSocket Implementation:

  • WebSocket(WSS) HTTPS Listener: We create a HTTPS Listener with port 8082. This will be used by the WebSockets to communicate over the channel.

WebSocket(WSS) Mule Server: We use Mule, only as the Web Socket Server. The connection is WSS which is a secured Web Socket communication comparable to HTTPS.

The configuration is below:

It's worth noting that I checked only the Server setting to make sure that it acts as WebSocket server.

  • WebSocket(WS) HTML/JS Client: The WebSocket client in this case is the web browser where users comes and logs to join multiple rooms and chat with people.

WebSocket Mule Flow:

  • Initiate Connection: Whenever a user joins a room using Web Client, this flow is triggered and it saves the socket Id of user in Object Store.
  • Route Messages: Mule is well known for routing messages using it's connector, here I route the appropriate messages to users in a room using a Choice Block.
  • Close Connection: When user closes the browser, this flow is called and it removes user from the Object Store.
This pretty much covers the WebSocket implementation.

The Web UI

MuleSoft is well known for hosting APIs and integration but it can also be used to host your UI application and serve it as the frontend.
For the Chat UI, I am using Parse Template.

This is how the UI looks like:

This is how people can talk and exchange messages:

Hope you all liked it! Cheers.

Tirthankar Kundu

Tirthankar Kundu