WebSockets (Socket.IO)
πŸ”” Connect your scenarios and web-app in the real-time

What is WebSocket

The WebSocket API (based on socket.io) is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

How to add WebSockets to your app:

1) Select an app you want to add a WebSocket to
2) Go to the Plugins section and install Socket.io plugin.

Where can you use WebSocket API (Socket.IO)?

  • Refresh the page (e.g. update the content after submitting the form β€” that is an alternative to sync scenarios)
  • Coming soon: user alerting
If you use external front-end (ReactJS for example):
  • Receiving signals about changes in systems and refreshing data instantly
  • Building interactive messengers πŸ’¬
  • Building scenarios with messages for specific users ( alerts, notifications and etc.).

How to use WebSockets in Web-page builder

β€”

How to use WebSockets in React apps

You can find an example template with Socket.IO support in Directual and React JS section.
  1. 1.
    ​Clone the repo​
  2. 3.
    ​Create a user and log in (for example, the user's ID is testUser)
  3. 4.
    Go to WebSocket Page
  4. 5.
    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.
We have 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};
socket.connect();
​
//subscribe to any events
socket.onAny((eventName, args) => {
console.log(`${eventName}: ${JSON.stringify(args)}`);
});
​
//subscribe to only 'message' events
socket.on('message', (msg) => {
console.log(msg);
})
​
Copy link
On this page
What is WebSocket
How to add WebSockets to your app:
Where can you use WebSocket API (Socket.IO)?
How to use WebSockets in Web-page builder
How to use WebSockets in React apps
How to use WebSocket API in any apps