Sign in Subscribe
Anypoint Studio

Mule 4'S WEBSOCKET CONNECTOR : IN-DEPTH UNDERSTANDING

vijai

• 5 min read
Mule 4'S WEBSOCKET CONNECTOR : IN-DEPTH UNDERSTANDING

This tutorial will cover how to use Mule 4's Web Socket connector to build a complete client-server application that utilizes the Web socket protocol. Before that we will know what is a web socket.

A Web Socket is a TCP connection that can go bidirectionally between a client and a server. It is opposite to HTTP connection where it goes one way only. It remains open until the application stops it. An app connects to a Web Socket via HTTP in the first time. After that, a TCP socket-based connection is established for the connection.

Integration capabilities of a Web socket connector:

  • Puts server push alerts into practice
  • Provides full-duplex, bidirectional communication between a server and client.
  • Works without any difficulty over an existing HTTP infrastructure
  • Eliminates the need for clients to often check the server for updates

Some scenarios that would be best way to use web socket connector:

Live Chat Applications:

Web Socket connectors are widely employed in live chat applications, enabling instant communication between users and providing a seamless, real-time chatting experience.

Financial Trading Platforms:

In financial trading applications, Web Socket connections are utilized to deliver real-time stock prices, market updates, and trade execution notifications, ensuring timely information for traders.

Collaborative Editing Tools:

 Tools that support collaborative editing, such as Google Docs, use WebSocket connections to enable simultaneous editing by multiple users in real time, ensuring that changes are instantly reflected across all collaborating parties.

Online Gaming:

Web Socket technology is prevalent in online gaming applications, allowing players to interact, exchange game data, and experience real-time updates, contributing to a more immersive gaming environment. 

IoT (Internet of Things) Devices:

Web Socket connections are employed in IoT applications to facilitate communication between devices and servers in real time. This is especially useful for scenarios where immediate data updates or commands are crucial.

Notifications and Alerts:

Applications that push notifications or alerts to users in real time, such as social media updates, news alerts, or email notifications, often use WebSocket connections for instantaneous delivery.

Live Streaming Platforms:

Platforms that provide live streaming of events, webinars, or video content utilize Web Socket connections to deliver a continuous stream of data to viewers in real time.

Dashboard and Monitoring Applications:

Web Socket connectors are valuable in dashboard applications and monitoring tools where real-time updates of metrics, analytics, or system health status are critical for decision-making.

Collaborative Drawing and Whiteboarding Apps:

Applications that enable collaborative drawing or whiteboarding, where multiple users can sketch or annotate together in real time, leverage WebSocket connections for instant synchronization.

Online Auctions:

In online auction platforms, WebSocket connections are used to provide real-time bidding updates, ensuring participants receive immediate information on the status of the auction.

Simple working scenario

Two clients will be made, each of which will subscribe to receive feeds from the server. Since we cannot duplicate the live scenario, the server would relay the feed to the user every 10 seconds.

Two Mulesoft applications will be made.  One for client implementation and one for the server.

We are utilizing insecure web socket (ws) for the tutorial. The underlying http layer must be secured in order to convert it to https for secure web sockets (wss).

Way that application communicates with you

  • The client and server will establish a new socket.
  • The server will respond to the client if the authentication is successful.
  • The client will subscribe to the match feed by sending a subscription message.
  • As soon as the match begins, the server will begin transmitting the stream to every subscribed client.

Create a Server Application

  •  Create a flow for the client's new connection. to accomplish this. To send the request, the client would hit ws://localhost:8081/wsserver/livescore.
  • Utilize the web socket connector "On New Inbound Connection." 
  • As an illustration, if the header given by the client does not satisfy the condition attributes, close the connection using the "Close Socket" websocket connector.
  • Use the "Send" web socket connection to send the client success response.
  • Establish the subscription flow for the live score. Only subscribers would receive the match live score from the server.
  • To receive the message from the client, use the web socket connector labeled "On New Inbound Message." 
  • Store the client-sent Socket ID in the object store. In order to deliver the feed to the consumer later, we would require the socket id.
  •  Create a flow to start the Match score feed. In this example, we're sending static data to all subscribers via their Object store socket IDs.
  • To send a message to a subscriber using their socket ID, use the "Send" web socket connection.
  • After all match score feeds have been provided to clients, close the socket as indicated below and remove all datas from the object store. Close the socket using the "Close Socket" websocket connection while utilizing the socket id.
  • Utilizing the socket id, close the socket using the "Close Socket" websocket connection.

Create a client Application

  •  A client application must be developed and connect to the server to subscribe for the live score, receive the match feeds as soon as the server publishes them.
  • To establish a new connection (socket) with the server using the "Open outbound socket" websocket connector, design the flow as shown below. The socket id is being created and saved in the object store for future use.
  • Create the flow below to send a match subscription request to the server via the "Send" websocket connector.

  • Using the "On New Outbound Message" trigger, create a flow to listen to the match feed given by the server.
  • After that run both the Mulesoft "mulesy-websocket-client" and "mulesy-websocket-server" applications at a same time.

Testing

To activate the Connection, subscription, and match feed, we constructed a Postman collection. Make the following http call for client_name as client5 and client6 to initiate the new server connection.

http://localhost:8081/connect?client_name=client5

http://localhost:8081/connect?client_name=client6

 

To send the subscription request to the server, use the following http call with client_name as client5 and client6.

 

Make http call in postman collection to trigger the feed from server to all clients

Here are the logs to view the feed:

In conclusion, our exploration of Mule 4's WebSocket Connector reveals its pivotal role in orchestrating seamless real-time communication within applications.

Empowering developers with a robust toolset for bidirectional data exchange, this connector transforms traditional integration paradigms. With its ability to handle dynamic workflows, support real-time events, and enhance user experiences, Mule 4's WebSocket Connector emerges as an indispensable asset for modern, responsive, and interactive applications.

Mulecraft Footer