Links

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

  1. 1.
    Add Refresher plugin to your web-page
  2. 2.
    Create a refresh-scenario (call the plugin from scenario)
Refresher web-plugin (indicate the event_name):
Scenario with the same event_name:
In this case scenario triggers on Changed objects
  • 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. 3.
    Create a user and log in (for example, the user's ID is testUser)
  2. 4.
    Go to WebSocket Page
  3. 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);
})