尝试用node.js实现socket.io表达并对我的生产服务器做出反应

时间:2017-03-22 23:25:48

标签: javascript node.js reactjs express socket.io

将socket io + express js集成到我的Bluehost服务器上时遇到了问题。



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>React Poll App</title>
	<link rel="stylesheet" href="/style.css">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class="container" id="react-container">
		<h1>Live Polling</h1>
	</div>
   <!-- <script src="/socket.io-client/dist/socket.io.js"></script> -->
   <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
	<script src="./dist/bundle.js"></script>
   <!-- <script src="/socket.io/socket.io.js"></script> -->

</body>
</html>
&#13;
&#13;
&#13;

这是我的app.js

&#13;
&#13;
var React         = require('react');
var Router        = require('react-router');
var RouteHandler  = Router.RouteHandler;
var Header        = require('./parts/Header');
var io = require('socket.io-client');
var APP = React.createClass({

  getInitialState(){
    return {
      status  : 'disconnected',
      title   : '',
      member  : {},
      audience: [],
      speaker : '',
      questions: [],
      currentQuestion: false
    }
  },

  componentWillMount(){
    this.socket = io('react-test.derrickmv.com');
    this.socket.on('connect', this.connect);
    this.socket.on('disconnect', this.disconnect);
    this.socket.on('welcome', this.updateState);
    this.socket.on('joined', this.joined);
    this.socket.on('audience', this.updateAudience);
    this.socket.on('start', this.start);
    this.socket.on('end', this.updateState);
    this.socket.on('ask', this.ask);
  },

  emit(eventName, payload){
    this.socket.emit(eventName, payload);
  },

  connect(){
    var member = (sessionStorage.member) ? JSON.parse(sessionStorage.member): null;

    if (member && member.type ==='audience'){
      this.emit('join', member);
    } else if (member && member.type === 'speaker'){
      this.emit('start', {name: member.name, title : sessionStorage.title});
    }

    this.setState({ status: 'connected'});
  },

  disconnect(){
    this.setState({
      status: 'disconnected',
      title:   'disconnected',
      speaker: ''
    });
  },

  updateState(serverState){
    this.setState(serverState);
  },

  joined(member){
     sessionStorage.member = JSON.stringify(member);
     this.setState({ member: member});
  },

  start(presentation){
     if( this.state.member.type === 'speaker'){
       sessionStorage.title = presentation.title;
     }
     this.setState(presentation);
  },

  ask(question){
    sessionStorage.answer = '';
    this.setState({ currentQuestion: question });
  },

  updateAudience(newAudience){
    this.setState({ audience: newAudience});
  },

  render(){
    return (
      <div>
          <Header {...this.state} />
          <RouteHandler emit={this.emit} {...this.state} />
      </div>
    );
  }
});

module.exports = APP;
&#13;
&#13;
&#13;

将所有内容放入我的服务器后,我在控制台日志中收到以下错误,说明404(未找到)错误。

screenshot of console log

这是我的app-server.js: SCREENSHOT OF APP-SERVER.JS

非常感谢您的帮助!

0 个答案:

没有答案