Unlock Real-Time Data Updates in OutSystems: A Quick How-To Using WebSocket Connections
Welcome to our quick tutorial on achieving real-time data updates using WebSocket connections in the OutSystems Platform. This concise guide walks you through connecting to a Streaming Service that uses WebSockets to push live data. So, let's dive in and learn how to harness the power of real-time data updates in OutSystems effortlessly!
But first, let’s start with defining some basic concepts.
What is a WebSocket?
A WebSocket is a standard bidirectional TCP (Transmission Control Protocol) socket between a client and the server.
The Transmission Control Protocol is a standard for exchanging data between different devices in a computer network. TCP organizes data to be transmitted between a server and a client. It guarantees the integrity of the data being communicated over a network. Before it transmits data, TCP establishes a connection between a source and its destination, ensuring it remains alive until communication begins.
Image 1 – Establishing a connection
The socket starts out as an HTTP connection and then "Upgrades" to a TCP socket after an HTTP handshake. After the handshake, a persistent tunnel opens so that either side can send data.
WebSockets in OutSystems
OutSystems provides the needed extensibility to support WebSockets, allowing developers to leverage real-time capabilities in their applications.
Using Websockets in OutSystems, developers can create interactive and collaborative applications to push data updates to connected clients in real time. This can be useful for scenarios like live chat, real-time dashboards, collaborative editing, and notifications.
On the OutSystems Forge, we can find WebSocket-related components such as:
WebSocket Connector: This component provides a way to establish WebSocket connections and handle events in OutSystems applications.
Real-Time Dashboard: You can build real-time dashboards using WebSockets to display live data updates.
Chat Applications: Several components on Forge provide chat functionality using WebSockets. These components allow you to build real-time chat applications easily.
Use Case
In this use case, we will use an API that returns the price value of Euro/Dollar exchange rates as it changes throughout the day.
To get it, we need to provide the address for the server we want to connect with, the authentication key, and the specific topic we wish to subscribe to. This information is available on the documentation page of the service we are requesting (docs.tradingeconomics.com).
#1—Setting Up The Connection To The WebSocket Server
Firstly, we’ll add a web block to hold the input fields that will receive the data needed for the connection.
Image 2 – Web block with input fields
Next, on the “OpenConnection” action linked to the “Connect” button, we will have a javascript using the WebSocket library available out-of-the-box on the OutSystems Platform to listen for data events, subscribing to a specific topic to get a response from the server.
Image 3 – OpenConnection Action
Image 4 – Javascript using the OutSysms’ WebSocket library
#2—Getting A Response From The WebSocket Server
Upon creating the WebSocket object, we subscribe to its "onmessage" event calling the "OnDataReceived" client action each time it is triggered.
Image 5 – Calling OnDataReceived
#3—Showing Data On The Screen
Finally, an event is triggered, and the handler on the screen will update the data accordingly.
This handler will deserialize the response and make the changes and validations needed to present the response properly on the screen.
Image 6 – Showing data on the screen
Image 7 – Message handler action
Video – Take a look at the page updating the data in real time
This article explores how to quickly implement WebSocket connections for real-time data updates within the OutSystems Platform. By following the steps outlined in this tutorial, you can seamlessly integrate live data streaming into your applications, opening up a world of possibilities for dynamic and responsive user experiences.
If you want to read more about WebSockets and the OutSystems Platform, here is a list of some of the great resources:
Like this article? Share it:
