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

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

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

更改此行，

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

至

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

无论何时遇到ERR_CONNECTION_REFUSED，都意味着服务器不可访问，或者确切地说，服务器出于某种原因拒绝了端口上的连接。

ERR_ SL_PROTOCOL_；https"；。使用"；http"；相反