在本章中，我们将深入探讨如何在Deno中使用WebSocket。WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
WebSocket的基本概念
WebSocket协议是在一个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket与HTTP的关系
WebSocket是建立在HTTP基础上的，但不同于HTTP的是，WebSocket允许服务器主动向客户端发送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket的优势
- 低延迟：WebSocket提供了低延迟的数据传输，适合实时应用。
- 全双工通信：WebSocket允许服务器主动向客户端发送数据，非常适合需要实时更新的应用场景。
- 节省带宽：由于WebSocket连接一旦建立，后续的数据传输就不需要额外的握手过程，因此能够节省带宽。
在Deno中使用WebSocket
Deno内置了对WebSocket的支持，可以直接通过WebSocket对象来使用WebSocket功能。下面我们来看一下如何在Deno中使用WebSocket。
创建WebSocket服务器
首先，我们需要创建一个WebSocket服务器。下面是一个简单的例子：
// www.javascriptcn.com code example
// 引入WebSocket模块
import { createServer } from "https://deno.land/std@0.176.0/http/server.ts";
const server = createServer((req) => {
if (req.url === "/ws") {
// 创建WebSocket实例
const ws = new WebSocket(req.socket);
ws.onopen = () => {
console.log("WebSocket connection established");
};
ws.onmessage = (event) => {
console.log(`Message received: ${event.data}`);
// 向客户端发送消息
ws.send(`Echo: ${event.data}`);
};
ws.onclose = () => {
console.log("WebSocket connection closed");
};
}
});
await server.listen({ port: 8000 });
console.log("WebSocket server is listening on http://localhost:8000/ws");创建WebSocket客户端
接下来，我们来看一下如何创建一个WebSocket客户端。下面是一个简单的例子：
// www.javascriptcn.com code example
import { connect } from "https://deno.land/std@0.176.0/ws/mod.ts";
const ws = await connect("ws://localhost:8000/ws");
ws.onopen = () => {
console.log("WebSocket client connected");
// 发送消息给服务器
ws.send("Hello Server!");
};
ws.onmessage = (event) => {
console.log(`Message received: ${event.data}`);
};
ws.onclose = () => {
console.log("WebSocket client disconnected");
};处理错误
在实际应用中，我们需要处理可能出现的错误。下面是一些常见的错误处理方式：
ws.onerror = (error) => {
console.error(`WebSocket error: ${error.message}`);
};使用WebSocket进行实时通讯
WebSocket非常适合用于构建实时应用，比如在线聊天、股票行情、游戏等。下面我们来看一下如何使用WebSocket进行实时通讯。
在线聊天示例
我们可以创建一个简单的在线聊天应用，客户端可以通过WebSocket与服务器进行实时通讯。下面是客户端和服务端的代码示例：
服务端代码
// www.javascriptcn.com code example
import { createServer } from "https://deno.land/std@0.176.0/http/server.ts";
import { WebSocket } from "https://deno.land/std@0.176.0/ws/mod.ts";
const server = createServer(async (req) => {
if (req.url === "/ws") {
const ws = new WebSocket(req.socket);
ws.onopen = () => {
console.log("WebSocket connection established");
};
ws.onmessage = async (event) => {
const message = event.data;
console.log(`Message received: ${message}`);
// 广播消息给所有连接的客户端
for (const client of clients.values()) {
client.send(message);
}
};
ws.onclose = () => {
console.log("WebSocket connection closed");
};
}
});
const clients = new Set();
server.serve({ port: 8000 }, (connInfo) => {
clients.add(connInfo.conn);
connInfo.conn.onclose = () => {
clients.delete(connInfo.conn);
};
});
await server.listenAndServe();
console.log("WebSocket server is listening on http://localhost:8000/ws");客户端代码
// www.javascriptcn.com code example
import { connect } from "https://deno.land/std@0.176.0/ws/mod.ts";
async function startChat() {
const ws = await connect("ws://localhost:8000/ws");
ws.onopen = () => {
console.log("WebSocket client connected");
};
ws.onmessage = (event) => {
console.log(`Message received: ${event.data}`);
};
ws.onclose = () => {
console.log("WebSocket client disconnected");
};
const input = document.getElementById("chat-input") as HTMLInputElement;
const button = document.getElementById("send-button") as HTMLButtonElement;
const messagesContainer = document.getElementById("messages-container") as HTMLElement;
button.addEventListener("click", () => {
const message = input.value;
if (message) {
ws.send(message);
const messageElement = document.createElement("div");
messageElement.textContent = `You: ${message}`;
messagesContainer.appendChild(messageElement);
input.value = "";
}
});
}
startChat();实时股票行情示例
我们也可以使用WebSocket来获取实时股票行情数据。假设我们有一个提供实时股票行情的API，我们可以使用WebSocket来订阅这些数据。
服务端代码
// www.javascriptcn.com code example
import { createServer } from "https://deno.land/std@0.176.0/http/server.ts";
import { WebSocket } from "https://deno.land/std@0.176.0/ws/mod.ts";
const server = createServer(async (req) => {
if (req.url === "/ws") {
const ws = new WebSocket(req.socket);
ws.onopen = () => {
console.log("WebSocket connection established");
};
ws.onmessage = (event) => {
const message = event.data;
console.log(`Message received: ${message}`);
// 模拟从API获取实时股票行情数据
setTimeout(() => {
ws.send(JSON.stringify({
stockSymbol: "AAPL",
price: 150.5,
timestamp: new Date().toISOString()
}));
}, 3000);
};
ws.onclose = () => {
console.log("WebSocket connection closed");
};
}
});
await server.listen({ port: 8000 });
console.log("WebSocket server is listening on http://localhost:8000/ws");客户端代码
// www.javascriptcn.com code example
import { connect } from "https://deno.land/std@0.176.0/ws/mod.ts";
async function startStockTicker() {
const ws = await connect("ws://localhost:8000/ws");
ws.onopen = () => {
console.log("WebSocket client connected");
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(`Received stock data: ${data.stockSymbol} - Price: ${data.price} at ${data.timestamp}`);
};
ws.onclose = () => {
console.log("WebSocket client disconnected");
};
}
startStockTicker();总结
在本章中，我们学习了如何在Deno中使用WebSocket。我们首先了解了WebSocket的基本概念，然后介绍了如何在Deno中创建WebSocket服务器和客户端。最后，我们通过在线聊天和实时股票行情两个示例展示了如何使用WebSocket进行实时通讯。
在下一章中，我们将继续深入探讨Deno的其他高级特性，包括如何使用Deno进行并发编程以及如何利用Deno的异步特性提高应用性能。