通量和 WebSockets

Question

我在我的 Reactjs 应用程序中使用 Flux 和 WebSocket，在实施过程中我遇到了一些问题。

问题：

• 假设我有一组 actioncreator 和一个存储来管理 WebSocket 连接，并且连接是在 actioncreator (open(token)) 中启动的，我应该把我的 conn.emit 放在哪里以及如何让其他操作访问我的连接对象，以便它们可以将数据发送到后端？

• 我是否必须将它作为参数传递给视图中调用的操作（例如TodoActions.create(conn, todo)），还是有更聪明的方法？

Current code is here

我正在使用 ES6 类。

如果我在要点中遗漏了任何必要的内容，请告诉我。

编辑：

这是我迄今为止根据 glortho 的回答炮制出来的：

import { WS_URL } from "./constants/ws";
import WSActions from "./actions/ws";

class WSClient {
    constructor() {
        this.conn = null;
    }

    open(token) {
        this.conn = new WebSocket(WS_URL + "?access_token=" + token);
        this.conn.onopen = WSActions.onOpen;
        this.conn.onclose = WSActions.onClose;
        this.conn.onerror = WSActions.onError;

        this.conn.addEventListener("action", (payload) => {
            WSActions.onAction(payload);
        });

    }

    close() {
        this.conn.close();
    }

    send(msg) {
        return this.conn.send(msg);
    }
}

export default new WSClient();

Answer 1

您应该有一个单例模块（不是存储或动作创建器）来处理打开套接字并引导流量通过。然后任何需要通过套接字发送/接收数据的动作创建者只需要该模块并使用它的通用方法。

这是一个快速而肮脏的未经测试的示例（假设您使用的是 CommonJS）：

SocketUtils.js：

var SocketActions = require('../actions/SocketActions.js');

var socket = new WebSocket(...);

// your stores will be listening for these dispatches
socket.onmessage = SocketActions.onMessage;
socket.onerror   = SocketActions.onError;

module.exports = {
  send: function(msg) {
    return socket.send(msg);
  }
};

MyActionCreator.js

var SocketUtils = require('../lib/SocketUtils.js');

var MyActionCreator = {
  onSendStuff: function(msg) {
    SocketUtils.send(msg);
    // maybe dispatch something here, though the incoming data dispatch will come via SocketActions.onMessage
  }
};

当然，实际上你会做得更好，做不同的事情，但这会让你了解如何构建它。