Skip to main content
Version: 4.x

Version 4.7.0

June 22, 2023

Server​

Bug Fixes​

  • remove the Partial modifier from the socket.data type (#4740) (e5c62ca)

Features​

Support for WebTransport​

The Socket.IO server can now use WebTransport as the underlying transport.

WebTransport is a web API that uses the HTTP/3 protocol as a bidirectional transport. It's intended for two-way communications between a web client and an HTTP/3 server.

References:

Until WebTransport support lands in Node.js, you can use the @fails-components/webtransport package:

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();

Added in 123b68c.

Client bundles with CORS headers​

The bundles will now have the right Access-Control-Allow-xxx headers.

Added in 63f181c.

Dependencies​

Client​

Bug Fixes​

  • properly report timeout error when connecting (5bc94b5)
  • use same scope for setTimeout and clearTimeout calls (#1568) (f2892ab)

Features​

Support for WebTransport​

The Socket.IO client can now use WebTransport as the underlying transport.

WebTransport is a web API that uses the HTTP/3 protocol as a bidirectional transport. It's intended for two-way communications between a web client and an HTTP/3 server.

References:

For Node.js clients: until WebTransport support lands in Node.js, you can use the @fails-components/webtransport package:

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

global.WebTransport = WebTransport;

Added in 7195c0f.

When setting the withCredentials option to true, the Node.js client will now include the cookies in the HTTP requests, making it easier to use it with cookie-based sticky sessions.

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

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

Added in 5fc88a6.

Conditional import of the ESM build with debug logs​

By default, the ESM build does not include the debug package in the browser environments, because it increases the bundle size (see 16b6569).

Which means that, unfortunately, debug logs are not available in the devtools console, even when setting the localStorage.debug = ... attribute.

You can now import the build which includes the debug packages with a conditional import. Example with vite:

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

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

Reference: https://v2.vitejs.dev/config/#resolve-conditions

Added in 781d753.

Dependencies​