Socket.io 无法在 ReactJS 应用程序中连接

Posted 2023-03-07

【中文标题】Socket.io 无法在 ReactJS 应用程序中连接

【英文标题】：Socket.io wont work connect in ReactJS app

【发布时间】：2017-05-22 21:48:15

【问题描述】：

我正在使用 react、node with express 和 socket.io 构建一个小型应用程序。我正在使用 socket.io 创建一个聊天功能，但它似乎没有连接。服务器的控制台没有错误消息，但在浏览器中我反复收到错误消息

POST http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Lb-j6De 404 (Not Found).

我不知道出了什么问题，我浏览了文档，但我仍然在为这个问题苦苦挣扎。

我的服务器

import express from 'express';
import mongoose from 'mongoose';
import bodyParser from 'body-parser';
import passport from 'passport';
import cros from 'cors';
import path from 'path';
import webpack from 'webpack';
import http from 'http';
import SocketIO from 'socket.io';
import webpackmiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
import regusers from './models/regusers.model';
import Router from './routes/UserRouter';
import Chat from './services/socket/chat';

const cross = cros();
const app = express();
const router = express.Router();
const server = http.Server(app);
const io = new SocketIO(server);
const port =3000;
const compile=webpack(webpackConfig);
const db='mongodb://localhost/parkspace';

let users = [];
let sockets = ;

mongoose.Promise = global.Promise;

mongoose.connect(db);

app.use(webpackmiddleware(compile,
  hot:true,
  publicPath: webpackConfig.output.publicPath,
  noInfo:true
));

app.use(webpackHotMiddleware(compile));
app.use(cross);
app.use(router);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded(
   extended:true
));


app.listen(port,()=> console.log('Running on port: '+port));

app.use('/', express.static(__dirname));

Router(app);
// Chat(app,io);

io.on('connection', (socket) => 

        console.log('connected');

        socket.on('message', (msg) => 
            console.log(msg);
        );

        socket.on('disconnect', () => 
            console.log('disconnected');
        );

);



app.get('*',(req,res) => 
   res.sendFile(path.resolve(__dirname,'./index.html'));
);

我的 React 前端

import React from 'react';
import io from 'socket.io-client';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';


const socket = io.connect('http://localhost:3000');

const style = 
  margin: 20,
  textAlign: 'center',
  display: 'inline-block',
;

const styleInput = 
    padding:10,
    margin: 10,
    width: '85%'

;

const styleButton = 
    margin:12,
    float:'right'
;


class chatContainer extends React.Component

    constructor(props)
       super(props);
       this.state=

       ;
    

    chatmessage = () => 
        let message = this.refs.chattext.getValue();
        socket.emit('message', message);
        console.log('emmited');

    


   render()
     return(
         <div socket =  socket  >
            <Paper style=style zDepth=2 className="row">
                <TextField
                  hintText="Type message here..."
                  multiLine=true
                  rows=2
                  rowsMax=4
                  style=styleInput
                  className="col-md-12"
                  fullWidth=true
                  ref="chattext"
                />
                <div className="col-md-3" style=styleButton className="row" >
                   <FlatButton label="Send" onTouchTap=this.chatmessage/>
                   <FlatButton label="Cancel"/>
                </div>
            </Paper>
         </div>
     );
   


export default chatContainer;

它没有连接的任何原因以及为什么我没有得到任何与 socketio 相关的东西作为从服务器登录控制台的原因。

【问题讨论】：

您的io 对象是从server 创建的，但您正在收听app。你应该改为server.listen。另外，为什么您的 cors 变量名为 cross？

【参考方案1】：

@Azium 是正确的。问题是您要求 express 而不是 http。这对我有用：

let express = require('express'),
    app = express(),
    server = require('http').Server(app),
    io = require('socket.io')(server);

server.listen(port);