前言
近年来，随着互联网的普及和 Web 技术的发展，协同编辑逐渐成为了一种趋势。而近期 Deno 的出现，更是为开发人员带来了新的思路和可能性。本文将介绍如何利用 Deno 实现多人实时协同编辑，方便多人对同一文本进行编辑和协同处理。
前提条件
在开始之前，我们需要先在本地搭建 Deno 运行环境。Deno 是一个基于 JavaScript 的运行时环境，类似于 Node.js。不同的是，Deno 具有更好的安全性和稳定性，支持 TypeScript 等多种语言，并可以直接从远程加载文件和模块等。
安装 Deno 可以通过官方网站进行下载：https://deno.land/
安装成功之后，可以在命令行中输入 deno --version 来查看版本号是否正确。
实现思路
多人实时协同编辑的实现首先需要考虑到通信机制，需要建立一种网络通信协议，进行多人数据的传送和同步处理。WebSockets 是一个比较好的选择，因为它是一种双向通信协议，能够支持多人实时同步。
具体实现思路如下：
在服务端启动 WebSocket 服务器，对多个客户端进行监听。
服务端将接收到的数据进行广播，发送给所有已连接的客户端。
客户端向服务端发送编辑请求，将修改的文本传送给服务端。
服务端将接收到的编辑请求发送给所有已连接的客户端，对文本进行同步处理。
已连接的客户端接收到数据后，更新本地的文本编辑器。
实现示例
下面我们来看一下具体的实现方法。首先，我们需要引入 Deno 的 WebSocket 模块和一个文本编辑库 CodeMirror。
-- -------------------- ---- ------- ------ - -- -- ---- ---------------------------------- ------ - ---------------- --------------------- - ---- ---------------------------------- ------ - -------------- - ---- --------------------------------------- ------ - --------- - ---- -------------------------------------------- ------ - -------- ----------- - ---- ------------------------------------ ------ - ---- - ---- ------------------------------------- ------ ----------------------------------------------------------------- ------ ----------------------------------------------------------------- ------ ------------------------------------------------------------------ ------ -------------------------------------------------------------------
然后，我们需要添加一个 WebSocket 服务器的监听函数：
-- -------------------- ---- -------
----- -------- ------------ ------------- -------- ------------------ -
------------------- ------------
--- ----- ------ ----- -- ------- -
-- ------- ----- --- --------- -
------------------- -------
------------------ -------
- ---- -- ------------------------------ -
------------------- ---------
-----------------------
------
-
-
-其中，clients 参数是一个用于存储已连接的客户端的集合。当有新的客户端连接时，直接将其加入集合中。如果收到了文本编辑请求，则广播给所有已连接的客户端；如果某个客户端已经断开连接，则从集合中删除。
接下来，我们需要实现一个广播函数，将数据发送给所有已连接的客户端：
function broadcast(clients: Set<ws.WebSocket>, message: string) {
for (const client of clients) {
client.send(message);
}
}然后，我们需要添加一个 HTTP 服务器的监听函数，用于提供静态资源和 WebSocket 服务：
-- -------------------- ---- -------
----- -------- ------- -
----- ------- - --- --------------------
----- ------ - ----------------------- ----- ----- -- -
----- --- - --- ----------- -- --- -------------------------
-- -------------------------------- -
----- - ----- -- ---------- -- ---------- ------- - - ----
----- ------ - ----- -----------------
-----
----------
----------
--------
---
--------------------
----- ------------ ---------
- ---- -
----- ---- - --------------------------------
--- -
----- ----- - ----- ----------------
----------------------- -
----- ----- - ----- -------------------
--- ---- - ---
--------- ---- -- ------ -
---- -- ------- -----------------------------------------------------------
-
-------------
----- -
------
------
----
-------
-----
-------
-------
-
---
- ---- -
----- ---- - ----- -------------- ------
------ ------------------
-
- ---------- -
-----------------
-------------
----- ----- --- ------
---
-
-
---
-其中，clients 仍然是一个存储已连接客户端的集合，用于在 WebSocket 监听函数中进行数据的广播。listenAndServe 函数用于启动 HTTP 服务器，监听 localhost 的 8000 端口。在请求 URL 以 /ws 开头的情况下，表示是一个 WebSocket 连接请求，我们需要将其交给 acceptWebSocket 函数进行处理。在其他情况下，我们需要提供静态资源服务，如果请求的是一个目录，则显示目录下的文件列表。
最后，我们来看一下前端实现的代码。我们需要在 HTML 文件中创建一个 CodeMirror 的文本编辑器，以及一个 WebSocket 客户端，用于与服务端进行通信：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
------- --------------
------ - ---- - ---- -------------------------------------
------ -----------------------------------------------------------------
------ -----------------------------------------------------------------
------ ------------------------------------------------------------------
------ -------------------------------------------------------------------
------ - --------------- - ---- ---------------------------------------
----- ------ - --- ---------------------------------------- -
------------ -----
-------------- -----
------------------ -----
----- -------------
---
----- ------ - --- ------------------------------------------
----------------- -- -- ------------------- ----------
-------------------- ------ -- -
----- - --------------- ------------- ----- - - -------------
-----------------
----------------------------------- --------------
---
------------------ -- -- ------------------- ----------
-------------------- ---------- -------- -- -
----- - ----- - - ------------------
-------------------
---
---------
-------
------
---- ------------------
-------
-------其中，WebSocketClient 是一个 Deno WebSocket 客户端，负责将文本编辑请求发送给服务端，并在接收到数据时更新本地的文本编辑器。Text 对象是 CodeMirror 中的文本编辑器对象，用于创建一个可以进行代码编辑的界面。
总结
本文介绍了如何利用 Deno 实现多人实时协同编辑，具体实现包括服务端的 WebSocket 监听和广播，客户端的文本编辑和通信等。这种实现方式可以方便多人进行协同处理，例如多人编程、会议记录等。使用 Deno 进行开发，不仅可以提高开发效率和代码质量，还能够提供更好的安全性和稳定性保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65018cac95b1f8cacdf3ff94