How to create realtime charts using the WebSockets Connector

Sébastien Colas
Sébastien Colas
Senior Technical Trainer
25 min read

Modern-day web applications need to have reactive components that can dynamically change and update in realtime when new data is received. The end consumer expects a web page to automatically update in realtime with new information or real-time updates instead of having to manually refresh the page. One solution to this problem is to implement Javascript polling in the browser. While this is one solution, it's not optimum at scale. However, with WebSockets, developers can implement bi-directional communication on top of the HTTP protocol to create real-time experiences for their applications. It's more efficient in terms of communication and works great at scale.

MuleSoft supports WebSockets out of the box, and there's even a free connector available on Exchange to try out and implement into your projects. In the tutorial below, we will cover how to create a simple WebSockets Mule Application using HTML5 and an open-source charting library called Chart.js. This tutorial will also cover the WebSockets deployment process to CloudHub.

Getting Started

In this tutorial, we will be creating a graph that will update in real-time when a new number is send via an HTTP POST request.

The architecture diagram can be broken up into four parts:

  • The display: an HTML page containing JavaScript that waits for WebSocket message
  • Application part 1: Websockets Manager: accept the connection and multicast messages
  • Application part 2: REST API to multicast the message
  • An external system that can do REST call (for example Advanced Rest Client)
Coding the HTML Page

The HTML page is broken up into two important parts:

If you navigate to the script section in the HTML code, the javascript opens a WebSocket connection when the page is loaded and opens the connection to the URL: ws://localhost:8091/log

Once the connection is created, the application waits for a new message which is defined in the onmessage function. Whenever a new message is received, the chart is updated in real-time for all users that have the page open in their web browser.

Project creation and configuration

The diagram explains the different files and components involved in the Mule Application that will be created.


The first thing to do is to create a configuration file. Create a new config.yaml file in the src/main/resources directory. Our goal is to be able to deploy our application to CloudHub, so there are some naming conventions to respect. The classical HTTP port must have the name http.port and on CloudHub the port must be 8081. Another HTTP listener is needed for the Websockets, it port must have the name ws.port and on CloudHub the port must be set to 8091.

A Mulesoft best practice is to create all the Global Elements in a centralized file. Create a global.xml mule configuration file.

Before configuring elements you have to add the module WebSockets in the Mule Palette.


Your Global Configuration Elements needs to have the the following elements:

  • The Configuration properties to use the config.yaml file
  • The HTTP listener Config for the classical traffic that will use the value of ${http.port}
  • The HTTP listener Config for the Websockets that will use the value of ${ws.port}
  • The WebSockets Config that will use the previously created HTTP listener

Note: In the global elements when you use ${http.port} it references the http.port value into the config.yaml file.


Here in what your XML should look like:

Websockets Flows

Your mule application will be split up into a few flows that your application will need to accept new requests. For the broadcastMessage flow, drag and drop a subflow into your scene in order to drag and drop the WebSocket Broadcast connector into the flow. You can also just navigate further down the page and copy and paste the XML directly into your project instead of manually creating the flows.

mule application flows

Multicast Rest API Flow

Now that you have created your WebSocket Flows, and have configured your Global Configuration Elements, the last step is to create your REST API that will multicast a message to all the WebSocket clients. Copy and paste the XML code below into your Mule Configuration. When you send an HTTP post request, You can now create a very simple flow that listens to requests like http://localhost:8081/multicast?value=10


Make sure that when you send a POST Request to your localhost, you input a value between 0 and 100. You can also add an error handler if you want to handle exceptions.

Testing the Mule Application

Once you have built out your flows, run your project locally and open up multiple browsers on the previously created HTML page. You are now ready to launch a REST request: GET on http://localhost:8081/multicast?value=80

If you send a GET or POST request, all the browser charts will be updated with 80% of success (green).



Deploy the Mule Websocket Application to CloudHub

To deploy your application that contains WebSockets on CloudHub there are some requirements:

  • HTTP Listener for Websocket must listen on
  • Your application must be deployed in VPC
  • A DLB (Dedicated Load Balancer) is mandatory to dispatch WebSocket network traffic

CloudHub VPC

To create a VPC you need the following information:

  • The region in which you want to create your VPC (in the example: EU 1 London)
  • Set the VPC as Default
  • The CIDR Block (for example:
  • The Mulesoft runtime environment (in the example: Sandbox)
  • Because the application is using the port 8091 for WebSockets you don’t need to modify the firewall Rules
  • You don’t need to configure the Internal DNS because you will use MuleSoft worker DNS names

CloudHub DLB

You are now able to create a Dedicated Load Balancer (DLB) attached to your previously created VPC. In order to create it, you need to generate a certificate (it can also be a self-sign certificate).


By default the CloudHub DLB is configured to only listen on HTTPS and WSS. To enable HTTP and WS for our Mule Application do not forget to set to “on” the “Inbound HTTP Mode”.


Deploy the application

Now you can deploy your application. Select the region you created your VPC (in the example: EU 1 London).

runtime manager

Configure the DLB for the WebSocket incoming traffic

On the Dedicated Load Balancer (DLB) you need to add a rule to route the traffic to the WebSocket application:

  • Input Path: /log
  • Target App: web-socket-demo
  • Output Path: /log
  • Protocol: ws

Modify the HTML page

The last thing to do is to update the HTML page with the URL of DLB. You have to replace:

var ws = new WebSocket("ws://localhost:8091/log");


var ws = new WebSocket("ws://");

Test your application

To finish, do the same as before but now the URL of the REST API is the one provided by CloudHub: GET

This url will update the chat to Success 20%.


In this article, you learned how to create a simple mule application with the Websockets Connecter and learned how to deploy the application to CloudHub. You can test the application running on CloudHub by visiting:

You can download the source code by clicking here. Clone the repo and follow the tutorial found here. If you want to learn more about CloudHub and Mule Development you can follow the courses:

Please rate this tutorial below and visit the developer tutorials website for more step by step tutorials

Try Anypoint Platform for free

Start free trial

Already have an account? Sign in.

Related tutorials