9951 explained code solutions for 126 technologies


reactjsHow can I use ReactJS to implement a websocket connection?


ReactJS can be used to implement a websocket connection using the WebSocket API. The following is an example of how to establish a websocket connection using ReactJS:

// Create a new websocket instance
const ws = new WebSocket('ws://localhost:8080');

// Listen for the websocket connection being opened
ws.onopen = () => {
    console.log('Websocket connection opened');
};

// Listen for messages from the websocket server
ws.onmessage = (e) => {
    console.log(e.data);
};

Output example

Websocket connection opened
  1. Create a new websocket instance using the WebSocket constructor, passing in the URL of the websocket server as the argument.
  2. Add an onopen event listener to the websocket instance to listen for when the websocket connection is opened.
  3. Add an onmessage event listener to the websocket instance to listen for messages sent from the websocket server.
  4. Send messages to the websocket server by calling the send method on the websocket instance, passing in the message as an argument.

Helpful links

Edit this code on GitHub