跨组件和存储使用的单一 websocket 连接

Question

我有一个存储来自服务器的所有数据的 mobx 存储。

// stores.js

class User {
    @observable userInfo = null;
    @observable webSocketConnected = false;
}

class Trend {
    @observable latest_trends = null;
}

我有一个组件可以通过 websockets 将用户输入发送到服务器。

@inject('UserStore') @observer
export default class Editor extends React.Component {
    componentDidMount() {
        socket = new WebSocket(newURL);
    }

    sendText = () => {
        // socket.send(...) and update to the store
    }

    render() {
        return (
            <View style={styles.container}>
                ...
                <TextInput
                    value={this.state.text}
                    ...
                    style={styles.text}/>
            </View>
        )
    }

}

我有另一个组件可以对用户的评论进行投票，我想通过 websockets 更新到服务器。

@inject('TrendStore') @observer
export default class Editor extends React.Component {
    updateComment = () => {
        // socket.send(...)
    }

    render() {
        return (
            <TouchableOpacity onPress={this.updateComment}>
                <Icon/>
            </TouchableOpacity>
        )
    }
}

如何创建一个 WebSocket 连接，以便我可以将它用于我的所有商店和组件？

Answer 1

您将创建一个 websocket 服务 class，该服务将传递给需要访问 websocket 的每个商店的构造函数。在程序的主文件中，您初始化所有存储并将它们提供给组件。

const webSocketService = new WebSocketService();
const userstore = new UserStore(websocketService);
const trendStore = new TrendStore(websocketservice);
const stores = { userStore, trendStore };
...
<Provider {...stores} >
   ...
</Provider>

WebSocketService 可以有像

这样的方法

发送（消息）
registerEventListener（事件，侦听器）

因此，您为每个商店提供了相同的 websocketService 实例。

提示：不要在组件中编写您的发送逻辑或任何其他业务登录。向特定商店添加一个方法，例如 sendMessage(message) 并从您的组件调用此方法。

希望这能回答您的问题。

跨组件和存储使用的单一 websocket 连接

Single websocket connection to use across components and store

websocket

reactjs

react-native

mobx