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

时间:2020-07-31 05:29:23

标签: node.js reactjs express socket.io

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

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

在客户端代码上,我通过带有http http://localhost:6000且不带localhost:6000的localhost的serverUrl的不同选项进行了交替。 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

1 个答案:

答案 0 :(得分:1)

套接字服务器可能有问题,您可以更改端口并检查其是否正常工作