Socket.io不會在ReactJS應用程序中連接

我正在用express和socket.io構建一個使用react，node的小應用程序。我使用socket.io來創建一個聊天功能，但它似乎沒有連接。有一個在服務器控制檯的沒有錯誤消息，但在瀏覽器中即時得到一個錯誤，多次被評爲Socket.io不會在ReactJS應用程序中連接

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')); 
});

我的陣營前端

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在從服務器控制檯日誌相關的任何東西。

來源

2017-01-08 TRomesh

你的'io'對象是從'server'創建的，但你正在'app'上聽。你應該改爲'server.listen'。另外爲什麼你的'cors'變量名爲'cross'？ – azium

@Azium是正確的。問題在於你要求快遞而不是http。這適用於我：

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

server.listen(port);

來源

2017-01-08 20:30:50 niry

Socket.io不會在ReactJS應用程序中連接

回答

相關問題