ReactJS + Socket.IO - Best way to handle socket connection

Question

I'm trying to make a ReactJS realtime application with Node and Socket.IO, but I'm having a hard time figuring out the best way to handle my socket connection on the clientside.

I have multiple React components that all need some information from the server, and preferrably in realtime via the socket connection. But when importing the socket.io-client dependency and making the connection to the server in different files, I get multiple connections to the server, which doesn't really seem that optimal.

So I'm wondering if there's a better solution to share the connection between multiple components without having to create a new connection for each component. Maybe by making connection in the main app.js file and then passing it onto the child components for later use.

Some places online suggests using the context property to pass the socket variable, but React's own documentation highly discourage the use of context.

The following code is just an example, not the actual code since there's much more unnecessary code in the real project than needed to illustrate the problem.

foo.js

import React from 'react';
import io from 'socket.io-client';

const socket = io("http://localhost:3000");

class Foo extends React.Component {
    // ...
    componentDidMount() {
        socket.on("GetFooData", (data) => {
            this.setState({
                fooData: data
            });
        });
    }
    // ...
}

bar.js

import React from 'react';
import io from 'socket.io-client';

const socket = io("http://localhost:3000");

class Bar extends React.Component {
    // ...
    componentDidMount() {
        socket.on("GetBarData", (data) => {
            this.setState({
                barData: data
            });
        });
    }
    // ...
}

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import Foo from './foo';
import Bar from './bar';

const App = () => {
    return (
        <div className="container">
            <Foo />
            <Bar />
        </div>
    );
};

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

Doesn't React encourage the use of stores? I would think there would be some kind of way to compose a react store that leverages an Observable that wraps a WebSocket. — zero298
– zero298, Commented Feb 14, 2018 at 19:39
Create a socket in App.js(root component) and pass the data to child components as props or by using redux. — Bharat Chhabra
– Bharat Chhabra, Commented Jun 22, 2018 at 22:30
For simplicity you can use props/state. Just use the componentWillMount in the root component, then pass the state as props to child components. I've just done this myself and works fine — Mark Robson
– Mark Robson, Commented Jul 18, 2018 at 15:07

Ashad · Accepted Answer · 2019-10-21 11:35:50Z

24

You can create one socket connection and then export it ,like this,

import io from "socket.io-client";
let socket = io("http://localhost:8000/chat");
export default socket;

and then import it anywhere

import socket from "../../socket/socket";

answered Oct 21, 2019 at 11:35

Ashad

2,5211 gold badge24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DORRITO Over a year ago

If you have set up a counter and have 7-20+ random connections that you are trying to figure out, and have socket connections set up through components or through context, remove those and use this, cleared up all my random connections. Make sure you have a cleanup function too! example: return () => socket.close() Thank you jsRook, helped me out more so much. Sometimes it's best to go back to basics :)

eemilk Over a year ago

Amazing, thanks. Is it a good practice to have this on index.js in react?

Collectives™ on Stack Overflow

ReactJS + Socket.IO - Best way to handle socket connection

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related