WebSocket 技术是一种可以在 Web 应用程序中实现实时通信的技术。在 Deno 中，我们可以使用内置的 WebSocket API 来实现实时投票应用程序。本文将介绍如何在 Deno 中使用 WebSocket 进行实时投票的实现。
WebSocket 简介
WebSocket 技术是一种基于 TCP 协议的全双工通信协议，其优势在于可以实现低延迟的双向通信，而不需要像传统的 HTTP 请求-响应模式一样每次都重新建立连接。WebSockets 通常用于实现实时通信应用程序，如即时聊天、实时消息推送、在线游戏等等。
在 Deno 中，我们可以使用内置的 WebSocket API 来实现 WebSocket 通信。主要涉及到 WebSocket 类和两个事件 open 和 message。
实现实时投票应用程序
我们的实时投票应用程序需要满足以下需求：
- 连接到 WebSocket 服务器
- 客户端发送投票信息给服务器
- 服务器保存投票信息，返回当前投票结果给客户端
- 客户端收到投票结果后，更新界面显示当前投票结果
接下来，我们按照以上需求，分步骤实现实时投票应用程序。
连接 WebSocket 服务器
我们首先创建一个 WebSocket 服务器，代码如下：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ----------- --------------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
---------------------- ------ -- ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- ----------------- -
-----------------
----- ---------
---------- ------
---------- ------
-------- ------------
-------------------------
-
-在上面的代码中，我们使用 serve 函数创建一个 HTTP 服务器，并在端口 3000 上监听客户端请求。然后我们使用 acceptable 函数判断客户端请求是否可以升级到 WebSocket 连接，如果是，则通过 acceptWebSocket 函数将连接升级到 WebSocket 连接，并调用 handleWebSocket 处理 WebSocket 连接。
发送投票信息
客户端可以使用 WebSocket 类直接向服务器发送消息，如下所示：
-- -------------------- ---- -------
----- -- - --- ---------------------------------
--------------------------- -- -- -
---------------------- -- ------------
----- ---- - ----
------------------------
----- -------
----- -----
----
---在上面的代码中，我们创建了一个 WebSocket 连接到服务器，当连接成功后，客户端向服务器发送投票信息，这里我们以字符串 'A' 作为投票信息。
保存投票信息
当服务器接收到客户端发送的投票信息后，我们需要保存投票信息，并返回当前投票结果给客户端。为了方便起见，我们使用一个数组来保存投票信息，并将当前投票结果作为一个对象返回给客户端。
-- -------------------- ---- -------
--------- ---- -
------- -------
------ -------
-
----- ------ ------ - -
-
------- ----
------ --
--
-
------- ----
------ --
--
--
-------- ------------------- ---------- -
---------------------- -- ------------
------------------------------ ------- -- -
----- ------- - -----------------------
------ -------------- -
---- -------
----- ---- - -------------
----- ------ - -------------- -- -------- --- ------
-- -------- -
------------ -- --
-
------------------------
----- ---------
----- ------
----
------
-
---
-在上面的代码中，我们使用 handleWebSocket 函数处理 WebSocket 连接，当客户端发送投票信息时，我们找到对应选项并将其计数器加一，然后返回当前投票结果给客户端。
更新投票结果
客户端在收到服务器返回的投票结果后，需要将当前投票结果更新到界面上。我们可以通过 message 事件来接收服务器返回的消息，并在回调函数中更新界面。
-- -------------------- ---- -------
--- ------------------
--------
----- -- - --- ---------------------------------
--------------------------- -- -- -
---------------------- -- ------------
----- ---- - ----
------------------------
----- -------
----- -----
----
---
------------------------------ ------- -- -
----- ------- - -----------------------
------ -------------- -
---- ---------
----- ------- - -------------
----- ----------- - -----------------------------------
--------------------- - ---
------------------------ -- -
----- -- - -----------------------------
------------ - ------------------ -----------------
----------------------------
---
------
-
---
---------在上面的代码中，我们使用 message 事件处理服务器返回的消息，并使用 innerHTML 属性将当前投票结果更新到界面上。
总结
本文介绍了在 Deno 中使用 WebSocket 实现实时投票的方法。我们按照需求分步骤实现了一个完整的实时投票应用程序，并包含了示例代码和注释。WebSocket 是一个非常有用的技术，可以帮助我们实现实时通信应用程序，如即时聊天、实时消息推送和在线游戏等等。如果您对 WebSocket 技术感兴趣，建议您深入学习 WebSocket 相关知识，以便更好地应用 WebSocket 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64534a36968c7c53b07bc996