sse 通过 deno 的正确打开方式
2023-03-02 本文已影响0人
纯爱枫若情
服务器推送消息的几种方式
通常情况下，在 bs 架构的体系中，服务器想要向客户端推送消息，主要有以下几种方式：
- 短轮询：客户端定时向服务器请求数据，服务器立即返回响应信息。
- 长轮询：客户端向服务器请求数据，服务器保持连接，直到有新消息才返回响应信息并关闭连接。
- 流信息：客户端向服务器请求数据，服务器声明要发送一个数据流，连续不断地发送数据给客户端。
- WebSocket：客户端和服务器建立一个双向通信的连接，可以互相发送和接收数据。
这几种推送消息的方式，实现原理的区别如下：
- 短轮询：不需要特殊的技术支持，只需要客户端和服务器之间能够进行 HTTP 请求和响应即可。
- 长轮询：不需要特殊的技术支持，只需要客户端和服务器能够进行 HTTP 请求和响应即可，但是服务器要能够保持连接并及时返回新消息。
- 流信息：需要客户端支持 EventSource 接口，需要服务器能够发送
Content-Type: text/event-stream的响应，并且遵循一定的格式规范。 - WebSocket：需要客户端支持 WebSocket 接口，需要服务器能够升级 HTTP 连接为 WebSocket 连接，并且实现 WebSocket 协议。
那么这几种方式，各自的优缺点如下：
- 短轮询：优点是实现简单，不需要特殊的技术支持；缺点是效率低，浪费资源，不能实时推送消息。
- 长轮询：优点是能够实时推送消息，减少无效请求；缺点是服务器压力大，需要保持连接并及时返回新消息。
- 流信息：优点是能够实时推送消息，节省资源，避免轮询的缺陷；缺点是只能单向通信，需要客户端支持 EventSource 接口。
- WebSocket：优点是能够实现双向通信，效率高，节省资源；缺点是需要客户端和服务器都支持 WebSocket 接口和协议。
这些方式，各自适合以下使用场景：
- 短轮询：适合数据更新频率不高，实时性要求不高的场景，例如新闻、博客等。
- 长轮询：适合数据更新频率较高，实时性要求较高的场景，例如聊天、通知等。
- 流信息：适合数据更新频率较高，实时性要求较高的场景，且只需要单向通信的场景，例如股票行情、在线直播等。
- WebSocket：适合数据更新频率较高，实时性要求较高的场景，且需要双向通信的场景，例如在线游戏、视频会议等。
用 deno 实现一个 Server-sent events 接口
了解完以上这些前置信息后，回到我们这篇文章想要谈论的正题上来。
我们知道，Server-sent events 是一种通过 HTTP 实现 web 前端应用的服务器端推送的规范，它是属于上面我们说到的 流信息 的一种。
以前没有接触过的童鞋，有兴趣可以阅读参考下相关的资料：
那么我们如何用 deno，实现一个 Server-sent events 接口呢？
可能有些不了解的童鞋要问了，什么是 deno?
不了解的童鞋可以去 deno 官网了解下，这里不做详细的介绍。
Deno — A modern runtime for JavaScript and TypeScript
实现 http server
首先，我们得了解下，在 deno 中，如何用标准库实现一个 http server。
最简单的实现方式，如下面的示例所示：
// 从标准库中导入 serve 实例
import { serve } from "https://deno.land/std@0.175.0/http/server.ts";
// 请求 http 请求的处理器
function handler(_req: Request): Response {
return new Response("Hello, World!");
}
console.log("Listening on http://localhost:8000");
// 启动服务
serve(handler);
实现流模式的响应
deno 官方的示例中，有一个示例展示如何发送流数据。
HTTP Server: Streaming - Deno by Example
我们结合 Server-sent events 的要求，
我们可以改造一下该示例，改造后的代码如下所示：
import { Server } from "https://deno.land/std@0.175.0/http/server.ts";
const encoder = new TextEncoder();
// 请求 http 请求的处理器
function handler(_req: Request): Response {
let timer: number | undefined = undefined;
const body = new ReadableStream({
start(controller) {
// 增加定时器，定时朝流中推送文本数据
timer = setInterval(() => {
// 文本数据，遵循一定的格式标准
const message = `event: message\ndata: It is ${new Date().toISOString()}\n\n`;
controller.enqueue(encoder.encode(message));
}, 1000);
},
cancel() {
if (timer !== undefined) {
clearInterval(timer);
}
},
});
return new Response(body, {
// 设置专用响应头，使 Server-sent events 数据能够正常的传输
headers: {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache, no-transform",
"Connection": "keep-alive",
"X-Accel-Buffering": "no",
"Transfer-Encoding": "chunked",
},
});
}
const server = new Server({ port: 8082, handler: handler });
await server.listenAndServe();
在我们的前端页面里，可以直接通过下面的方式，调用该接口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sse</title>
</head>
<body>
<div>test</div>
<script>
const source = new EventSource("http://host:port", { withCredentials: false });
source.onopen = function () {
console.log("EventSource 连接成功");
};
source.onmessage = function (event) {
try {
if (event.data && typeof event.data === "string") {
console.log(event.data)
}
} catch (error) {
console.log("EventSource 结束消息异常", error);
}
};
// 监听错误
source.onerror = function (event) {
// handle error
console.log(event);
};
</script>
</body>
</html>
