Socket.ioはReactJSアプリケーションで接続しないでください

Question

私は反応とnodeと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')); 
}); 

は

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の代わりにexpressを聞くことです。これは私のために働きます：

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

server.listen(port);