Reactjs: how to share a websocket between components

user_447458 0
Viewed 16904

I'm new to React and I'm having some issues regarding components structure and sharing a websocket between them.

The app consists of categories and products. The initial data load will be done with an Ajax request and a websocket will be used keep data updated.

My component hierarchy looks like this:

  • CategoriesList
    • Category
      • ProductsList
        • Product

CategoriesList holds the state of categories and ProductsList holds the state of products within a category.

So I would like to use the same websocket inside CategoriesList and ProductsList but listening to different websocket events: category:updated and product:updated.

How do I share the websocket between components and where is the right place to initialize it?

Since there is one ProductsList for each Category, does this means that the products:updated event will fire multiple times ( one for each category )? I guess this isn't a good thing in terms of performance.

reactjs websocket javascript
6 Answers

Another way of sharing the same instance is simply create a new file as below: socketConfig.js

import openSocket from 'socket.io-client';

const socket = openSocket("http://localhost:6600");

export default socket;

and the use it in any file you want, just import it.

import socket from "../socketConfig";

This works for me, as I use it in 2 different components which are not depend on each other.

user_107856230

If you are using Redux Store, then store the socket in Redux Store and then you can access it from any component as like other store variable/state.

Component: A (Defining Socket in Component A)

//...
const dispatch = useDispatch();

useEffect(() => {
  const socket = io("http://localhost:8000");
  socket.on("connect", () => {
    console.log("Connected to Socket");
    dispatch({
      type: "INIT_SOCKET",
      socket: socket
    });
  });
}, [...]);

Component: B (Using Socket in another Component)

//...
const socket = useSelector(state => state.socket);

useEffect(() => {
  if (socket) {
    socket.on("msg", (data) => {
      console.log(data);
    });
  }
}, [socket]);

user_135744170

Just declare socket outside component, same this...

import SocketIOClient from 'socket.io-client';   
const socket=SocketIOClient('http://localhost:3000/chat')

function App() {
    //use socket here ...

    return (
        <div> </div>);
}
user_35673550

Create socket.config.js file add open connection for your websockets.

export const WebSocket1 = new WebSocket('ws://YOUR websocketurl');
export const WebSocket2 = new WebSocket('ws://YOUR anotherwebsocketurl');

Import into your any component

import  {WebSocket1, WebSocket2}from '../../../utils/socket.config';

Inside UseEffect hooks utilise the websocket

 useEffect(() => {
WebSocket1.onopen = () => {
    WebSocket1.send(JSON.stringify(someData));
};

    WebSocket1.onmessage = (event: any) => {

      console.log(JSON.parse(event.data));
        
        
    }

    WebSocket1.onerror = error => {
        console.log(`WebSocket error: ${error}`);
    };

    WebSocket1.onclose = () => {
        console.log("disconnected");
    }
}, []);
user_74984930

See react-cent You can write your own Provider (CentProvider.js) to wrap your components and provide your client through the context. In addition, write Higher-Order Component (CentComponent.js) to make it available with this.props.<client>

user_32042440
Related