简介
WebSocket 是一种在 Web 浏览器和 Web 服务器之间建立双向通信的协议。它使得客户端和服务器可以在任意时刻之间直接交换数据，而不需要客户端首先向服务器发起请求。在本文中，我们将使用 Deno 和 WebSocket 实现一个在线画图板，该应用程序将允许多个用户协作并在画布上绘制图形。
设置环境
为了开始本教程，我们需要确保 Deno 和 WebSocket 已经安装并配置好了。如果您还没有安装这些东西，可以按照以下步骤完成配置：
安装 Deno
Deno 是一个现代化的 JavaScript 和 TypeScript 运行时环境，可以在浏览器之外运行 JavaScript 代码。您可以从 Deno 的官方网站 下载和安装最新版本。
安装 WebSocket
我们将使用一个用于 Deno 的 WebSocket 库 deno-ws，它提供了一个简单的 API 接口，方便地建立 WebSocket 连接并使用它们进行通信。您可以通过运行以下命令来安装它：
---- ------- -- ------- ----------------------------------
实现在线画图板
步骤 1：创建一个空白 HTML 文件
首先，我们将创建一个名为 index.html 的空白 HTML 文件，它将扮演我们应用程序的主要界面。
步骤 2：编写基本的样式
接下来，我们将编写 CSS 样式来给我们的画图板一个基本的外观和感觉。
---- - ------- -- -------- -- ----------------- ----- - ------ - ----------------- ----- ------- --- ----- ----- ------- ---- ----- -------- ------ ------------- ----- -
步骤 3：创建一个画布
我们需要使用 HTML5 画布元素作为我们的可绘制区域，让用户在上面绘制图形。
--------- -----
------
------
----- --------------- --
------------- ------- -------------
-------
-- ------ --- ---- --
--------
-------
------
------- ---------------------
-------
-------步骤 4：编写 JavaScript 代码
我们需要在后端中实现三个 WebSocket 事件：
- connection：当有新的客户端连接到服务器时触发，我们将跟踪所有客户端的连接，以便我们可以在画布上绘制图形，并将其广播给其他用户。
- message：当一个客户端发来一条消息时触发，我们将从消息中提取图形数据并在所有已连接客户端的画布上进行绘制。
- close：当一个客户端断开连接时触发，我们将删除它的连接记录，并将其从画布上清除。
让我们来编写我们的 JavaScript 代码：
-- -- --------- -
------ - ---------- ------ - ---- -----------------
-- --------------
----- ----------- - --- -----------------
-- ------ ------------------------ --
--- -------- -------------------------
-- ------ --------- ---
----- ------ - --- -------- ----- ---- ---
-------------------- --------- ------ -- ---- -------
-- ---------------
----------------------- -------- ---- ---------- -
---------------- ---------- --------------
-- -----------
--------------------
-- ---------------
-------------- -------- -- -
----------------------- ---------
-- ----------
-----------------------
---
-- -------------------
---------------- -------- --------- ------- -
--------------------- -------- -------------
-- ---------------------------
----- - ----- ---- - - --------------------
-- ----- --- ------- -
-----------
-------------------
-
---
-- --------------------------
--------
----------------
----- -------
----- ----------------------- -- --------------------- -----------------------
--
--
---
-- --------------------
-------- ---------- ---- -
--------------------
----------------- - -----------
------------------- ------- ---------- -- ------- - ---
---------------
-
-- ----------------
-------- ------------------ ------- -
--- ------ -- -- ------------ -
-----------------
-
-
-- ----------
-------- ------ -
----- ------ - --------------------------------- -- ------------------
------------ - ------------------
------------- - -------------------
------- - ------------------------
----------------- - -------
------------------- -- ------------- ---------------
-
-- ----------------
-------- -------- -
----- ------ - --------------------------------- -- ------------------
------------ - ------------------
------------- - -------------------
----------------- - -------
------------------- -- ------------- ---------------
-
-- -----------------
-------
--------------------------------- --------步骤 5：测试您的应用程序
现在您已经完成了应用程序的全部功能实现，它们应该能够在浏览器中正常运行。您可以通过访问 http://localhost:8080 来使用您的在线画图板应用程序，并在多个浏览器窗口中打开多个实例来测试它是否正常工作。
结论
通过 Deno 和 WebSocket，我们已经能够创建出一个功能完备且高效的在线画图板应用程序。我们已经在本文中演示了如何在 Deno 和 WebSocket 上很容易地编写实现多客户端协作的应用程序。我们想鼓励读者们进一步使用 Deno、WebSocket 等技术，并在此基础上开发出更多更加实用的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b35faddd3a70eb6d22557