反应和 Socket.io

Question

我正在尝试使用 ReactJS 和 Socket.io

创建一个简单的应用程序

在我的组件中，我希望能够与服务器通信，但问题是我不知道该怎么做io.connect()

1.Do 我需要像 io.connect("http://myHost:7000") 那样明确指定 IP 地址，还是说 io.connect() 就足够了？正如我们在这段代码中看到的： https://github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx

2.I 或多或少与这段代码相同，但是当我像 io is undefined 那样做 npm start 时收到错误。我认为，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 站点。

2) 也需要 io，记得将 socket.io-client 添加到您的包中：

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

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

现在，关于...

正在尝试我的库：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);

反应和 Socket.io

React and Socket.io

node.js

socket.io

reactjs