Question

我正在构建一个使用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'));
});

My 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相关的任何原因作为日志进入控制台。

Answer 1

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

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

server.listen(port);

Socket.io不会在ReactJS应用程序中连接

1 个答案: