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

Posted 2023-02-16

【中文标题】跨组件和存储使用的单个 websocket 连接

【英文标题】：Single websocket connection to use across components and store

【发布时间】：2017-09-27 03:57:16

【问题描述】：

我有一个 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 连接，以便我可以将它与我的所有商店和组件一起使用？

【参考方案1】：

您将创建一个 websocket 服务类，该服务类将传递给每个需要访问 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) 将一个方法添加到特定的商店，然后从你的组件中调用这个方法。

希望这能回答你的问题。