前言
在现代的前端开发中，Websocket 是一种非常常见的技术。socket-mansion 是一个基于 Websocket 的 npm 包，它提供了一种非常便捷的方式来搭建前端与后端之间的 WebSocket 连接，从而实现实时通信数据传输。
本文将会对 socket-mansion 的基本使用方法进行详细介绍，包含如何在前端使用 socket-mansion 创建 WebSocket 连接，如何定义自己的消息协议，以及如何在前端代码中使用 socket-mansion 对服务器发送消息。值得注意的是，本文假定您已经安装并熟悉 Node.js。
安装 socket-mansion
在使用 socket-mansion 搭建前端与后端之间的 WebSocket 连接之前，我们需要先安装 socket-mansion。在命令行中运行以下命令即可：
npm install socket-mansion
安装完成之后，就可以在您的项目中引入 socket-mansion 了。
创建 WebSocket 连接
创建 WebSocket 连接是 socket-mansion 的第一步。创建 WebSocket 连接的方法是通过创建 SocketClient 实例来实现的。
首先，我们需要从 socket-mansion 引入 SocketClient 类。在您的项目中添加以下代码：
import { SocketClient } from "socket-mansion";接下来，我们需要定义自己的 WebSocket 连接参数 options。options 可以定义以下参数：
- url (string): WebSocket 连接的 URL。
- protocol (string | string[]): WebSocket 连接的协议名称或名称数组。
- autoReconnect (boolean): 是否支持自动重连。默认为 true。
- reconnectInterval (number): 重连时间间隔，单位毫秒。默认为 1000。
- logLevel (string): 输出日志级别。可选值为 "log", "warn", "error"。默认为 "error"。
我们可以使用以下代码来创建新的 SocketClient 实例：
const options = {
url: "ws://localhost:3000",
autoReconnect: true,
logLevel: "warn"
};
const socketClient = new SocketClient(options);由此，我们就成功创建了一个新的 SocketClient 实例，并建立了一个 WebSocket 连接。其中，url 参数指定了我们的 WebSocket 服务端地址。
定义消息协议
在与 WebSocket 连接建立成功后，我们需要定义正确的消息协议，以与后端进行通信操作。对于这个问题，我建议大家考虑两种方式。
第一种方式是使用原生的 WebSocket 手动发送 JSON 格式的消息。这种方式比较原始，需要我们手动将 JavaScript 对象转换为字符串，并检查消息是否符合我们自己所定义的格式，需要写大量的重复代码。但这种方式的最大优势也在于它的灵活性。
第二种方式是使用 socket-mansion 提供的事件/监听器方法来完成消息协议的代码。这种方式不仅能够消除大量重复的代码和可能出错的过程，同时还能封装协议细节，提供更好的代码可维护性和健壮性。
在本文中，我们将钟情于第二种方式。使用 socket-mansion 的事件/监听器方法，我们可以使用 SocketClient 实例向服务器发送消息，服务器通过注册相应的事件监听器来接收消息。
首先，我们需要定义与后端进行交互的请求消息协议。这个协议包含了我们要发送给服务端的消息名字name和携带的json数据data，我们可以定义一个事件监听器来“添加该数据”并发送给socket-mansion。
-- -------------------- ---- -------
--- ------ - -
------------- -------- -- -
------------------------ ---- ----------------------------
------------------------ -------- ------ -
-- ----
---
-
--在服务端，我们已经定义了服务器的逻辑，接下来让我们在前端代码中定义发送消息的协议。
首先，我们可以定义一个 send 函数来向服务器发送消息。使用 SocketClient 的 sendMessage 方法来指定要发送的消息名字和数据：
function send(name, data) {
socketClient.sendMessage(name, data);
}在我们的应用程序中，我们可以在用户点击“发送消息”按钮时调用该函数，并将消息的名称 name 和携带的数据 data 传递给函数。
本例中假定用户会输入一个 聊天内容 的信息，我们可以先定义好聊天内容的输入框input和发送按钮button，稍后使用它们来向服务端发送消息。
<input type="text" id="message" placeholder="请输入聊天内容"> <button onclick="sendMessage()">发送</button>
然后我们就可以实现 sendMessage 函数了：
-- -------------------- ---- -------
-------- ------------- -
----- ------------ - -----------------------------------
----- ------- - -
--------- --- --- -- -------
-------- ------------------ -- ----
--
------------------- ---------
-- -------
------------------ - ---
-在 send 函数中，我们 call sendMessage 方法并将消息的名称 "sendMessage" 和携带的消息对象传递给该方法。由此，我们就可以做准备开始与服务端进行通信了。
接收来自服务器端的消息
在与服务端通信过程中，并不仅仅是单向的信息发送。socket-mansion 也提供了非常方便的监听器/事件的机制，允许我们在接收到服务端发送来的消息时采取相应的行动。
要实现此功能，我们可以使用 SocketClient 类的 onMessage 方法。onMessage 方法允许我们注册一个事件监听器，以实时接收并处理从服务端发送的数据。
// 定义 onMessage 方法，用于接收来自服务器端的消息
socketClient.onMessage((message) => {
console.info(`received message: ${JSON.stringify(message)}`);
});在上面的代码中，我们使用 SocketClient 的 onMessage 方法注册了一个消息监听器。当我们从服务器端收到消息时，监听器将被触发，并将消息传递给回调函数。在回调函数中，我们可以对消息进行处理（例如，将消息显示在聊天应用程序中）。
完整示例代码
最后，让我们来看一下完整的实例代码：
-- -------------------- ---- -------
-- -- ------------ -
------ - ------------ - ---- -----------------
-- -- ------- - ------------ --
----- ------- - -
---- ----------------------
-------------- -----
--------- ------
--
----- ------------ - --- ----------------------
-- -------
-------------------------------- -- -
---------------------- -------- -----------------------------
---
-- -- ---- --
-------- ---------- ----- -
------------------------------ ------
-
-- -- ----------- --
-------- ------------- -
----- ------------ - -----------------------------------
----- ------- - -
--------- --- --- -- -------
-------- ------------------ -- ----
--
------------------- ---------
------------------ - ---
-到此为止，我们已经完成了使用 socket-mansion 完成的前后端 WebSocket 通信的最基本的代码。在实际的应用程序中，我们应该根据自己的实际情况进一步定制化该代码。例如，绑定更多的事件监听器以处理更多的业务逻辑，并处理各种异常情况，以使我们的 WebSocket 应用程序更加鲁棒。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9a81e8991b448e7593