在现代化的 Web 开发中，WebSocket 技术已经成为了一种非常流行的实现实时通信的方式。而 ES10 引入的异步生成器（async generator）则提供了一种更加高效和方便的方式来实现 WebSocket。
什么是异步生成器?
异步生成器是 ES10 中的一个新特性，它可以让我们更加方便地处理异步操作。与普通的生成器不同，异步生成器不仅可以生成值，还可以使用await操作符等待异步操作完成后再继续执行。具体的实现方式可以看下面的示例代码。
async function* myAsyncGenerator() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
yield await Promise.resolve(3);
}使用异步生成器实现 WebSocket
基于异步生成器的 WebSocket 实现方式主要是通过yield操作符来实现异步消息的监听和发送。我们可以定义一个异步生成器来监听来自服务器的消息，然后通过一个异步方法来发送消息到服务器。
-- -------------------- ---- -------
----- --------- -------------------- -
----- ------ - --- ---------------
------------- - -- -- -
---------------------- -- ------------
--
---------------- - ----- -- -
----- ------- - -----------------------
----- --------- - ----- --------
-- ----------- -
---------------------------------------
-
--
-------------- - ----- -- -
------------------------ ------ -----------
--
-------------- - ----- -- -
---------------------- -- ------ ---- ----- ----------------
--
----- ------ -
----- --- --------------- -- ------------------- -------
-
-
----- -------- ---------------------------- -------- -
----- - ------ ---- - - ----- ------------------------------
-- ------- -
-------------------- ----- -----------------------------
----- ---------------------------- ------
-
-在上面的代码中，我们首先定义了一个createWebSocket函数来创建一个监听器，并在其中定义了 WebSocket 的onopen、onmessage、onerror和onclose事件。在onmessage中，我们解析了接收到的消息，并使用yield来使生成器暂停并等待下一个消息或发送下一个消息。在sendMessage函数中，我们使用了异步操作来发送消息，并递归调用自身以保持消息的持续传输。
示例代码
下面是使用异步生成器实现 WebSocket 的示例代码。
-- -------------------- ---- -------
----- --------------- - ---------------------------------------
------ ---------- -
--- ----- ------ ------- -- ---------------- -
--------------------- -------- -----------------------------
-- -------- ------ --- ------- -- --- ------
----- --------------- - - -------- --------------- - - - --------- --
----- ---------------------------- -----------------
-
-----
----- --------- -------------------- -
----- ------ - --- ---------------
------------- - -- -- -
---------------------- -- ------------
--
---------------- - ----- -- -
----- ------- - -----------------------
----- --------- - ----- --------
-- ----------- -
---------------------------------------
-
--
-------------- - ----- -- -
------------------------ ------ -----------
--
-------------- - ----- -- -
---------------------- -- ------ ---- ----- ----------------
--
----- ------ -
----- --- --------------- -- ------------------- -------
-
-
----- -------- ---------------------------- -------- -
----- - ------ ---- - - ----- ------------------------------
-- ------- -
-------------------- ----- -----------------------------
----- ---------------------------- ------
-
-总结
使用异步生成器实现 WebSocket 不仅可以提高代码的可读性和可维护性，而且还可以让我们更加方便地处理异步操作。本文只是介绍了一种基本的实现方式，读者可以根据自己的实际需要进一步优化和改进代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64548315968c7c53b086331d