Question

情况：

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

我的第一个解决方案

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

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

注意：此代码仅用于了解并且尚未经过测试。

我的第二个解决方案

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

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

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

处理焊剂应用中的插座连接

1 个答案: