[英]React and Socket.io
我正在嘗試使用ReactJS
和Socket.io
創建一個簡單的應用程序
在我的組件中,我希望能夠與服務器通信,但是問題是我不知道該怎么做io.connect()
1.是否需要像io.connect("http://myHost:7000")
那樣顯式指定IP地址,或者說io.connect()
是否足夠? 正如我們在這段代碼中所看到的: https : //github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx
2。我所做的事情與這段代碼大致相同,但是當我做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;
這是代碼:
回答:
1)不,您不需要指定IP,甚至可以使用/
,它將通過默認的HTTP 80端口,無論如何,您可以在socket.io網站上找到更多示例。
2)也需要io
,請記住將socket.io-client添加到您的軟件包中:
var React = require('react'),
io = require('socket.io-client');
無論如何,如果要包含socket.io服務器提供的客戶端腳本作為靜態文件,請記住使用<script/>
標記將其添加到HTML中,這樣一來,您就可以在全局范圍內使用io ,從而避免了需要一部分,但是好吧,我更喜歡它。
現在,關於...
嘗試我的庫: 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.