使用 Socket.io 作为带有 Flux 的 Pub-Sub 系统

Question

我正在尝试在更新数据库时通知客户，以便前端可以向用户呈现正确的状态。我想要的功能是让套接字发送一条消息，该消息将触发应用程序对更新状态发出获取请求。套接字侦听器应该在前端的什么位置？

1)Api-实用程序 2)相关店铺 3)Server-Action Creator

目前，Api-Utils 完成所有从服务器实际获取数据的工作，当检索到数据并通过调度程序通知商店时，会调用 Server-Action-Creator。存储只是保存我们的数据，将其提供给组件，并监听调度程序何时有新的有效负载。

Answer 1

TL;DR;您的客户端套接字侦听器应该是 'dumb' 个侦听器，他们的唯一任务是将接收到的数据传递给操作。使用该数据做什么的逻辑应该在操作中。

套接字侦听器应该在变化之外，并在从服务器接收到数据事件时执行操作。

例如，这是我的client.jsx文件（使用部分伪代码编辑，为了便于阅读），使用Fluxible'srehydrate函数注入建立状态到我的客户端应用程序）：

import Socket from 'socket.io-client';
import BaseClient from './utils/baseClient';

// Fluxible
import {createElementWithContext} from 'fluxible-addons-react';

// Components
import Loading from './components/loadingComponent.jsx';

class Client extends BaseClient {

    sockets() {
        this.socket = Socket();
        this.socket.on('someEvent', (data)=>{
            this.context.executeAction('nameOfSomeAction', data);
        });
    }

    constructor(component) {
        super(component);

        this.app.rehydrate(window.App, (e, ctx)=> {
            this.context = ctx;
            this.sockets();
            React.render(createElementWithContext(ctx), document.getElementById('main'));
        });

    }

}

new Client(Loading);

当从服务器接收到数据时，它会被发送到操作，而操作又决定如何处理该数据（调用第三方 API、分派到存储等）。

使用 Socket.io 作为带有 Flux 的 Pub-Sub 系统

Using Socket.io as Pub-Sub System with Flux

flux

socket.io