Set up WebSocket for Your ReactJS-app in 5 Minutes!

WebSocket. A common topic among developers learning their way around (just see the number of ELI5s on Reddit for yourself), and a fantastic way to exchange data between a server and a web or a mobile interface. Chats, page-refreshing, event notifications, game consoles, loads of other things — all require a bidirectional and low-latency communication via WebSocket.

A short while ago we made an article on how to set up a backend for React apps in just 15 minutes. Setting up the WebSocket connection is the next step to making an awesome app with live updates within the same framework.

↑ The crux of what WebSocket is famous for

This bite-sized article will dive into what WebSocket really is, why it’s a good idea to use it, and how it works with Directual.

WebSocket, how does it work?

It’s a digital communication protocol (method) used to establish continuous data exchange between a server and a client. 

Compared to the HTTP request/response method, where the connection opens and closes every time a data packet comes in or out, WebSocket can keep it open and exchange it live smoothly and fast.

The thing is, WebSocket is a difficult thing to introduce if you want to do it by hand. You’ll need a server, backend, and a whole load of other things in place to make it all work. 

That’s where no coding comes in!

How to set up WebSocket with Directual in 5 minutes flat

This is going to be a really short section, but it’s really easy to do. Here’s how:

Step 1

Explore what Directual platform is and connect it with your ReactJS-app. Check out this short video to get an idea of how to get around Directual and what you can do:

Have a look at Directual's boilerplate for React JS. You may either connect your existing React-app or build one from scratch.

Step 2

Install the Socket.io plugin on Directual (free of charge, by the way!)

Step 3

Configure the scenario and establish the logic for your WebSocket. Make sure your scenario sends the WebSocket at the right time.

Use the following code in your React app to handle the messages from the scenario. There are two arguments:

Event type

message

UserID

*

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 = ? // get sessionID when authorise a user
var appID = ? // get appID in API section of the Directual platform

//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);
})

Ta-daaaa! Fully synchronized data exchange for your React app, just the way you want it. All it takes is just a couple of easy steps to get started.

And there we go! Enjoy an interactive interface that is automatically updated via your backend! Truly a miracle of science. 

Actually, you can use Directual WebSocket plugin not only for ReactJS, but for any UI-framework, or even for a mobile app!

Afterword

Directual is all about making difficult things easy, and boring things automated. If you’re up for getting your own project off the ground, do give it a try and see how it works! 

Naturally, the platform creators themselves are always there to respond. Send us a message at [email protected]. Thanks for reading!