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

Posted 2023-04-18

【中文标题】socket.io 问题。无法连接。前端说连接：假，后端不记录任何东西

【英文标题】：socket.io problems. Not able to connect. front end says connection: false and backend doesn't log anything

【发布时间】：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，并且后端没有任何记录。

【参考方案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 来更改端点