在现代的 Web 开发中，使用自动化构建工具和应用程序状态管理库已经成为常态。而 mobx-websocket-store 是一个使用方便的 npm 包，可用于在前端应用程序中轻松集成 WebSocket 和 MobX，提供最先进的数据状态管理方式，并使前端应用程序更具响应性和扩展性。
安装
要使用 mobx-websocket-store，您需要在您的应用程序中安装它。在终端中使用以下命令：
npm install --save mobx-websocket-store
使用
WebSocketStore
为了在你的应用程序中使用 WebSocket，你需要实例化 WebSocketStore。由于 WebSocketStore 是一个类，所以你需要通过 new 操作符来实例化对象。在构造函数中，您可以传递用于连接 WebSocket 服务器的 URL 和一个可选的配置对象。
import { WebSocketStore } from 'mobx-websocket-store';
const wsUrl = 'ws://localhost:8000';
const wsConfig = { reconnectInterval: 1000 };
const wsStore = new WebSocketStore(wsUrl, wsConfig);
wsStore.connect(); // 连接 WebSocket 服务器您可以传递一些可选的配置对象来使用 WebSocketStore。下面是支持的选项：
| 选项名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
autoConnect |
Boolean |
false |
断线自动重连WebSocket服务器 |
reconnectInterval |
Number |
3000 |
重连尝试之间的时间间隔（以毫秒为单位） |
reconnectDecay |
Number |
1.5 |
断线后每次等待的时间的乘数 |
maxReconnectAttempts |
Number |
Infinity |
重连尝试的最大次数 |
maxIncomingFragmentSize |
Number |
65536 |
入站数据包的最大大小，以字节为单位 |
fragmentOutgoingMessages |
Boolean |
true |
分段处理大型外向消息以避免过多的内存占用。使用时建议设置为 false。 |
debug |
Boolean |
false |
打开调试模式，输出更多的日志 |
WithWebsocket
然后，使用 withWebsocket 高阶组件将您的组件连接到 WebSocketStore 并在组件中启用标准代码配置。
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------
-----------------------
----- ----------- ------- --------------- -
------------------- -
----- - -- - - -----------
------------------------ ----- ----------- ---- -- ---- --------- --
-
-------- -
------ ----------- -------------
-
-withWebsocket HOC 接受一个 WebSocketStore 对象，并将其作为 ws 属性传递给包装组件。这意味着您可以使用 ws 属性来访问 WebSocketStore 的所有 WebSocket 相关方法和属性，比如 send 消息， 或者监听 onMessage 事件。
WebSocketStore API
WebSocketStore 类具有以下公共方法和属性：
| 名字 | 类型 | 描述 |
|---|---|---|
| connect() | Function |
连接到 WebSocket 服务器 |
| disconnect() | Function |
从 WebSocket 服务器断开连接 |
| reconnect() | Function |
尝试重新连接到 WebSocket 服务器 |
| send(message) | Function |
发送一个 WebSocket 消息，参数为一个字符串 |
| onOpen(callback) | Function |
注册 WebSocket 服务器连接后的回调函数 |
| onClose(callback) | Function |
注册 WebSocket 服务器连接断开后的回调函数 |
| onMessage(callback) | Function |
注册接收 WebSocket 服务器发送的消息的回调函数 |
| onError(callback) | Function |
注册出现错误时执行的回调函数 |
| status | String |
WebSocket 连接状态。取值可以是：CONNECTING, OPEN, CLOSED |
| connected | Boolean |
WebSocket 是否连接成功 |
| ws | WebSocket |
实际 WebSocket 对象 |
示例代码
这是一个使用 mobx-websocket-store 的示例应用程序。
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ------------- - ---- -----------------------
----- ----- - ----------------------
----- -------- - - ------------------ ---- --
----- ------- - --- --------------------- ----------
-----------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- --
--
------------------ - ------------------------------
-
------------------- -
----- - -- - - -----------
------------------------ ----- ------------- ---- -- ------
--------------------------------- -- -----------
-
---------------------- -
----- - ----- ---- - - --------------------
-- ----- --- -------------- -
---------------
--------- ----
---
- ---- -- ----- --- ------------- -
----- - -------- - - -----------
---------------
--------- ------------- -----
---
-
-
-------- -
----- - -------- - - -----------
------ -
-----
------ ---- --------
------------ ------------------- --
--------------- --
------
--
-
-
------ ------- ----MessageList.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------------ -
----- - -------- - - ------
------ -
----
----------------------- ------ -- -
--- --------------------------
---
-----
--
-NewMessageForm.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- -------------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- --
--
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
----- ------- - -------------------
--------------- ------- ---
-
------------------- -
-----------------------
----- - ------- - - -----------
----- - -- - - -----------
------------------------
----- -------------
----- -------
----
--------------- -------- -- ---
-
-------- -
------ -
----- -----------------------------
------ ----------- ---------------------------- -------------------------- --
------- ---------------------------
-------
--
-
-这个示例包含一个简单的聊天程序，它能够从 WebSocket 服务器获取消息列表并允许用户发送新消息。该应用程序还使用了 MobX 来管理组件之间的状态和数据流。
结论
使用 mobx-websocket-store 是开发高性能、可维护性的现代 Web 应用程序的好方式。它允许前端应用程序轻松地使用 WebSocket 和 MobX，提供了最先进的通过数据状态管理方式，让您的应用程序更具有响应性和扩展性。实际上，本教程只是介绍了 mobx-websocket-store 的基础功能，更多功能有待探索。我希望这篇文章可以为您提供一个良好的起点，了解如何在前端应用程序中使用 mobx-websocket-store。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4881e8991b448ebcd1