在前端开发中，我们需要经常和后端进行接口通信以获取数据。而 WebSocket 技术，则可以让我们实现实时双向通信，使得前端页面能够在数据更新时主动获取最新的信息。在使用 WebSocket 技术时，我们常常需要将 JavaScript 对象序列化为 JSON 格式进行传输。而 npm 包 json-ws，则是一个方便的工具，可以帮助我们在 WebSocket 中进行 JSON 序列化和反序列化，使得数据传输更加简单高效。
安装
使用 npm 包管理工具进行安装：
npm install json-ws
使用
创建服务器
首先，我们需要创建 WebSocket 服务器。可以使用 Node.js 的 ws 模块来创建：
-- -------------------- ---- ------- ----- --------- - -------------- ----- ------ - --- ------------------ ----- ---- --- ----------------------- -------- -- - ------------------- ------------- -------------------- --------- -- - -- ---------- --- ------------------ -- -- - ------------------- ---------------- --- ---展开代码
进行消息传输
在服务端的 connection 监听事件中，我们可以监听来自客户端发送的消息。此时，我们可以使用 json-ws 包中提供的 jsonParse 方法来将接收到的消息进行反序列化：
-- -------------------- ---- ------- ----- - --------- - - ------------------- ----------------------- -------- -- - ------------------- ------------- -------------------- --------- -- - ----- ---- - ------------------- --------------------- ---------- ------ -- ---------- --- ------------------ -- -- - ------------------- ---------------- --- ---展开代码
在客户端发送消息时，我们可以使用 json-ws 包中提供的 jsonStringify 方法将消息进行序列化，再通过 WebSocket 发送出去：
-- -------------------- ---- ------- ----- - ------------- - - ------------------- ----- ------ - --- --------------------------------- ------------------------------- -- -- - ----- ---- - - ---- ----- -- ----- ------- - -------------------- --------------------- --- ---------------------------------- ------- -- - ----- ---- - ---------------------- --------------------- ---------- ------ ---展开代码
深入理解：如何处理循环引用
当我们需要在 WebSocket 中传输包含循环引用的 JavaScript 对象时，使用 JSON.stringify 方法进行序列化会出现错误。而 json-ws 包提供了一种解决方案。
在 json-ws 中，我们可以通过设置 replacer 参数，将循环引用的对象进行替换。在接收到数据时，我们可以通过解析替换后的数据，将循环引用的对象重新还原。
例如，我们有以下循环引用的对象：
-- -------------------- ---- ------- ----- --- - - ----- ------- -- ------------ - - - ----- ------- ------- ---- -- - ----- ------- ------- ---- -- --展开代码
我们可以为 json-ws 包提供一个自定义的 replacer：
-- -------------------- ---- ------- ----- - ------------- - - ------------------- ----- -------- - ----- ------ ----- -- - -- ------ --- ---- -- ------ ----- --- --------- - -- ----------------- - ------ ------------- - ---------------- - ------ ------ -- ----- ------- - ------------------ ----------展开代码
在解析数据时，我们可以使用 json-ws 包中提供的 jsonParse 方法，将字符串还原为对象，并将循环引用的对象重新绑定：
const { jsonParse } = require('json-ws'); const obj = jsonParse(message, (key, value, parent) => { if (value === '[Circular]') { return parent; } return value; });
通过这种方式，我们可以有效地处理循环引用，使得 WebSocket 数据传输更加简单高效。
总结
json-ws 包提供了在 WebSocket 中进行 JSON 序列化和反序列化的便捷方法。我们可以将其用于前端开发中与后端的 WebSocket 通信，从而实现实时双向通信。在处理循环引用时，我们可以通过提供自定义的 replacer 和 reviver 方法，有效地解决此类问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73031
