跳至主要內容
版本：4.x

版本 4.7.0

2023 年 6 月 22 日

伺服器​

錯誤修正​

  • 移除 socket.data 類型的 Partial 修改器 (#4740) (e5c62ca)

功能​

支援 WebTransport​

Socket.IO 伺服器現在可以使用 WebTransport 作為基礎傳輸。

WebTransport 是一個 Web API，使用 HTTP/3 協定作為雙向傳輸。它適用於 Web 用戶端和 HTTP/3 伺服器之間的雙向通訊。

參考

在 Node.js 中提供 WebTransport 支援之前，您可以使用 @fails-components/webtransport 套件

import { readFileSync } from "fs";
import { createServer } from "https";
import { Server } from "socket.io";
import { Http3Server } from "@fails-components/webtransport";

// WARNING: the total length of the validity period MUST NOT exceed two weeks (https://w3c.github.io/webtransport/#custom-certificate-requirements)
const cert = readFileSync("/path/to/my/cert.pem");
const key = readFileSync("/path/to/my/key.pem");

const httpsServer = createServer({
  key,
  cert
});

httpsServer.listen(3000);

const io = new Server(httpsServer, {
  transports: ["polling", "websocket", "webtransport"] // WebTransport is not enabled by default
});

const h3Server = new Http3Server({
  port: 3000,
  host: "0.0.0.0",
  secret: "changeit",
  cert,
  privKey: key,
});

(async () => {
  const stream = await h3Server.sessionStream("/engine.io/");
  const sessionReader = stream.getReader();

  while (true) {
    const { done, value } = await sessionReader.read();
    if (done) {
      break;
    }
    io.engine.onWebTransportSession(value);
  }
})();

h3Server.startServer();

新增於 123b68c。

具有 CORS 標頭的用戶端套件​

這些套件現在將具有正確的 Access-Control-Allow-xxx 標頭。

新增於 63f181c。

相依性​

用戶端​

錯誤修正​

  • 正確回報連線逾時錯誤 (5bc94b5)
  • 對 setTimeout 和 clearTimeout 呼叫使用相同的範圍 (#1568) (f2892ab)

功能​

支援 WebTransport​

Socket.IO 用戶端現在可以使用 WebTransport 作為底層傳輸。

WebTransport 是一個 Web API，使用 HTTP/3 協定作為雙向傳輸。它適用於 Web 用戶端和 HTTP/3 伺服器之間的雙向通訊。

參考

對於 Node.js 用戶端：在 Node.js 中提供 WebTransport 支援之前，您可以使用 @fails-components/webtransport 套件

import { WebTransport } from "@fails-components/webtransport";

global.WebTransport = WebTransport;

新增於 7195c0f。

將 withCredentials 選項設定為 true 時，Node.js 客户端現在會在 HTTP 要求中包含 Cookie，使其更容易與基於 Cookie 的黏著性工作階段搭配使用。

import { io } from "socket.io-client";

const socket = io("https://example.com", {
  withCredentials: true
});

已新增至 5fc88a6。

使用除錯記錄條件式匯入 ESM 建置​

預設情況下，ESM 建置不會在瀏覽器環境中包含 debug 套件，因為這會增加套件大小 (請參閱 16b6569)。

這表示，很遺憾地，即使設定 localStorage.debug = ... 屬性，除錯記錄也不會顯示在開發人員工具主控台中。

現在，您可以使用 條件式匯入 來匯入包含 debug 套件的建置。以下是 Vite 的範例

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 4000
  },
  resolve: {
    conditions: ["development"]
  }
})

參考：https://v2.vitejs.dev/config/#resolve-conditions

已新增至 781d753。

相依性​