Socket.io 是一个基于 WebSockets 的 JavaScript 库，可以实现实时的双向通信。除了支持文本数据外，Socket.io 还支持传输二进制数据，本文将介绍 Socket.io 如何实现带二进制数据的通讯。
为什么需要传输二进制数据？
在 Web 应用程序中，通常需要传输图片、视频、音频等二进制数据。如果使用传统的 XMLHttpRequest 对象进行 AJAX 请求，需要将这些二进制数据以 Base64 的形式编码再发送到服务器上，然后服务器再将这些数据解码。这种方式会导致性能问题，因为数据需要被编码和解码两次，同时也会消耗额外的网络带宽。
而通过 WebSocket 进行通讯可以避免这个问题，因为 WebSocket 可以直接传输二进制数据，避免了编码和解码的过程，同时也节省了网络带宽。
Socket.io 如何实现传输二进制数据？
Socket.io 通过 Blob 类型和 ArrayBuffer 类型来支持二进制数据的传输。Blob 类型表示不可变的二进制数据，而 ArrayBuffer 类型表示可变的二进制数据。
发送二进制数据
要发送二进制数据，可以使用 Blob 和 ArrayBuffer 类型作为数据的实参，如下所示：
-- -------------------- ---- ------- -- -- ---- -- ----- ---- - --- ------------ - ----- ----------- --- ---------------------- ------ -- -- ----------- -- ----- ------ - --- ------------------------- ----- ---- - --- ------------------- --- ---- - - -- - - ------------ ---- - ------- - -------- - ---------------------- --------
接收二进制数据
要接收二进制数据，需要在接收数据的事件处理程序中，将数据类型设置为 ArrayBuffer，例如：
-- -------------------- ---- -------
-------------------- ------ -- -
-- -- ----------- --
-- ----- ---------- ------------ -
----- ---- - --- -----------------
-- -------
- ---- -
-- ------
-
---示例代码
以下是一个基于 Socket.io 的聊天室应用，可以发送文本和图片消息。
服务器端代码
-- -------------------- ---- -------
----- --- - ---------------------
----- ------ - ----------------------------------
----- -- - -----------------------------
----- ---- - ----------------
------------ ----- ---- -- -
--------------------------------- ---------------
---
------------------- -------- -- -
-------------- ---- ------------
-------------------- ------ -- -
-- ----- ---------- ------------ -
------------------- ---- -----------
-- -------
- ---- -
----------------- ---- -----------
-- ------
-
---
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
-------
------
------ ----------- -------------------
------- ------------- --------------------- -------------
------ ----------- ----------------
------- ------------- ----------------------- ---------------
--- -------------------
------- ---------------------------------------
--------
----- ------ - -----
----- ----------- - ------------------------------------
----- ------------ - -----------------------------------------
----- ---------- - ---------------------------------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
------------------ - -- -- -
----- ------- - -------------------
---------------------- ---------
--------------------- -- ------ - ------- - --------
------------------ - ---
--
-------------------- - -- -- -
----- ---- - -------------------
-- ------- -
------ ------------- ------ - -------
-
----- ------ - --- -------------
------------- - ------- -- -
----- ------ - --- --------------------------------
---------------------- --------
--------------------- -- --------- ------ - ------------------- - ----------
--
---------------------------
--
-------------------- ------ -- -
-- ----- ---------- ------------ -
------------------- ---- -----------
-- -------
- ---- -
----------------- ---- -----------
--------------------- -- ------ - ---- - --------
-
---
---------
-------
-------总结
Socket.io 通过 Blob 和 ArrayBuffer 类型来支持二进制数据的传输，可以避免直接传输至服务器时需要 Base64 编码和解码的额外开销。在开发中，如果需要传输图片、音频或视频等二进制数据，WebSocket 的使用将会事半功倍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc9fb15ad90b6d042a0cc3