前言
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，可用于实现实时通信，例如在线聊天、多人协作等功能。而 Deno 则是一个新兴的运行时环境，用于运行 JavaScript 与 TypeScript，它提供了一种更加安全、稳定和可维护的编程模式。本文将介绍如何在 Deno 中使用 WebSocket 实现在线互动画板。
环境搭建
在开始之前，你需要安装 Deno 和一个使用 WebSocket 的 JavaScript 库，这里我们使用 ws 库。可以使用以下命令进行安装：
deno install --allow-read --allow-net --unstable https://deno.land/x/deno_install/deno_install.ts
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
----- ------ - --- -------- ----- ---- ---
------------------- ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
-----------------
-----
----------
----------
--------
--
----------------------
------------ ----- -- -
--------------------- -- ------ ---------- ---------
----- ------------- ------- --- ---
---
-
-
----- -------- ----------------------- ----------- ------------- -
------------------- ------------
--- ----- ------ ----- -- ------- -
-- ------- ----- --- --------- -
------------------- ----------- -------
- ---- -- ------ ---------- ----------- -
------------------- -------- --------- -------
-
-
-我们监听到 /ws 路径的 WebSocket 连接，并且在连接成功后打印一条日志。然后我们进入 handleWebSocket 函数中，在该函数中可以处理 WebSocket 的各种事件。
客户端代码
由于本文的重点是在 Deno 中使用 WebSocket 实现在线互动画板，因此我们不讨论如何在浏览器中使用 WebSocket。你可以使用以下示例代码，自行在浏览器中运行并测试：
-- -------------------- ---- ------- --- ------ - --- ------------------------------------ ------------- - -------- -- - ---------------------- ------------ -- -------- ------------------ -------- -- ---------------- - -------- ------- - ---------------------- ----------- ------------ --
实现在线互动画板
我们可以通过在 HTML 中添加一个画布以及一些控制按钮实现在线互动画板。假设我们已经创建了以下 HTML：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ------- -------------
-------
------
------- ----------- ----------- ----------------------
-----
------- -------------------------
------ ------------ ---------- ----------------
------ ------------ --------- ------- -------- ----------
------
------- -------------------------
-------
-------然后我们需要用 JavaScript 编写与服务器进行通信的代码。我们使用一个名为 draw 的数组来保存绘画数据，并使用 HTML5 Canvas API 将其渲染到画布上。我们可以通过事件监听器来监听 mouseup、mousedown、mousemove 事件，并以此收集用户的绘画数据，并将其发送到服务器端。
-- -------------------- ---- -------
--- ---- - ---
----- ------ - ----------------------------------
----- --- - ------------------------
--------------- - ----------
------------- - --
--- --------- - ------
------------------------------------ -------
------------------------------------ ----------
---------------------------------- ------
-------- ------------ -
--------- - -----
----- - - --------------
----- - - --------------
----------- ------ -------- -- - ---
-----------
-
-------- --------------- -
-- ------------ -------
----- - - --------------
----- - - --------------
----------- ------ ------- -- - ---
-----------
----------------
--------------------------- - ----- ---------------- - ------
------------- ---
-------------
-
-------- ------ -
--------- - ------
----------- ------ ------ ---
-----------
-
-------- ---------- -
-- ------------------ --- --------------- -
----------------------------------
---- - ----------------- - ----
-
-
----- ----------- - ---------------------------------
------------------------------------- -------------
-------- ------------- -
---- - ---
-----------
---------------- -- ------------- ---------------
-
----- ----------- - ---------------------------------
-------------------------------------- -------------
-------- ------------------ -
--------------- - -------------------
-
----- ---------- - --------------------------------
------------------------------------- ------------
-------- ----------------- -
------------- - -------------------
-最后，我们需要在服务器端响应并处理客户端发来的消息，并将消息转发给所有连接的客户端。我们可以修改 handleWebSocket 函数来实现此操作：
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------------------
------ - ---------------- ---------------------- --------- - ---- ----------------------------------
----- ------ - --- -------- ----- ---- ---
------------------- ------- -- ---- -------
--- -------- ----------- - ---
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
-----------------
-----
----------
----------
--------
--
-------------- -- -
---------------------
------------------------
--
------------ ----- -- -
--------------------- -- ------ ---------- ---------
----- ------------- ------- --- ---
---
-
-
----- -------- ----------------------- ----------- ------------- -
------------------- ------------
--- ----- ------ ----- -- ------- -
-- ------- ----- --- --------- -
------------------- ----------- -------
-----------------
- ---- -- ------------------------------ -
------------------- ---------
------- - ------------------ -- - --- --------
-
-
-
-------- ---------------- -------- ---- -
--- ------ ------ -- -------- -
-- ------------------ --- --------------- -
-------------------
-
-
-结语
本文介绍了如何在 Deno 中使用 WebSocket 实现在线互动画板，并提供了相应的示例代码，希望能对读者有所帮助。在实际项目中，应根据需求修改并完善本文的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9f35be46428fe9e1d49dd
