WebSocket 是一种实时双向通信协议，能够建立客户端和服务器之间的全双工通信连接，相比传统的 HTTP 协议，它具备更高效、更可靠的传输性能，使得实时通信变为可能。而 Socket.io 是一种基于 WebSocket 的实现，它封装了 WebSocket，提供了一种更为简便的方式来进行实时通信，不过在某些情况下，使用 WebSocket 代替 Socket.io 能够获得更好的性能和可控性。本文将介绍如何在前端中使用 WebSocket 替代 Socket.io 进行实时通信。
WebSocket 和 Socket.io 简介
WebSocket 协议是 HTML5 中新增的一种协议，其使用 WebSocket API 来提供实时双向通信，建立连接之后，双方可以随时向对方发送消息，而无需在每次数据传输时都进行建立或者关闭请求，这使得应用之间的关联变得更加紧密、灵活。
Socket.io 在 WebSocket 基础上进行了封装，提供了一种方便的 API 来进行实时通信。Socket.io 抽象了 WebSocket 协议，使得开发者可以轻松地使用实时通信，而无需考虑 WebSocket 的规范和实现细节。除此之外，它还能够兼容多种浏览器，包括旧版的浏览器，以及支持多种传输方式，如 WebSocket、longpolling、iframe和JSONP 等。
WebSocket 的实现
在使用 WebSocket 之前，需要先检查当前浏览器是否支持 WebSocket 协议。如下：
if ('WebSocket' in window) {
// 可以使用 WebSockets 收发数据
} else {
alert('This browser does not support WebSockets.');
}当然，借助 polyfill 库，可以使得 WebSocket 在旧版浏览器中也能够使用。
WebSocket 的创建和传输都是异步的过程，因此需要使用事件监听器来监控创建、关闭、接收消息等过程。如下：
-- -------------------- ---- ------- -- -- --------- ---- ----- -- - --- --------------------------------- ---------- --------------------------- ------- -- - ---------------------- -- --------- --------- -- -- -------- ------------------------------ ------- -- - -------------------- ---- ------- -- ------------ --- -- -------- ---------------------------- ------- -- - ------------------------- ---- --------- --------- --- -- -------- ---------------------------- ------- -- - ---------------------- ------ -------- ---
以上是 WebSocket 建立连接时的常规操作，接下来，将介绍 WebSocket 的发送和接收消息。
发送消息
WebSocket 实例提供了 send() 方法，用于向 WebSocket 服务器发送数据。send() 方法可以接受字符串类型的数据。
ws.send('Hello WebSocket Server!');接收消息
WebSocket 实例提供了 addEventListener() 方法，用于监听特定事件。当 WebSocket 服务器向客户端发送消息时，会由 message 事件通知客户端。在 WebSocket 实例中，message 事件只会发送被转换为二进制数据的数据块。
WebSocket 组件的实现
下面，在 Vue.js 应用中实现 WebSocket 组件。
该组件通过 props 属性接收 WebSocket URL 和消息传递事件。其中，即调用了 WebSocket 对象本身的 open、message、close、error 事件，以及 实现了runConnection()和sendMsg()两个函数，分别用于连接WebSocket和发送消息。
-- -------------------- ---- -------
----------
-----
------------------
-- ---------------- ------ -- --------- ----------------------------
------
-----------
--------
------ ------- -
------ -
---- -------
------------- -------
--
------ -
------ -
------ ------------
--------- ---
--- -----
-
--
--------- -
---------------------
--
--------------- -
----------------
--
-------- -
--------------- -
------- - --- --------------------
-------------------------------- ------- -- -
---------------------- -- --------- ---------
---
------------------------------------------- ------- -- -
-------------------- ---- ------- -- ------------
-------------------------------
---
--------------------------------- ------- -- -
------------------------- ---- --------- ---------
---
--------------------------------- ------- -- -
---------------------- ------ --------
---
--
--------- -
-- ------------------- --- --------------- -
----- --- - ---- ---- --------- -----------
------------------
------------------- ---- -------- ---------
-
--
--
--
---------在父组件中，可以通过 props 属性传入实时通信的 URL 和消息传递事件。
-- -------------------- ---- -------
----------
-----
------------------- ------------------------- ---------------------- --
------
-----------
--------
------ ------------------ ---- ---------------------------
------ ------- -
----------- -
-------------------
--
--
---------总结
本文主要介绍了如何使用 WebSocket 替代 Socket.io 进行实时通信，并给出了实现该功能的示例代码，我们可以发现，WebSocket 和 Socket.io 都是用来实现实时通信的协议，但是通过本文的介绍，我们可以了解到 WebSocket 能够更好地发挥性能优势和可控性，因此在一些场景下，选择原生的 WebSocket 提供 API 实现实时通信的方案会更加灵活和高效，而 Socket.io 则会更方便和兼容不同浏览器、实现的功能也更全面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f8ea87d4982a6eb91e81a