带有 React 和 Express 错误的 Socket IO：“WebSocket 连接到 '.......' 失败：WebSocket 在连接建立之前已关闭。”答案

【问题标题】：Socket IO with React and Express Error: "WebSocket connection to '.......' failed: WebSocket is closed before the connection is established."带有 React 和 Express 错误的 Socket IO：“WebSocket 连接到 '.......' 失败：WebSocket 在连接建立之前已关闭。”
【发布时间】：2023-03-19 08:10:02
【问题描述】：

我只是在学习套接字 IO，并正在尝试使用前端的 create-react-app 和后端的表达来构建最简单的聊天应用程序。

在我设置好所有东西并同时前后运行后，这个错误在我的浏览器中显示了无数次：

我正在将我的前端代理设置为我的后端端口。那会是问题吗？

这是我所有的代码，从后端开始：

后端/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}`);
  });
});

前端/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;

前端/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"
    ]
  }
}

【问题讨论】：

您是否 100% 确定您在客户端和服务器上拥有完全相同的 socket.io 版本。 Socket.io 对此非常挑剔。版本必须完全匹配。

标签： node.js reactjs websocket socket.io

【解决方案1】：

使用useRef 存储套接字客户端引用。这样您就不会丢失初始参考：

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

【讨论】：

【解决方案2】：

问题是您在应用程序的每一次渲染上都创建了io() 连接，这可能会经常发生。您只需在 App() 之外创建一次该连接。

【讨论】：