跳到主要内容

Edge 上的 Web Streams

在 Deno,我们非常重视 Web 标准。由此带来的一个结果是,Deno Deploy 对 Web Streams(也称为“标准流”)提供了出色的支持。借助 Deno Deploy,可以使用几行 JavaScript(或 TypeScript)代码构建流式、事件驱动的服务器,并将其立即部署到 全球 28 个数据中心

让我们来看看浏览器标准在服务器端的发展程度……

基本 HTTP 代理

在构建 HTTP 代理时,重要的是不要缓冲主体。这会增加内存使用量并降低响应时间。相反,您希望将 HTTP 消息的主体流式传输回客户端。

这是一个简单的示例:

import { serve } from "https://deno.land/[email protected]/http/server.ts";

async function handler(req: Request): Promise<Response> {
  const url = new URL(req.url);
  url.protocol = "https:";
  url.hostname = "example.com";
  url.port = "443";
  return await fetch(url.href, {
    headers: req.headers,
    method: req.method,
    body: req.body,
  });
}

serve(handler);

您可以在 https://example-proxy-requests.deno.dev/ 访问此代理服务器,或在 https://dash.deno.com/playground/example-proxy-requests fork 代码

带有转换的 HTTP 代理

如果我们想修改通过代理的数据怎么办?在以下示例中,我们借助 TransformStreamTextDecoderStreamTextEncoderStream,逐个数据包地处理主体,将文本转换为大写。

import { serve } from "https://deno.land/[email protected]/http/server.ts";

serve(async (req) => {
  const url = new URL(req.url);
  url.protocol = "https:";
  url.hostname = "example.com";
  url.port = "443";
  const resp = await fetch(url.href);

  const bodyUpperCase = resp.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(
      new TransformStream({
        transform: (chunk, controller) => {
          controller.enqueue(chunk.toUpperCase());
        },
      }),
    )
    .pipeThrough(new TextEncoderStream());

  return new Response(bodyUpperCase, {
    status: resp.status,
    headers: resp.headers,
  });
});

您可以在 https://example-proxy-upper-case.deno.dev/ 访问此服务器,或在 https://dash.deno.com/playground/example-proxy-upper-case fork 代码

服务器发送事件 (Server-Sent Events)

当然,您不需要代理来使用流。如果有人想要构建一个每秒响应一条消息的服务器呢?这可以通过将 ReadableStreamsetInterval 结合使用来实现。

此外,通过将 content-type 设置为 text/event-stream 并在每条消息前加上 "data: " 前缀,服务器发送事件 可以使用 EventSource API 轻松处理。

您可以在 https://server-sent-events.deno.dev/ 访问此实时示例,或在 https://dash.deno.com/playground/server-sent-events fork 代码

import { serve } from "https://deno.land/[email protected]/http/server.ts";

const msg = new TextEncoder().encode("data: hello\r\n\r\n");

serve(async (_) => {
  let timerId: number | undefined;
  const body = new ReadableStream({
    start(controller) {
      timerId = setInterval(() => {
        controller.enqueue(msg);
      }, 1000);
    },
    cancel() {
      if (typeof timerId === "number") {
        clearInterval(timerId);
      }
    },
  });
  return new Response(body, {
    headers: {
      "Content-Type": "text/event-stream",
    },
  });
});

请注意,由于 Deno Deploy 使用 HTTP/2,因此 SSE 不会受到浏览器最大开放连接数(6 个)的限制,这使得通过 HTTP/1.1 使用 SSE 不明智。

WebSockets

Deno Deploy 也支持 WebSocket 连接。WebSockets 不是 Stream API 的一部分,但用例有很大的重叠。

服务器端 websocket 还没有标准 API,因此您必须在 Deno 命名空间中查找 Deno.upgradeWebSocket

import { serve } from "https://deno.land/[email protected]/http/server.ts";

serve((req) => {
  const upgrade = req.headers.get("upgrade") || "";
  if (upgrade.toLowerCase() != "websocket") {
    return new Response("request isn't trying to upgrade to websocket.");
  }
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.onopen = () => console.log("socket opened");
  socket.onmessage = (e) => {
    console.log("socket message:", e.data);
    socket.send(new Date().toString());
  };
  socket.onerror = (e) => console.log("socket errored:", e.message);
  socket.onclose = () => console.log("socket closed");
  return response;
});

您可以在 https://websocket.deno.dev/ 访问此实时示例,或在 https://dash.deno.com/playground/websocket fork 代码

下一步是什么?

查看示例库文档以了解更多信息。

Deno Deploy 目前处于 Beta 测试阶段,对所有人免费。如果您尝试使用它,请向我们发送一些反馈以提供帮助。