15

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.

3
  • I will use tweet to describe how much React cares about your implementation twitter.com/AdamRackis/status/707004963776430080 I would pass down socket connection instance (via context maybe?!) which will allow components to listen to changes. Feel free to use whatever you are comfortable with. React will not limit you.
    – Andreyco
    Mar 20, 2016 at 22:19
  • Yes, you share it by passing it through props, or use an architecture like Flux where the socket lives in a store you can access from anywhere. Listen to events in componentDidMount and unlisten for events in componentWillUnmount. Are you using any web-socket library, for example Socket.IO? Mar 21, 2016 at 0:06
  • @Aaron I'm using the library provided by Pusher.com
    – Fernando
    Mar 22, 2016 at 14:31

6 Answers 6

20

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.

2
  • 2
    This is the answer that helped! One extension: how would you do it if the URL itself is dynamic and depends on a component loading the value into it? openSocket(dynamicUrlHere) Jul 24, 2020 at 8:13
  • 1
    how do you use this with react and JS? ie I have a JS file for a Phaser game that uses react Mar 12, 2021 at 7:01
10

I recommend initializing your socket connection in CategoriesList and then passing down the connection as props to the child components. When the connection is passed down, you should be able to use it to listen for specific events as needed in the child components.

Here's an example application on github that uses react and socket.io. The socket is initialized in a parent component and then passed down. https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/containers/ChatContainer.js

On line 9 the connection is initialized and then on line 23 it's passed down as props. The connection is later used in child components to receive and emit events. Ex: https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/components/Chat.js

1
  • 4
    Render will create multiple connections on server side. This is not optimal.
    – JKhan
    Jun 11, 2019 at 14:38
1

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]);

0

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

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");
    }
}, []);
-2

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>

1
  • This answer (to an old question) relies heavily on a link to a third-party package that may not always be there. In the future, please answer by including information specific to the OP's question within your text
    – kwishnu
    Nov 7, 2017 at 21:08

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.