在通量应用程序中处理套接字连接

Question

形势：

我正在使用反应和氟莫克斯构建一个web服务，它将使用Socket.io连接到一个简单的套接字服务器。它将需要跟踪每个用户在仪表板上的多个连接，我想知道这样做的最佳方法。每个用户都可以有多个令牌，每个令牌都将与套接字连接相关联。我有两种方法来解决这个问题，我想知道哪种方法更流畅，或者是否还有更好的方法是更流畅的。

我的第一个解决方案

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

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
    }
}

Answer 1

它是非常开放的，但是我看到(和使用)的所有实现和指导原则都使存储变得简单(只保存数据，不做什么什么的)，并且操作做登录来访问服务器等等。同样，我将在操作中实现，但在逻辑上将其划分为一个操作将使用的不同类。