React和Socket.io

我正在尝试使用ReactJSSocket.io创build一个简单的应用程序

在我的组件我想能够与服务器通信,但问题是,我不知道如何做io.connect()

1.是否需要明确指定IP地址,如io.connect("http://myHost:7000")还是足够说: io.connect() ? 正如我们可以在这段代码中看到的: https : //github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx

2.我做的或多或less与此代码相同,但是当我执行npm start时,我收到错误,因为io is undefined 。 我认为, io是通过包含socket.io脚本全局提供的。 我怎么解决这个问题 ?

 'use strict'; var React = require('react'); var socket = io.connect(); var chatWindow = React.createClass({ displayName: 'chatWindow', propTypes: {}, getDefaultProps: function() { return ({ messages: 0 }); }, componentDidMount: function() { socket = this.props.io.connect(); socket.on('value', this._messageRecieve); }, _messageRecieve: function(messages) { this.setState({ messages: messages }); }, getInitialState: function() { return ({ messages: 0 }); }, _handleSend: function(){ var newValue = parseInt(this.refs.messageBox.value) + this.props.messages; this.setState({ messages: newValue }); socket.emit('clientMessage', { message: newValue}); }, render: function() { var window = <div> <div>{this.props.messages}</div> <input type="text" id="messageBox" refs="messageBox"></input> <input type="button" onClick={this._handleSend} value="send" id="send"/> </div>; return (window); } }); module.exports = chatWindow; 

这是代码:

https://github.com/arian-hosseinzadeh/simple-user-list

       

网上收集的解决方案 "React和Socket.io"

回答:

1)不,你不需要指定IP,甚至可以使用/ ,它将通过默认的HTTP 80端口,无论如何,你可以在socket.io站点上find更多的例子。

2)要求io ,请记得添加socket.io客户端到您的包:

 var React = require('react'), io = require('socket.io-client'); 

无论如何,如果你想包含socket.io服务器提供的客户端脚本作为一个静态文件,那么记得使用<script/>标记将它添加到你的HTML中,这样你就可以在全局范围内使用io来避免需要一部分,但是,我更喜欢需要它。

现在,关于…

尝试我的lib: https : //www.npmjs.com/package/react-socket

它将在卸载时处理挂接和断开连接的套接字连接(套接字事件监听器也一样),试试看,让我知道。

这里有一个例子:

http://coma.github.io/react-socket/

 var App = React.createClass({ getInitialState: function() { return { tweets: [] }; }, onTweet: function(tweet) { var tweets = this .state .tweets .slice(); tweet.url = 'https://twitter.com/' + tweet.user + '/status/' + tweet.id; tweet.at = new Date(tweet.at); tweet.avatar = { backgroundImage: 'url(' + tweet.img + ')' }; tweets.unshift(tweet); this.setState({ tweets: tweets }); }, renderTweet: function (tweet) { return ( <li key={tweet.id}> <a href={tweet.url} target="_blank"> <div className="user"> <div className="avatar" style={ tweet.avatar }/> <div className="name">{ tweet.user }</div> </div> <div className="text">{ tweet.text }</div> </a> </li> ); }, render: function () { return ( <div> <ReactSocket.Socket url="http://tweets.socket.io"/> <ReactSocket.Event name="tweet" callback={ this.onTweet }/> <ul className="tweets">{ this.state.tweets.map(this.renderTweet) }</ul> </div> ); } }); React.render(<App/>, document.body);