socket.io 问题。无法连接。前端说连接：假，后端不记录任何东西答案

【问题标题】：socket.io problems. Not able to connect. front end says connection: false and backend doesn't log anythingsocket.io 问题。无法连接。前端说连接：假，后端不记录任何东西
【发布时间】：2021-06-28 02:18:52
【问题描述】：

我是 socket.io 的新手，我无法让它连接到 react 应用程序。这是我在节点中的 app.js

const express = require('express');
const port = process.env.PORT || 4000;
const router = require('./routes/routes');
const cors = require('cors');
const app = express();
const bodyParser = require('body-parser');
const db = require('./db/db');

const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', () => {
  console.log('connected');
});

app.use('*', cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
(router);

app.listen(port, () => {
  console.log('listening on port ' + port);
  db.sync({
    // force: true,
    logging: false,
  });
});

还有我的前端代码。

import React, { useState, useEffect, useRef } from 'react';
import { io } from 'socket.io-client';
import classes from './Chatroom.module.css';

const Chatroom = ({ user, getAllMessages, setGetAllMessages }) => {
  const ENDPOINT = 'http://localhost:4000/getallmessages';
  var socket = io(ENDPOINT);

  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    socket.on('connect', () => {
      socket.send('hello');
      console.log('connected.');
    });
    console.log(socket);
  }, []);

每当我查看控制台时，它都会显示已连接：false，并且后端没有任何记录。

【问题讨论】：

标签： node.js reactjs express http socket.io

【解决方案1】：

为了解决这个问题，我必须在我的 io 声明中添加选项，如下所示。

const server = require('http').createServer(app);
const options = {
  cors: true,
  origins: ['http://127.0.0.1:3000'],
};
const io = require('socket.io')(server, options);

127.0.0.1 在家里，在客户端，我的服务器在 3000 上，这就是它的来源。在客户端，你是对的，我必须删除“getallmessages”路由，所以现在如下。

onst ENDPOINT = 'http://localhost:4000/';
  var socket = io(ENDPOINT);

  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    socket.on('connect', () => {
      socket.send('hello');
      console.log('connected.');
    });
    console.log(socket);
  }, []);

【讨论】：

【解决方案2】：

socket.io 绑定到服务器对象，因此您应该监听服务器而不是应用程序。

将app.listen 更改为server.listen
如果您不使用命名空间，则通过删除 getallmessages 来更改端点

【讨论】：