前言
在现代化 Web 开发中，跨域通信已经变得越来越普遍。WebSocket 可以实现基于事件的双向通信，是一种跨域通信的有效方法。而 Deno 则是一种新兴的运行时环境，得益于其内置模块管理器、安全性以及 TypeScript 支持等特性，相比 Node.js 具有更多的优势。在本文中，我们将介绍如何在 Deno 中使用 WebSocket 进行跨域通信。
WebSocket 概述
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。在建立连接后，服务器和浏览器/应用程序可以互相发送消息，这些消息使用事件驱动的方式实现。WebSocket 还具有很多可扩展性的特性，例如心跳检测和流传输等。
使用 Deno 和 WebSocket 进行跨域通信
在 Deno 中使用 WebSocket 的基本流程如下：
- 引入内置的 WebSocket 模块。
- 建立 WebSocket 连接并监听连接事件，处理连接事件的回调函数将接收到 WebSocket 实例对象。
- 对接收到的消息进行处理，并向客户端发送消息。
下面是一个使用 Deno 和 WebSocket 进行跨域通信的简单示例：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ----------- --------------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
------------------- ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- ----------------- -
-----------------
----- ---------
-------- ------------
---------- ------
---------- ------
----------------- -- -
--------------------- ---- --------
---
-
-在上面的代码中，我们首先引入了 serve 和 acceptable 函数，它们分别来自 Deno 的 http/server 和 WebSocket 模块。然后我们使用 serve 函数创建了一个简单的 HTTP 服务器，并在控制台输出了服务器已经启动。接着使用 for await 循环监听所有的客户端请求。如果请求的是 WebSocket 连接，那么我们就使用 acceptWebSocket 函数创建一个新的 WebSocket 连接，并向客户端发送一条简单的消息。注意，在 Deno 中我们使用 Promise 配合 .then 方法来处理异步函数的返回值。
跨域通信的实现
跨域通信的实现有两种方式：JSONP 和 WebSocket。JSONP 通常用于传输小数据量，而 WebSocket 则适用于传输大量数据或需要保持长时间连接的情况。下面我们将介绍如何使用 WebSocket 实现跨域通信。
首先我们来看客户端代码，它可以通过 JavaScript 代码创建一个新的 WebSocket 连接，并监听 message 事件以获取来自服务器的消息：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
-------
------
--------
----- ------ - --- ---------------------------------
------------------------------- ------- -- -
---------------------- ---------
------------------ ---- ----------
---
---------------------------------- ------- -- -
-------------------- ---- ------- ----------------
---
-------------------------------- ------- -- -
---------------------- ---------
---
---------
-------
-------在上面的代码中，我们首先使用 new WebSocket 函数创建一个新的 WebSocket 对象，然后监听 open 事件，该事件将在 WebSocket 连接建立时触发。我们在 open 事件的回调函数中发送一条简单的消息给服务器。接着我们还监听了 message 和 close 事件以处理来自服务器和断开连接的情况。
接下来我们来看服务器端的代码，它需要监听客户端的连接请求，建立 WebSocket 连接，并且在接收到客户端的消息后回复消息给客户端。
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ -
-----------
----------------
----------------------
- ---- ----------------------------------
----- ------ - ------- ----- ---- ---
------------------- ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- ----------------- -
-----------------
----- ---------
-------- ------------
---------- ------
---------- ------
--
----------- ----------- -- -
---------------------- ------------
--- ----- ------ ----- -- ---------- -
-- ------- ----- --- --------- -
-------------------- ---- ------- -----------
----------------------- --------- -----------
- ---- -- ------------------------------ -
---------------------- ---------
-
-
--
------------ -- -
------------------------ ---------- ------- ---------
---
-
-在上面的服务器端代码中，我们也是首先使用 serve 函数创建一个简单的 HTTP 服务器。然后在 for await 循环中监听所有的客户端连接请求。如果请求的是 WebSocket 连接，我们就使用 acceptWebSocket 函数来创建一个新的 WebSocket 连接。在 then 方法中，我们设置了一个 WebSocket 对象的迭代器，然后在循环中根据不同类型的事件做出不同的处理。具体来说，如果是字符串类型的事件，说明接收到了客户端的消息，则我们将这条消息输出到控制台并使用 send 方法将一个新的消息回复给客户端。如果事件类型为 isWebSocketCloseEvent，说明客户端断开了连接，则我们直接输出一条简单的信息到控制台。
总结
WebSocket 是一种有效的跨域通信方法。在 Deno 中，我们可以很方便地使用内置的 WebSocket 模块来实现 WebSocket 通信。在本文中，我们介绍了使用 Deno 和 WebSocket 进行跨域通信的基本方法，并且提供了一个简单的示例。我们希望这篇文章可以帮助你更好地了解 WebSocket 以及在 Deno 中如何使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e243595b1f8cacd5d34f8