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

Stack Overflow用户

提问于 2017-01-08 15:33:20

回答 0查看 2.1K关注 0票数 2

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

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;