WebSockets (Socket.IO)

🔔 Connect your scenarios and web-app in real-time

What is WebSocket

The WebSocket API, built on socket.io technology, is an advanced feature that makes it possible to open a two-way interactive communication session between a user's browser and a server. Through this API, you can send messages to the server and receive event-driven responses, all without the need to continuously poll the server for replies.

How to Add WebSockets to Your App:

1) Select the app you want to add a WebSocket to

2) Go to the Plugins section and install the Socket.io plugin.

Where Can You Use WebSocket API (Socket.IO)?

If you use Directual web-page builder:

  • Refresh the page (e.g. update the content after submitting the form — that is an alternative to synchronous scenarios)

  • Coming soon: user alerting

If you use external front-end (e.g., ReactJS):

  • Receive signals about changes in systems and refresh data instantly

  • Build interactive messengers 💬

  • Build scenarios with messages for specific users (alerts, notifications and etc.).

How to Use WebSockets in Web-page Builder

  1. Add the Refresher plugin to your web-page

  2. Create a refresh-scenario (call the plugin from the scenario)

The Refresher web-plugin (indicate the event_name):

Scenario with the same event_name:

  • Message: no need to fill it for Directual web-pages (works for custom front-end)

  • Event name: the same event_name

  • UserID: set * if you want to broadcast the message. set user's ID if you want to send a message to a certain user.

Here is how it works:

How to Use WebSockets in React Apps

You can find an example template with Socket.IO support in Directual and React JS section.

  1. Create a user and log in (for example, the user's ID is testUser)

  2. Go to WebSocket Page

  3. Create a scenario, add Send PUSH-message step (it is a part of Socket.io plugin):

Configuring the step:

  • UserID: set * if you want to broadcast the message. set user's ID if you want to send a message to a certain user (in our case — testUser)

  • Event name: the first parameter of socket event (eventName)

  • Message: the second parameter of socket event (args)

Have a look at the boilerplate, websocket.js:

//subscribe to any events
socket.onAny((eventName, args) => {
        setMessage(<div>{`${eventName}: ${JSON.stringify(args)}`} &nbsp;<code>{(new Date()).toISOString()}</code></div>);

//subscribe to only 'message' events (the 'Event name' parameter)
socket.on('message', (msg) => {
    setMessage(<div>{msg} &nbsp;<code>{(new Date()).toISOString()}</code></div>);

Here is how it works (we send objects to the scenario, the web-page is refreshed without reload):

How to Use WebSocket API in Any Apps

You can use any WebSocket API (Socket.IO) client in any app.

Directual offers a standard endpoint for connection to WebSockets: https://api.directual.com

You can see how to connect and receive messages from the Platform in the code below:

import io from 'socket.io-client';

// autoConnect set to false, 
// because before we must get session_id for auth users
const socket = io('https://api.directual.com', {autoConnect: false})

var sessionID = ? // you'll get sessioID when authorise your user
var appID = ? // you could get appID in API section
//login users process...

socket.auth = {app_id: appID, session_id: sessionID};

//subscribe to any events
socket.onAny((eventName, args) => {
   console.log(`${eventName}: ${JSON.stringify(args)}`);

//subscribe to only 'message' events
socket.on('message', (msg) => {

Last updated