[英]React and Socket.io
I'm trying to create a simple app using ReactJS
and Socket.io
我正在尝试使用
ReactJS
和Socket.io
创建一个简单的应用程序
In my component I want to be able to communicate with the server, but the problem is that I don't know how to do io.connect()
在我的组件中,我希望能够与服务器通信,但是问题是我不知道该怎么做
io.connect()
1.Do I need to explicitly specify the IP address like io.connect("http://myHost:7000")
or is it enough to say : io.connect()
? 1.是否需要像
io.connect("http://myHost:7000")
那样显式指定IP地址,或者说io.connect()
是否足够? As we can see in this piece of code : https://github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx 正如我们在这段代码中所看到的: https : //github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx
2.I do more or less the same as this code , but I receive error when I do npm start
as io is undefined
. 2。我所做的事情与这段代码大致相同,但是当我做
npm start
由于io is undefined
,我收到了错误。 I think , io
is provided globally by including the socket.io
script. 我认为
io
是通过包含socket.io
脚本来全局提供的。 How can I solve this problem ? 我怎么解决这个问题 ?
'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;
This is the code : 这是代码:
https://github.com/arian-hosseinzadeh/simple-user-list https://github.com/arian-hosseinzadeh/simple-user-list
Answers: 回答:
1) No, you don't need to specify the IP, you can even use /
and it will go through the default HTTP 80 port, anyway, you can find more examples on the socket.io site. 1)不,您不需要指定IP,甚至可以使用
/
,它将通过默认的HTTP 80端口,无论如何,您可以在socket.io网站上找到更多示例。
2) Require io
too, remember to add socket.io-client to your package: 2)也需要
io
,请记住将socket.io-client添加到您的软件包中:
var React = require('react'),
io = require('socket.io-client');
Anyway, if you want to include the client script that socket.io server provides as a static file, then remember to add it into your HTML using a <script/>
tag, that way you'll have io on the global scope avoiding the require part, but well, I prefer to require it. 无论如何,如果要包含socket.io服务器提供的客户端脚本作为静态文件,请记住使用
<script/>
标记将其添加到HTML中,这样一来,您就可以在全局范围内使用io ,从而避免了需要一部分,但是好吧,我更喜欢它。
NOW, WHAT ABOUT... 现在,关于...
Trying my lib: https://www.npmjs.com/package/react-socket 尝试我的库: https : //www.npmjs.com/package/react-socket
It will handle the socket connection on mount and disconnection on unmount (the same goes for socket event listeners), give it a try and let me know. 它将在安装时处理套接字连接,在卸载时处理断开连接(套接字事件监听器也是如此),请尝试一下,让我知道。
Here you have an example: 这里有一个例子:
http://coma.github.io/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.