近些年来，WebSocket 技术的发展已经引起了越来越多开发者的关注，它可以在浏览器和服务器之间建立“双向通信”连接，为实时在线应用提供了一个快速、可靠且高效的解决方案。在 Deno 中，我们同样可以利用 WebSocket 技术来实现多人实时协作的功能，本文将会详细介绍如何利用 Deno 和 WebSocket 技术来实现多人在线聊天室的情景，并附带实用的示例代码和详细的讲解。
1. Deno WebSocket 的简介
Deno 题为“secure-by-default”，强调使用安全的默认设置来执行 JavaScript 代码，而且没有使用 Node.js 弊病的异步回调，因此使用 Deno 的 WebSocket 套接字与 Node.js 的 WebSocket 不同。Deno 提供了一个简洁且易于使用的 WebSocket API，可以与浏览器和其他 WebSocket 客户端进行交互，从而实现实时在线应用的功能，同时还可轻松处理 WebSocket 服务器端和客户端的错误、关闭和事件等。
2. WebSocket 基础知识
在进入代码和实践的部分之前，我们有必要对 WebSocket 的基本概念进行了解和思考。 WebSocket 是一种基于 TCP 协议的标准化的双向通信协议，它可以在客户端和服务器之间建立持久连接，从而实现实时的双向数据传输；它的通信过程是基于帧 (frame) 的，而不像 HTTP 协议是基于请求-响应 (request/response) 的，所以 WebSocket 在性能和实时性方面都有更好的表现；同时，WebSocket 对跨域问题的处理也更加灵活，相较于 HTTP 协议，更加安全可靠。
但是，WebSocket 也有它在应用中需要注意的问题，在一些场景下，WebSocket 相较于传统的 HTTP/HTTPS 还是有所不足，例如对于非长时间运行、通信量不高或处理较少的应用程序，使用传统的 HTTP/HTTPS 协议可能更为合适。
3. 使用 Deno 实现多人在线聊天室
以下是一个基于 Deno 与 WebSocket 技术实现的多人在线聊天室的示例代码，代码注释详细，读者可以自行尝试模拟场景运行代码，并了解 WebSocket 在实际应用中的实现方法和基本操作。
// javascriptcn.com 代码示例
import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket, serveWebSocket } from "https://deno.land/std/ws/mod.ts";
console.log("WebSocket Server is up and running.");
// 连接保存数组
let sockets: WebSocket[] = []
// 将收到的信息广播给所有用户
async function broadcast(message: string): Promise<void> {
await Promise.all(sockets.map(async (socket: WebSocket) => {
await socket.send(message);
}));
}
// 开始 WebSocket 连接，添加到数组中
async function handleWs(sock: WebSocket): Promise<void> {
sockets.push(sock);
console.log(`Accepted new WebSocket connection !`);
// 获取用户名称
const username = await sock.receive();
console.log(`${username} has joined.`);
// 将用户加入列表广播出去
await broadcast(`${username} has joined.`);
// 发送聊天室消息
for await (const message of sock) {
if (message === "exit") {
console.log(`${username} has disconnected.`);
await broadcast(`${username} has disconnected.`);
const index = sockets.indexOf(sock);
sockets.splice(index, 1);
break;
}
// 仅将消息广播给用户，不包括发送者
await Promise.all(sockets.filter((x: WebSocket) => x !== sock).map(async (socket: WebSocket) => {
await socket.send(`${username}: ${message}`);
}));
}
}
// 创建 HTTP 服务器来侦听 WebSocket 请求
const server = serve({port: 3000});
for await (const req of server) {
if (req.url === "/") {
req.respond({
status: 200,
headers: new Headers({
"content-type": "text/html;charset=UTF-8",
}),
body: `<!DOCTYPE html><html><body><script type="module">
const username = prompt('Please enter your username:');
const ws = new WebSocket('ws://' + location.hostname + ':3000/');
ws.onopen = function(event) {
ws.send(username);
};
ws.onmessage = function(event) {
const messages = document.getElementById('chatMessages');
const messageElem = document.createElement('div');
messageElem.innerText = event.data;
messages.appendChild(messageElem);
};
function sendMessage() {
const input = document.getElementById('chatInput');
const message = input.value;
input.value = '';
ws.send(message);
}
</script><div id="chatMessages"></div><input id="chatInput" type="text" onkeydown="if(event.keyCode==13) sendMessage();" autofocus /> </body></html>`,
});
} else if (req.url === "/ws") {
const { conn, r: bufReader, w: bufWriter, headers } = req;
acceptWebSocket({
conn,
bufReader,
bufWriter,
headers,
}).then(handleWs);
}
}4. 总结
WebSocket 技术已经开始成为构建实时在线应用和即时通讯的基本组件，其中 Deno 作为一种新兴的 JavaScript 运行时，也提供了方便、简洁、安全的 WebSocket API，以便开发者能够以更高效的方式构建实时在线应用。在本文中，我们成功实现了一个基于 WebSocket 技术的多人在线聊天室，说明了其在实际应用中的基础概念和操作方法，同时还附带了详细的示例代码和讲解，供读者学习与参考。希望能对读者的实际工作与开发有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654061887d4982a6eb9dd507