加载反应应用程序错误时，轮询-xhr.js:203 GET https://localhost:8001/socket.io/?EIO=4&transport=polling&t=NZJdzB8 net::ERR_CONNECTION_REFUSED

Question

我是初学者，正在尝试使用 socket.io 构建一个简单的聊天应用程序，但是当我将 socket.io-client 连接到后端时，它会重现上述错误。我无法理解上述错误的含义，所以请帮助我调试我的代码并了解错误的含义和原因。

服务器端代码

const express = require("express");
const socketIo = require("socket.io");
const http = require("http");
const router = require("./router");
const PORT = 8001;
const cors = require("cors");

const app = express();

const server = http.createServer(app);

//middlewares
app.use(router);
app.use(cors());

const io = socketIo(server);
// var so = io("https://yourDomain:3000", { transport: ["websocket"] });
//socket.io
io.on("connection", (socket) => {
  console.log("We have a new connection!!!");

  socket.on("join", ({ name, room }) => {
    console.log(name, room);
  });
  socket.on("disconnect", () => {
    console.log("User has left!!!");
  });
});

//listening on server
server.listen(8000, (err) => {
  if (err) {
    console.log(`Error: ${err}`);
    return;
  }
  console.log(`Server started on port: ${PORT}`);
});

package.json 服务器端

{
  "name": "real-chat-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "nodemon": "^2.0.7",
    "query-string": "^7.0.0",
    "react-emoji": "^0.5.0",
    "react-router": "^5.2.0",
    "react-scroll-to-bottom": "^4.1.0",
    "socket.io": "^4.0.1",
    "socket.io-client": "^4.0.1"
  }
}

我正在使用的聊天组件客户端 socket.io-client

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

import './Chat.css';
let socket;
function Chat({ location }) {
  //state hook
  // eslint-disable-next-line
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');
  const ENDPOINT = 'https://localhost:8001';
  useEffect(() => {
    const { name, room } = queryString.parse(location.search);
    // const data = queryString.parse(location.search);
    // console.log('location', location);
    // console.log('location.search: ', location.search);
    // console.log('data: ', data);
    setName(name);
    setRoom(room);
    socket = io(ENDPOINT);
    console.log(socket);
    socket.emit('join', { name, room });
    console.log(socket);
  }, [ENDPOINT, location.search]);
  return <div>Chat page</div>;
}

export default Chat;

package.json 用于客户端

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "socket.io-client": "^4.0.1",
    "web-vitals": "^1.1.1"
  },
  "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"
    ]
  }
}

Answer 1

您正在端口 8000 上启动服务器，但客户端正在尝试连接到端口 8081。

更改此行，

const ENDPOINT = 'https://localhost:8001';

至

const ENDPOINT = 'http://localhost:8000';

每当您遇到 ERR_CONNECTION_REFUSED 时，这意味着服务器无法访问，或者准确地说，服务器由于某种原因拒绝端口上的连接。

ERR_SSL_PROTOCOL_ERROR 可能是因为“https”而发生的。请改用“http”。