Using WebSocket to Send and Receive Data in React Apps

Technology has improved the quality of our lives. We may state that real-time communication is one of the good reasons for that. Our world has changed as a result, allowing us to communicate with anyone, anytime we choose. Real-time communication’s development led to the emergence of an entire category of new businesses.

All communication is done in real time. For instance, whenever we use a chat or video conferencing tool. It gives the interaction the appearance of being in-person, as if the other person were seated next to us.

It is now an essential component of some contemporary apps. Users want to be able to interact with other users instantly, without worrying about sending or waiting for a response. Users must be able to synchronize properly in order for real-time communication to occur.

Real-time communication and the process of creating real-time apps are mostly dependent on WebSocket. It is a very potent technology that enables us to create programs with real-time capabilities.

Let’s learn more about WebSockets and their operation.

How WebSocket Works

Full-duplex or two-way communication between a client (such a browser) and a server is supported via the WebSocket protocol. Over a single TCP connection, full-duplex communication channels are offered.

Because WebSockets may deliver a limitless quantity of data without the requirement for polling, they are a superior alternative to HTTP request/response connections.

Client and server are connected until one of the parties cuts the connection off. The connection will immediately break if one side disconnects, preventing the other side from communicating.

WebSockets in React Apps

There isn’t a set technique to use WebSocket in React applications, I should note before we begin with this example. Although each developer can implement it in their own unique way, ultimately we want to achieve a dependable, organized, and simple method of doing so.

Using a library is one of the best approaches to implement WebSockets in React. We want to reduce resistance so that we can adopt right away. You don’t want to spend hours, days, or even weeks building your own library for that most of the time.

React-use-websocket is a reliable library that enables reliable WebSocket integrations. For creating WebSocket integrations, this package offers a unique React hook, and it also contains experimental SocketIO support.

We can get started by installing it:

yarn add react-use-websocket

UseWebSocket is a hook offered by this library. This hook will be used to connect our React code to a socket. Three inputs are passed to it: a URL string, an options object, and a value called shouldConnect that indicates whether or not we should reconnect to the socket.

import useWebSocket from 'react-use-websocket';

const {
  sendMessage,
  sendJsonMessage,
  lastMessage,
  lastJsonMessage,
  readyState,
  getWebSocket,
} = useWebSocket('wss://echo.websocket.org', {
  onOpen: () => console.log('opened'),
  shouldReconnect: (closeEvent) => true,
});

We should start monitoring events on a socket as soon as one is created. Four events could happen to a socket:

• open – connection established
• message – data received
• error – WebSocket error
• close – connection closed

The second option on the useWebSocket hook is crucial since it allows us to implement our desired behavior in any of the four potential occurrences. Imagine that after opening our socket, we wished to make some state changes:

import useWebSocket from 'react-use-websocket';

const {
  sendMessage,
  sendJsonMessage,
  lastMessage,
  lastJsonMessage,
  readyState,
  getWebSocket,
} = useWebSocket('wss://echo.websocket.org', {
  onOpen: () => {
    setIsOpen(true);
    setIsLoading(true);
    ...
  },
  shouldReconnect: (closeEvent) => true,
});

Async URLs are also supported by the hook. You can pass a function that returns a string (or a promise that resolves to a string) as the first argument to useWebSocket rather than a string.

import useWebSocket from 'react-use-websocket';

const getSocketUrl = useCallback(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('wss://echo.websocket.org');
    }, 2000);
  });
}, []);

const {
  sendMessage,
  sendJsonMessage,
  lastMessage,
  lastJsonMessage,
  readyState,
  getWebSocket,
} = useWebSocket(getSocketUrl, {
  onOpen: () => {
    setIsOpen(true);
    setIsLoading(true);
    ...
  },
  shouldReconnect: (closeEvent) => true,
});

It might be extremely difficult to manage your own implementation and is advised to utilize a third-party package for WebSocket integration in React. There are several corner circumstances that must be addressed, and most of the time we lack the resources to create our own solution for those situations.

You can attempt making your own unique React hook if you don’t want to add another package to your project. It might sound like this:

import * as React from 'react';

const useWebSockets = () => {
  React.useEffect(() => {
    const websocket = new WebSocket('wss://echo.websocket.org/');

    websocket.onopen = () => {
      console.log('connected');
    }

    websocket.onmessage = (event) => {
      const data = JSON.parse(event.data);
    }
  
    return () => {
      websocket.close()
    }
  }, [])
}

When To Use WebSocket?

If implemented correctly, the client-server communication protocol known as WebSocket can be quite effective. The main justification for using WebSocket is often to create real-time applications.

WebSocket provides for continuous client-server connection because the server continuously feeds data back. It implies that transmitting or receiving data via an open connection is simple and can improve the efficiency of the application.

There are numerous applications that can profit from the use of WebSockets when we talk about real-time apps. WebSockets are used by chat applications because real-time user communication is a key component of these programs.

Gaming apps are another class of applications where WebSockets may greatly help. Think of something like a gaming console or a streaming service. In this kind of application, the server should be able to send and receive data continuously.

Conclusion

An incredible protocol for establishing two-way communication between a client (such as a browser) and a server is WebSocket. Sending and receiving data between parties is made easier by it.

Being able to build real-time applications with such fantastic tools is a blessing for developers. It offers up a whole new universe of opportunities. There are numerous scenarios in which using WebSockets could be advantageous.

Today, all we need is WebSocket and React to build amazing applications. The opportunities are limitless. We can design and implement any kind of real-time application we desire using both technologies. You should give using WebSockets and React combined a shot. They make a great fit and the results will amaze you.