React和Socket.io

我正在尝试使用ReactJS和Socket.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

Answer 1

回答：

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