CODEWITHSUNDEEP
node.jsreactjssocket.io
Bruno
Bruno

Reputation: 33

React JS socket.io-client opens multiple connections

I have a simple React JS app connected to a socket io server. Whenever I open the app in the browser, the client sends new connection request to the server every 5 seconds.

server:

const express = require('express');
const app = express();
const http = require('http');

const server = http.createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('socket id:', socket.id);

})

server.listen(3001, () => {
    console.log('Listening on port 3001');
})

client:

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

const socket = io('http://localhost:3001');

const App = () => {

  return (
    <div>Hi there!</div>
  );
}

export default App;

logs on the server:

socket id: ByXQEMgeVaQ5AGw1AAAA
socket id: 8LzNQsyeYq7GSEvqAAAB
socket id: bbuYEs4kKzjxXuBsAAAC
socket id: vwprv4hnJbRlStG4AAAD

I suspect there could be something wrong on my laptop, cause I don't see anything wrong in the code, any ideas?

Thanks in advance

Upvotes: 2

Views: 8837

Answers (4)

Muhammed Faheem k
Muhammed Faheem k

Reputation: 11

When we are connecting the socket, instead of connecting it via a variable we connect it through a state. By doing so we can avoid the problem of multiple connections.

//old method
const socket = io.connect("https://example.com")

//to change
const [socket, setSocket] = useState(io.connect("https://example.com"))

Upvotes: 0

Bruno
Bruno

Reputation: 33

Actually I just found the root cause, I had a mismatch between my client version and my server version. I updated the client version to v4 and now it is working

Upvotes: 0

spirift
spirift

Reputation: 3072

I would recommend calling connect inside a useEffect and return the disconnect method to be called when the component dismounts.

const [socket, setSocket] = useState(null)
useEffect(() => {
  const newSocket = io('http://localhost:3001')
  setSocket(newSocket)

  return socket.disconnect()
}, [])

Upvotes: 7

hellogoodnight
hellogoodnight

Reputation: 2139

Can you try to wrap the client side socket creation in a useEffect that only runs once? I'm curious to see if the behavior still appears.

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

const socket = io('http://localhost:3001');

const App = () => {

  useEffect(() => {
    const socket = io('http://localhost:3001');
  }, [])

  return (
    <div>Hi there!</div>
  );
}

export default App;

Upvotes: 0

Related Questions