WebSocket 是一种在 Web 应用程序中实现实时通信的技术，它可以提供基于事件的双向通信机制。Deno 是一个现代的 JavaScript 和 TypeScript 运行时，它提供了一种简单易用的方式来创建 WebSocket 服务器。
在这篇文章中，我将详细介绍如何在 Deno 中使用 WebSocket 实现一个在线投票系统。我将从 WebSocket 服务器的创建开始，一步步构建投票系统的后端，随后再在前端展示。
创建 WebSocket 服务器
首先，我们需要创建一个 WebSocket 服务器，这可以通过在 Deno 中导入 ws 模块来完成。我们可以通过执行以下命令来安装 ws 模块：
---- ------- ----------- ---------- ---------------------------------------------
安装完成后，我们可以创建一个名为 server.ts 的文件，作为 WebSocket 服务器的入口文件。在该文件中，我们可以使用以下代码创建一个 WebSocket 服务器：
------ - ----- - ---- ---------------------------------------
------ - ----------- --------------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
------------------- ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- ----------------- -
-----------------
----- ---------
---------- ------
---------- -----
-------------------------
-
-
----- -------- ------------------- ---------- -
------------------- ------------
---------------- ------- -- -
--------------------- -------- -------------
---
-------------- -- -- -
------------------- ---------------
---
-在上面的代码中，我们使用 serve 函数创建了一个基本的 HTTP 服务器，并使用 acceptable 函数来检测传入的请求是否符合 WebSocket 握手协议。如果是，我们可以使用 acceptWebSocket 函数来处理该连接。在此之后，我们使用 handleWebSocket 函数来处理 WebSocket 对象的所有事件，包括接收到消息和连接关闭。
现在，我们已经创建了一个基本的 WebSocket 服务器，我们可以尝试使用浏览器来连接它。启动服务器之后，我们可以在浏览器中访问 http://localhost:8000，然后打开浏览器的开发者工具，在控制台中可以看到 Client connected 消息。
实现投票系统的后端
现在，我们可以开始实现投票系统的后端了。首先，我们需要定义投票的选项和当前的投票结果。我们可以在服务器初始化时，定义以下变量：
----- ------- - -------- --- ------- --- ------- --- ------- ---- ----- ----- - --- ----------- ----------
在上面的代码中，我们定义了一个名为 options 的数组，该数组包含了所有的投票选项。我们还定义了一个名为 votes 的 Map 对象，该对象将用于存储每个选项的投票结果。Map 对象将使用选项名称作为键，将投票结果存储为值。
接下来，我们需要修改 handleWebSocket 函数来处理投票系统的所有事件。我们的投票系统将有两种类型的消息：
get_options，客户端请求获取投票选项；vote, 客户端向服务器发送投票。
以下是修改过的 handleWebSocket 函数：
----- -------- ------------------- ---------- -
------------------- ------------
---------------- ----- ------- -- -
-- -------- --- -------------- -
----- ---------------------------------
- ---- -
--- -
----- -------------- - ------------------
----- ------ - ------------------------
----- ----- - ----------------- -- --
----------------- ----- - ---
----- -----------------
- ----- -
--------------------- -- ---- --- ------ -------------
-
-
---
-------------- -- -- -
------------------- ---------------
---
-在上面的代码中，如果我们收到一个名为 get_options 的消息，我们将使用 send 函数向客户端发送投票选项。如果我们收到一个名为 vote 的消息，我们将尝试解析选项的索引，并使用 Map 对象将投票结果存储在内存中。最后，我们将使用 broadcastVotes 函数向所有已连接的客户端广播投票结果。
----- -------- ---------------- -
----- ------ - ------------------------------- ------- -- -- ------- ----- ----
----- ------- - -----------------------
--- ------ ------ -- -------- -
----- ---------------------
-
-在 broadcastVotes 函数中，我们将投票结果处理为一个对象数组，并将其作为 JSON 字符串发送给所有已连接的客户端。在 clients 数组中存储所有已连接的客户端对象。
实现投票系统的前端
现在，我们可以开始实现投票系统的前端了。我们将使用 Vue.js 框架来实现简单易用的前端代码。我们可以在终端中执行以下命令来创建一个新的 Vue.js 项目：
--- ------- -- -------- --- ------ ------
在创建完成之后，我们可以使用 npm run serve 命令启动开发服务器，并使用浏览器访问 http://localhost:8080：
-- ------ --- --- -----
启动服务器之后，我们可以开始修改 src/App.vue 文件。首先，我们需要导入 vue-socket.io 功能：
----------
---- ------------------
-------- --- ---- -------- -----------
---- -------------------- --- ---
----------
------
--- -------
--- --------------- ------ -- -------- -------------
-- ------ --
------- ----------------------------------
-- ------------ --
-----
-----
------
-----------
--------
------ ----------- ---- ----------------
------ ------- -
----- ------
------ -
------ -
-------- ---
------ --
--
--
--------- -
---------------------------------
-------------------------- ------- -- -
------------ - --------
---------- - --- ------------------------------
---
------------------------ ----- -- -
---------- - -------------- -- ------------
---
--
-------- -
----------- -
------------------------- -------
-
--
-------- -
--------- -
------------------- ------------
-
--
-------- -
--------- -
------------------- ------------
--
------- -
--------------------- --------
-
--
-------- -
--------- -
------------------- ------------
--
------- -
--------------------- --------
--
------------ -
------------------- ---------------
-
--
-------- -
--------- -
------------------- ------------
--
------- -
--------------------- --------
--
------------ -
------------------- ---------------
--
----------- -
------------------- --------------
--
----------------- -
--------------------- ------------ --------
-
--
-------- -
--------- -
------------------- ------------
--
------- -
--------------------- --------
--
------------ -
------------------- ---------------
--
-------------------------- -
------------------- ---------- -------- ---------------
-
-
--
---------在上面的代码中，我们首先导入 vue-socket.io 的功能，并定义了一个名为 options 和 votes 的变量。在组件创建时，我们使用 $socket 对象从服务器获取投票选项，并在每个投票项下方显示当前投票结果。随后，我们将监听服务器发出的 options 和 votes 事件，用于更新投票选项和投票结果。最后，我们将定义 vote 方法，该方法将向服务器发送特定选项的投票请求。
现在，我们已经完成了投票系统的前后端的所有代码。在终端中，我们可以首先启动 WebSocket 服务器：
---- --- ----------- ---------- ---------
接下来，我们可以在不同的终端中，分别启动 Vue.js 客户端：
-- ------ --- --- -----
现在，在浏览器中访问 http://localhost:8080，我们可以开始为我们最喜欢的选项投票了。
结论
本文详细介绍了如何在 Deno 中使用 WebSocket 实现一个在线投票系统，并使用 Vue.js 框架构建了一个简单易用的前端。在这个过程中，你学习了以下内容：
- 如何创建基本的 WebSocket 服务器；
- 如何使用
Map对象来存储投票结果； - 如何使用
vue-socket.io功能将前端与后端的 WebSocket 服务器集成起来。
WebSocket 技术是一种非常有用的实时通信技术，它可以被用于许多不同类型的应用程序中。希望本文对你学习和使用 WebSocket 技术有所帮助，也希望你可以在未来的项目中更加积极地使用 WebSocket 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67370804317fbffedf078bf6