🌐WebSocket

In today's digital era, rapidity and instant access play pivotal roles in determining success. This is precisely why we consider our WebSocket Datasource to be a significant addition. However, what makes it such a game-changer?

• Instant Updates: In contrast to conventional methods that require manual refreshing or polling for new data through APIs, WebSockets facilitate the instantaneous delivery of updates to the browser or application users as soon as they occur. Picture yourself observing a dashboard and witnessing data points, charts, and metrics update in real-time, all without the need for additional API call logic.

• Enhanced Collaboration: WebSockets not only update data but also revolutionize collaboration. With multiple users viewing the same content, any modification made by one user becomes instantly visible to others. This seamless teamwork enables teams to make decisions based on real-time insights. This capability is made possible by the broadcast function we have implemented.

• Reduced Latency: WebSockets significantly minimize the delay between sending a request and receiving a response. This ensures that your applications exhibit a snappier and more responsive behavior, ultimately enhancing the user experience.

• Endless Possibilities: From live chat applications to real-time gaming, tracking, and monitoring systems, the applications of WebSockets are extensive. With our WebSocket Datasource, you're not merely staying updated; you're unlocking a realm of real-time possibilities for your applications.

Using a WebSocket as Datasource

Begin by opting for "Stream Query" as a new query option from the list of available data sources.

Connect to a WebSocket Server

Input the WebSocket Server address as the URL, starting with ws:// for unsecured connections and wss:// for SSL secured connections. Upon running this query, QuickDEV will attempt to establish a connection to the WebSocket Server. If successful, WebSocket connections exhibit the unique characteristic of remaining active and open until you disconnect the Dataquery/QuickDEV App.

Broadcast and Receive messages

Now the connection is made and depending on the channel you may already receive data. Quite often it is however the case, that a Client needs to subscribe to a certain topic or room. To do so, but also simply to broadcast a message into the connection, you can use the new function broadcast(); This is a function of the WebSocket Datasource / Stream Query.

Below is a JavaScript example that triggers as soon as the Stream Query successfully connects to the WebSocket Server and begins listening on the channel:

Processing incoming Messages

Now, we have the capability to link incoming messages and activate the "onSuccess" function of the Stream Query to a dynamic variable. This serves as an example, and you might choose to integrate it in a different manner based on your specific requirements.

Utilizing the Success trigger of the Stream Query, we establish a Dynamic variable with the corresponding value. In the specific scenario of Kraken Websocket, we aim to bypass all "heartbeat messages", thus we solely set the Dynamic variable if there is payload data present in the current message.

Collecting Messages

In your application scenario, it could prove beneficial to gather messages, perhaps to display a sliding window chart like the OHLC diagram in our example. To achieve this, you could create an array, making it accessible throughout the entire application.

Now, you can associate a JavaScript processing function with each incoming message using the "Success" trigger of the Stream Query and link your chart to this data array.

// we take the string value of the Websocket Message and build an Array
const rawTickerData = currentTickerData.value.split(',');
// based on the array we can extract now the data we want and formulate an JSON Object
const cleanTickerData = {
  "time" : new Date(rawTickerData[0].substr(0,10) * 1000).toISOString().substr(11, 8),
  "duration" : new Date(rawTickerData[1].substr(0,10) * 1000).toISOString().substr(11, 8),
  "open" : rawTickerData[2],
  "high" : rawTickerData[3],
  "low" : rawTickerData[4],
  "close" : rawTickerData[5],
  "weighted_volume" : rawTickerData[6],
  "accumulated_volume" : rawTickerData[7],
  "trades" : rawTickerData[8]
}
// we push the new Object into the array, krakenStockTickerData
window.krakenStockTickerData.push(cleanTickerData);
// and we make sure that old data is deleted, so the array won't get too big
while (window.krakenStockTickerData.length > 30) {
  window.krakenStockTickerData.shift();
}
// Here we set a value in a dynamic variable, so the eCharts would update their visualization
// (the binding to the array on the window-object does not release a trigger for eCharts to re-render)
clockTickerData.setValue(cleanTickerData.time);