javascript - 使用 WebSockets 的 react 原生应用程序中的架构

Question

我有一个要构建的使用 WebSockets 的 React Native 应用程序。我有一个用 JavaScript 编写的 WebSocket 库，我只是在这个项目中重新使用它，这太棒了。

我的问题是，作为 React/React Native 的新手，设置和维护通过 WebSocket 的所有流量的最佳实践是什么？

最初我的想法是在主 App 组件中创建 websocket，如下所示:

export default class App extends Component {

  constructor(props) {
    super(props);
    this.ws = new WebSocket;
  }

  componentWillMount() {
    console.log(this.ws);
  }

  render() {
    console.log("We are rendering the App component.....");

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Hello, world</Text>  
      </View>
    );
  }
}

实际的 WebSocket 类将包含所有相应的连接处理:

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

我的问题是，因为来自 WebSocket 的数据将适用于通过 React Native 应用程序中的许多组件的状态，但它不是一个将扩展 React.Component 的类，我在 WebSocket 中不与 Redux 交互吗？类(class)？我是否将所有 WebSocket 连接处理移至 App组件并在那里向 Redux 发送操作？

这里实例化我的 WebSocket 的常见模式是什么？类并确保其中的所有流量都正确传递给 Redux，以便所有组件的状态都能正确汇集？

Answer 1

您可以为 WebSocket 创建专门的类(class)并在任何地方使用它。这是简单、简洁和清晰的方法。此外，您将把所有与 websocket 相关的东西都封装在一个地方!如果你希望你甚至可以从这个类中创建单例，但总体思路是这样的:

class WS {
  static init() {
    this.ws = new WebSocket('ws://localhost:5432/wss1');
  }
  static onMessage(handler) {
    this.ws.addEventListener('message', handler);
  }
  static sendMessage(message) {
    // You can have some transformers here.
    // Object to JSON or something else...
    this.ws.send(message);
  }
}

您只在 index.js 的某处运行了 init或 app.js :

WS.init();

现在，您可以从任何应用层、任何组件、任何地方松散地发送消息:

WS.sendMessage('My message into WebSocket.');

并从 WebSocket 接收数据:

WS.onMessage((data) => {
  console.log('GOT', data);
  // or something else or use redux
  dispatch({type: 'MyType', payload: data});
});

所以你可以在任何地方使用它，甚至在任何 Action 或其他地方的 redux 中!