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服务类，该服务类将传递给每个商店的构造函数，这需要访问websocket。在程序的主文件中，初始化所有商店并将其提供给组件。

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

WebSocketService可以有像

这样的方法

发送（消息）
registerEventListener（event，listener）

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

提示：不要在组件中编写发送逻辑或任何其他业务登录信息。将方法添加到特定商店，如 sendMessage（message），并从组件中调用此方法。

希望这能回答你的问题。

单个websocket连接，用于跨组件和存储

1 个答案: