Socket IO with React and Express Error: "WebSocket connection to '.......' failed: WebSocket is closed before the connection is established."

Question

I am just learning socket IO and am trying to build the simplest chat application possible with create-react-app in the frontend and express in the backend.

After I set everything up and run both front and back at the same time, this error displays itself an infinite number of times in my browser:

I'm setting my frontend's proxy to my backend port. Would that be the problem?

Here is all my code, starting with the backend:

backend/index.js

const app = require('express')();
const server = app.listen(4000, () => {
  console.log('server listening on 4000');
});
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('message', (message) => {
    console.log(message);
    io.emit('message', `${message}`);
  });
});

frontend/App.js

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

function App() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  const socket = io('/');
  useEffect(() => {
    socket.on('message', (data) => {
      setMessages([...messages, data]);
    });
  }, [messages, socket]);

  const sendHandler = () => {
    socket.emit(message);
  };
  return (
    <div>
      {messages.map((message) => (
        <ul>{message}</ul>
      ))}
      <input
        type="text"
        name="message"
        placeholder="message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendHandler}>send</button>
    </div>
  );
}

export default App;

frontend/package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "proxy": "http://127.0.0.1:4000",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "socket.io-client": "^3.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Are you 100% sure that you have exactly the same socket.io version on both client and server. Socket.io is very picky about this. Versions must match exactly. — jfriend00
– jfriend00, Commented Jan 7, 2021 at 7:56

lissettdm · Accepted Answer · 2021-01-07 01:37:49Z

1

Store the socket client reference with useRef. This way you never loose the initial reference:

const socketRef = useRef(io('/'));
const socket = socketRef.current;

answered Jan 7, 2021 at 1:37

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

Comments

Seb · Accepted Answer · 2021-02-22 18:29:13Z

0

The problem is you are creating the io() connection on every single render of your App, which can happen quite frequently. You need to create that connection only once outside App().

answered Feb 22, 2021 at 18:29

Seb

25.2k6 gold badges69 silver badges85 bronze badges

Collectives™ on Stack Overflow

Socket IO with React and Express Error: "WebSocket connection to '.......' failed: WebSocket is closed before the connection is established."

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related