随着前端技术的不断更新，实时网络应用已经成为更新的极客需求。WebSocket 作为一种新的网络通信协议已经受到了广泛的关注，并被越来越多的前端工程师所接受。本文将介绍在 Deno 中使用 WebSocket 进行实时拍卖的实现。
简介
Deno 是一个安全的 TypeScript 运行时，包含了很多 Web 应用开发需要的功能，例如文件 I/O, HTTP, WebSocket 等。Denno 具有高效、安全等特点并且非常容易上手，因此越来越多的前端工程师已经选择了 Deno。
本次实战将介绍如何在 Deno 中使用 WebSocket 实现一个拍卖的实时网络应用。实时拍卖的功能需要与客户端进行即时通信，因此 WebSocket 是一个非常优秀的选择。
实现
前置条件
在进行代码编写之前，需要先安装最新版的 Deno，并确保能够在 Deno 环境下启动一个 Web 服务。这里将使用 hello 项目作为示例代码：
-- -------------------- ---- -------
-- --------
------ - ----- - ---- ---------------------------------------------
----- ------ - ------- ----- ---- --
------------------- -- ------- -- ---- ------
--- ----- ------ --- -- ------- -
-------------
------- ----
----- -------- -- --- ---- --------
--
-通过运行以下命令即可启动该项目：
deno run --allow-net hello.ts
安装 WebSocket 库
安装使用 Deno WebSocket 需要执行以下命令：
deno install --allow-net --allow-read https://deno.land/std/ws/mod.ts
确定 WebSocket 连接 URL
首先确定 WebSocket 的连接 URL，这里我们选择 ws://localhost:3000/ws 作为 WebSocket 连接的 URL。在 hello.ts 中增加如下代码：
-- -------------------- ---- -------
-- --------
------ - ----- - ---- --------------------------------------
------ -
----------------
----------------------
---------------------
---------
- ---- ---------------
----- -------- -------------- - --- -----
----- -------- ---------------- ---------- -
------------------- -----------
-------------------
--- -
--- ----- ------ ----- -- ------- -
-- ------- ----- --- --------- -
----- --- - -----------------
----------------
----------- ------- ------ --
- ---- -- ------------------------------ -
----------------------
------------------- --------
- ---- -- ----------------------------- -
------------------- -- --------
-
-
- ----- ----- -
--------------------- -- ------- ------ --------
-- ------------------ -
----- ---------------------------------------
----------------------
-
-
-
-------- ----------- ------- -------- ---- -- ---- -
----- ------- - ---------------- -------- ---- --
--- ------ - -- -------- -
-- -- --- ------- -
---------------
-
-
-
----- -------- ------ -
----- ------ - ------- ----- ---- --
------------------- -- ------- -- ---- ------
--- ----- ------ --- -- ------- -
----- - ----- -- ---------- -- ---------- ------- - - ---
-----------------
-----
----------
----------
-------
-----------------
-
-
------在 acceptWebSocket 函数中，bufReader 和 bufWriter 分别对应的是 HTTP 请求和响应的 reader 和 writer。
现在可以通过 ws://localhost:3000/ws 地址建立 WebSocket 连接。现在可以实现基本的客户端/服务器通信，但我们还需要实现拍卖所需的功能。
拍卖实现
实现从客户端向服务器发起新的拍卖、出价、结束拍卖等操作。对于前端页面的布局和样式不作要求，这里只需要实现所需的功能即可，例如：
-- -------------------- ---- -------
----- --- - ------------------------
--- ------ - --- --------------
---------------------------------- ------- -- -
----- --- - ----------------------
----------------
--
-------------------------------- ------- -- -
------------------------ ------ ---- ---- -------------- -----------------
--
-------- ------------ -
----- ---- - -------------------------------------------
----- ---- - ---------------------------
----- ------------- - ------------------------------------
------------
----------------
------- --------------
-----
-------------
--
-
------------
-
-------- -------- -
----- ---- - ---------------------------------------
----- --------- - --------------------------------
----- ----- - ----------------------------
------------
----------------
------- ----------
----------
-----
--
-
------------
-
-------- ------------ -
----- ---- - -------------------------------------------
----- --------- - --------------------------------
------------
----------------
------- --------------
---------
--
-
------------
-其中，newAuction 函数用于向服务器发起新的拍卖请求，newBid 用于出价，endAuction 用于结束拍卖。在 socket.addEventListener 函数中可以指定对应的回调函数用于处理数据。
现在需要在服务器端处理这些请求。可以选择将拍卖的所有状态存储在内存中，但在实际应用中，这些状态应该存储在数据库中。
在这个示例中，假设服务器存储拍卖的状态，并在 handleWs 方法中使用以下代码来处理客户端请求：
-- -------------------- ---- -------
----- -------- ---------------- ---------- -
---
- ---------- -
- ----- ---
- ------------- ---
- ----- -
- -
- ----- ---
- ------ --
- -
- -
- -
--
----- -------- - --- -----
------------------- -----------
-------------------
--- -
--- ----- ------ ----- -- ------- -
-- ------- ----- --- --------- -
----- --- - -----------------
------ ------------ -
---- -------------- -
----- --------- - ------
----------------------- -
----- ---------
------------- ------------------
----- --
--
---------------- -------- --------------
----------- ------- ------- -------------- ---------- -------------------------- --
-----
-
---- ---------- -
----- ------- - ---------------------------
----- -------- - ---------------------
-- --------------------- - --------- -
-------------------- - --------
-------------------
----- -------
------ --------
--
----------- ------- ------- ---------- ---------- -------------- ------------------------------ --
-
-----
-
---- -------------- -
-- -------------------------------- -
----------- ------- ------- -------------- ---------- ------------- --
-
-----
-
-
-------------------- ---------------
- ---- -- ------------------------------ -
----------------------
------------------- --------
- ---- -- ----------------------------- -
------------------- -- --------
-
-
- ----- ----- -
--------------------- -- ------- ------ --------
-- ------------------ -
----- ---------------------------------------
----------------------
-
-
-在 handleWs 中，建立了一个 auctions Map 来存储所有拍卖的状态。当收到客户端的 new_auction 事件时，服务器会创建一个新的拍卖并将其存储在 auctions Map 中。当服务器收到 new_bid 时，将比较出价价格和当前最高出价价格，并更新拍卖的状态。当收到 end_auction 时，将删除拍卖对应的状态。
最后我们需要使用广播函数 broadcast 来广播状态的更改，以便所有连接的客户端都能够接收到。
总结
本文介绍了如何在 Deno 环境下使用 WebSocket 实现实时拍卖的应用。通过本文的阅读，读者可以了解到如何使用 Deno 和 WebSocket 构建实时网络应用，并具有完整的示例代码供读者学习和使用。希望本文能够对读者有所启发，能够帮助到读者在实际开发中能够更好的将 WebSocket 联系到实际的应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64548da1968c7c53b0868da0