Socket.io Node Js服务器和React js客户端未连接

因此，首先我想说的是，我已经查看了针对类似问题的许多其他答案，但没有一个对我有用。

我的设置是一个节点js服务器和一个react js客户端。而且我在进行基本设置时遇到了麻烦。任何人都会帮助我，我真的很感激。

而且还对客户端的代码，我通过与HTTP进行的serverUrl不同的选择从本地主机交替http://localhost:6000，没有localhost:6000。相同的IP地址。

NODE JS服务器代码

const express = require('express');
const app = express();
const users = require("./routes/api/users");
const profile = require("./routes/api/profile");
const project = require("./routes/api/project");
const auth = require("./routes/api/auth");
const email = require("./routes/api/email");
app.use(express.static(__dirname + '/public'));

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

io.on('connection', (socket)=> {
  console.log("user connected")

  socket.on('SEND_MESSAGE', function(data){
    console.log("message received")
    io.emit('RECEIVE_MESSAGE', data);
})
});

//*** Start of Routes ***//

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:6000");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  next();
})
app.use("/api/users", users);
app.use("/api/profile", profile);
app.use("/api/auth", auth);
app.use("/api/project", project);
app.use("/api/email", email);

//*** End of Routes ***//
const port = 6000;

server.listen(port, () => {
  console.log(`Server Running at ${port}`);
});

REACT JS客户端代码

import React,{useEffect,useState,useRef} from 'react';
import io from "socket.io-client";

class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            username: 'name',
            message: 'hello world',
            messages: []
        };

        this.serverUrl = '127.0.0.1:6000';
        this.socket = io(this.serverUrl, {reconnect: true});

        this.setupSocket();
    }

    setupSocket() {
        this.socket.on('connection', (data) => {
            console.log(`Connected: ${data}`);
        });
    }



    render(){
        return(<p>Hello<p>)
        }
}
export default App