0

情况：

我正在使用Reactjs和Flummox构建一个 Web 服务，它将使用Socket.io连接到一个简单的套接字服务器。它需要在他们的仪表板上跟踪每个用户的多个连接，并且想知道这样做的最佳方法。每个用户可以有多个令牌，每个令牌都与一个套接字连接相关联。我有两种方法，想知道哪种方法更流畅，或者是否有另一种更好的方法更流畅。

我的第一个解决方案

创建一个我导入到我的反应视图中的类，该类处理套接字连接并在套接字响应时更新我的​​存储。该类可能看起来像这样：

import Flux from '../flux'
import io from 'socket.io-client'

export default class Socket {

    constructor() {

        this.socket = null;
        this.token = null
    }

    connect = (token) => {
        this.token = token;
        this.socket = io('http//192.168.0.144:3000');
        this.listen()
    };

    listen = () => {
        this.socket.on('connect', this.socket.emit('auth', this.token));
        this.socket.on('state', this.stateChanged)
    };

    stateChanged(state) {

        Flux.getActions('sockets').updateState(state, this.token);
    }
}

从我的反应来看：

import React from 'react'
import Flux from '../flux'
import Socket from './SocketClass'

let _ = React.createFactory;
let div = _('div');
let h1 = _('h1');

export default
class Dashboard extends React.Component {

    constructor() {

        super();

        this.state = {
            tokens: []
        }
    }

    componentWillMount() {

        Flux.getStore('users').on('change', this._storeUpdated);
        Flux.getActions('users').update();
    }

    render() {

        let connections = Flux.getStore('sockets').getStates().forEach(state => {
            h1({},
                state
            )
        });

        return div({},
            connections
        )
    }

    _storeUpdated = () => {

        let tokens = [];
        Flux.getStore('users').getTokens().forEach((token, index) => {
            tokens.push({
                token: token,
                socket: new Socket()
            });
            tokens[index].socket.connect(token)
        });
        this.setState(tokens)
    };
}

注意：此代码只是为了传达想法，尚未经过测试。

我的第二个解决方案

我的第二种方法是做类似的事情，但不是为每个套接字实例化一个新类，而是可以在单个通量存储中处理套接字。像这样的东西：

import { Store } from 'flummox'
import io from 'socket.io-client'

export default
class Socket extends Store {

    constructor(flux) {


        super();

        this.state = {
            sockets: []
        }
    }

    connect(token) {

        let sockets = this.state.sockets;
        sockets.push({
            token: token,
            socket: io('http://192.168.0.144:3000'),
            state: null
        });
        this.state.sockets.forEach((socket, index) => {
            if (socket.token == token) {
                socket.on('connect', socket.socket.emit('auth', socket.token));
                socket.on('state', state => {
                    let sockets = this.state.sockets;
                    sockets[index].state = state;
                    this.setState({sockets: sockets})
                })
            }
        })
    }

    getStates() {
        return this.state.sockets
    }
}
4

1 回答 1

0

它非常开放，但是我看到（和使用）的所有实现和指南都使存储变得简单（只保存数据并且什么都不做），并且该操作执行登录以访问服务器等。同样，我会在动作中实现，但会在逻辑上将其拆分为动作将使用的不同类。

于 2015-07-19T06:33:43.617 回答