Web Socket 是一种基于 TCP 连接的协议，可以在客户端和服务器端之间传送数据，从而实现实时双向通信。在前端开发中，Web Socket 可以用于实现多人协作应用程序。本文将介绍如何在 Deno 中使用 Web Socket 实现多人协作应用程序。本文将详细介绍以下内容：
- Deno 简介
- Web Socket 简介
- 在 Deno 中使用 Web Socket
- 示例代码
1. Deno 简介
Deno 是一个安全的 JavaScript/TypeScript 运行时环境，由 Node.js 的创始人 Ryan Dahl 开发。它的设计目标是在完全不需要任何外部依赖的情况下，提供一个现代化的运行时环境和标准库，以便于编写和运行 JavaScript 和 TypeScript 应用程序。
与 Node.js 不同的是，Deno 不使用 npm 作为包管理器，而是直接从 URL 中导入模块。这种方式更加安全，因为可以避免运行未知/恶意代码的风险。
2. Web Socket 简介
Web Socket 是一种基于 TCP 连接的协议，可以在客户端和服务器端之间传送数据，从而实现实时双向通信。Web Socket 通过在 HTTP 协议升级时添加标头，从而使得在客户端和服务器端之间建立一个持久性的连接。Web Socket 除了支持文本数据，还支持二进制数据的传输。
在 Web Socket 中，客户端和服务器端之间的通信是双向的，数据可以在任何一端被发送和接收。Web Socket 还支持在一个连接上可以同时发送多个数据包，而不需要等待前一个数据包的响应。
3. 在 Deno 中使用 Web Socket
在 Deno 中使用 Web Socket 非常简单。Deno 提供了一个内置的 Web Socket API 可以直接使用。我们可以通过以下代码来创建一个 Web Socket 服务：
// www.javascriptcn.com code example
import { serve } from 'https://deno.land/std/http/server.ts';
import { acceptWebSocket, isWebSocketCloseEvent } from 'https://deno.land/std/ws/mod.ts';
const server = serve({ port: 8000 });
console.log('http://localhost:8000/');
for await (const req of server) {
if (req.url === '/ws') {
const { conn, r: bufReader, w: bufWriter, headers } = req;
const ws = await acceptWebSocket({ conn, bufReader, bufWriter, headers });
console.log('Connected');
try {
for await (const ev of ws) {
if (typeof ev === 'string') {
console.log('Text message:', ev);
} else if (ev instanceof Uint8Array) {
console.log('Binary message:', ev);
} else if (isWebSocketCloseEvent(ev)) {
const { code, reason } = ev;
console.log('Closed', code, reason);
}
}
} catch (err) {
console.error(`WebSocket error: ${err}`);
}
}
}在上面的代码中，我们创建了一个 Web Socket 服务器，并监听 8000 端口上的传入请求。当接收到路径为 /ws 的请求时，我们创建了一个 Web Socket 连接并打印一条日志。
然后，我们使用一个无限循环来监听 Web Socket 事件。如果收到的是文本消息，则打印出它的内容；如果收到的是二进制数据，则打印出它的字节数组。如果收到的是一个关闭事件，则打印出它的代码和原因。
我们还可以使用 ws.send() 方法来向客户端发送文本或二进制数据。
4. 示例代码
下面是一个简单的示例代码，它演示了如何在 Deno 中使用 Web Socket 实现多人协作应用程序：
// www.javascriptcn.com code example
import { serve } from 'https://deno.land/std/http/server.ts';
import { acceptWebSocket, isWebSocketCloseEvent } from 'https://deno.land/std/ws/mod.ts';
const server = serve({ port: 8000 });
console.log('http://localhost:8000/');
const sockets: Set<WebSocket> = new Set();
for await (const req of server) {
if (req.url === '/ws') {
const { conn, r: bufReader, w: bufWriter, headers } = req;
const ws = await acceptWebSocket({ conn, bufReader, bufWriter, headers });
sockets.add(ws);
console.log(`Connected: ${sockets.size} sockets connected`);
for (const socket of sockets) {
socket.send(`New socket joined: ${ws}`);
}
try {
for await (const ev of ws) {
if (typeof ev === 'string') {
for (const socket of sockets) {
socket.send(ev);
}
} else if (ev instanceof Uint8Array) {
for (const socket of sockets) {
socket.send(ev);
}
} else if (isWebSocketCloseEvent(ev)) {
sockets.delete(ws);
console.log(`Closed: ${sockets.size} sockets connected`);
for (const socket of sockets) {
socket.send(`Socket left: ${ws}`);
}
}
}
} catch (err) {
console.error(`WebSocket error: ${err}`);
}
}
}在上面的代码中，我们创建了一个空的 Set 对象，用于存储所有连接到服务器的 Web Socket。当一个 Web Socket 连接建立时，我们向所有连接的客户端发送一个消息，告诉他们有新的 Web Socket 加入。当一个 Web Socket 连接关闭时，我们向所有连接的客户端发送一个消息，告诉他们有 Web Socket 离开了。
当我们接收到一个 Web Socket 事件时，我们使用循环向所有连接的客户端广播这个事件。如果这是一个字符串，则发送文本消息；如果这是一个字节数组，则发送二进制数据。如果这是一个关闭事件，则从集合中删除连接对象，并向所有连接的客户端发送一个消息。
以上就是本文的全部内容。在 Deno 中使用 Web Socket 实现多人协作应用程序非常简单，只需要几行代码就可以实现。希望本文对您有所帮助！
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678007e8ce7f486125295b84