加载资源失败：net::ERR_CONNECTION_REFUSED socket.io答案

【问题标题】：Failed to load resource: net::ERR_CONNECTION_REFUSED socket.io加载资源失败：net::ERR_CONNECTION_REFUSED socket.io
【发布时间】：2020-11-18 01:35:07
【问题描述】：

我正在使用 Socket.io、Node.js 和 React.js 构建一个简单的聊天应用程序。

后端服务器一开始连接正常。

但是，当尝试从我的前端向服务器发出请求时，服务器不断崩溃。有谁明白为什么？这是错误..

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
server started on port 4000
new connection
events.js:109
    throw new ERR_INVALID_ARG_TYPE('listener', 'Function', listener);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "listener" argument must be of type function. Received undefined
    at checkListener (events.js:109:11)
    at _addListener (events.js:344:3)
    at Socket.addListener (events.js:402:10)
    at Namespace.<anonymous> (/Users/macbook/Projects/chat-react/server/index.js:16:10)
    at Namespace.emit (events.js:311:20)
    at Namespace.emit (/Users/macbook/Projects/chat-react/server/node_modules/socket.io/lib/namespace.js:213:10)
    at /Users/macbook/Projects/chat-react/server/node_modules/socket.io/lib/namespace.js:181:14
    at processTicksAndRejections (internal/process/task_queues.js:79:11) {
  code: 'ERR_INVALID_ARG_TYPE'
}
[nodemon] app crashed - waiting for file changes before starting...

目前我的服务器是这样的

index.js

const express =  require ('express');
const socketio = require('socket.io');
const http = require('http'); 

const PORT = process.env.PORT || 4000;

const router = require('./router'); 

const app = express();
const server = http.createServer(app);
const io = socketio(server);

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

  socket.on('disconnect'), () => {
    console.log('User has left!!');
  }
});

app.use(router);

server.listen(PORT, () => console.log(`server started on port ${PORT}`));

我的客户看起来像这样 Chat.js

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

let socket;

const Chat = ({ location }) => {
  const [name, setUserName] = useState('');
  const [room, setRoomID] = useState('');
  const ENDPOINT = 'localhost:4000';

  useEffect(() => {
    const { name, room } = quertString.parse(location.search);

    socket = io(ENDPOINT);
 
    setUserName(name);
    setRoomID(room);

    console.log(socket)
  });

  return (
    <h1>Chat</h1>
  )
};

export default Chat;

任何帮助都会很棒。

【问题讨论】：

标签： node.js reactjs websocket socket.io chat

【解决方案1】：

您的代码有误。看这里：

socket.on('disconnect'), () => {
  console.log('User has left!!');
}

注意到什么了吗？是的，您要调用的函数在括号中是 not。即使这不会导致语法错误，您也可能不想这样做。相反，您需要将函数放在括号内，如下所示：

socket.on('disconnect', () => {
  console.log('User has left!!');
});

注意：要了解有关 逗号运算符 的更多信息，请参阅以下网站：

https://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator.
JS statement separator with commas

【讨论】：