在助焊剂应用程序中处理套接字连接

Question

情况：

我正在使用 Reactjs and Flummox that will connect to a simple socket server using Socket.io 构建 Web 服务。它将需要在他们的仪表板上跟踪每个用户的多个连接，并且想知道执行此操作的最佳方法。每个用户可以有多个令牌，每个令牌都与一个套接字连接相关联。我有两种方法，想知道哪种方法更灵活，或者是否有另一种更好的方法更灵活。

我的第一个解决方案

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

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

注意：这段代码只是为了让大家理解，还没有经过测试。

我的第二个方案

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

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

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

在助焊剂应用程序中处理套接字连接

Handling socket connections in a flux application

reactjs

flux

flummox