Native support for Websockets

packages/kit/src/exports/public.d.ts

@@ -19,6 +19,8 @@ import {
 } from '../types/private.js';
 import { BuildData, SSRNodeLoader, SSRRoute, ValidatedConfig } from 'types';
 import type { PluginOptions } from '@sveltejs/vite-plugin-svelte';
+import type { IncomingMessage } from 'node:http';
+import type { Duplex } from 'node:stream';
 
 export { PrerenderOption } from '../types/private.js';
 
@@ -685,8 +687,8 @@ export interface KitConfig {
  */
 export type Handle = (input: {
 	event: RequestEvent;
-	resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
-}) => MaybePromise<Response>;
+	resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<void | Response>;
+}) => MaybePromise<void | Response>;
 
 /**
  * The server-side [`handleError`](https://svelte.dev/docs/kit/hooks#shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.
@@ -1076,6 +1078,10 @@ export interface RequestEvent<
 	 * The original request object
 	 */
 	request: Request;
+	/**
+	 * The upgrade request object
+	 */
+	upgrade: { request: IncomingMessage; socket: Duplex; head: Buffer } | null;
 	/**
 	 * Info about the current route
 	 */
@@ -1133,6 +1139,16 @@ export type RequestHandler<
 	RouteId extends string | null = string | null
 > = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>;
 
+/**
+ * A `(event: UpgradeEvent) => void` function exported from a `+server.js` file with the name UPGRADE and handles server upgrade requests.
+ *
+ * It receives `Params` as the first generic argument, which you can skip by using [generated types](https://svelte.dev/docs/kit/types#Generated-types) instead.
+ */
+export type UpgradeHandler<
+	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
+	RouteId extends string | null = string | null
+> = (event: RequestEvent<Params, RouteId>) => MaybePromise<void>;
+
 export interface ResolveOptions {
 	/**
 	 * Applies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML

packages/kit/src/exports/vite/dev/index.js

@@ -431,6 +431,52 @@ export async function dev(vite, vite_config, svelte_config) {
 		// serving routes with those names. See https://github.com/vitejs/vite/issues/7363
 		remove_static_middlewares(vite.middlewares);
 
+		vite.httpServer?.on('upgrade', async (req, socket, head) => {
+			const base = `${vite.config.server.https ? 'wss' : 'ws'}://${
+				req.headers[':authority'] || req.headers.host
+			}`;
+
+			// we have to import `Server` before calling `set_assets`
+			const { Server } = /** @type {import('types').ServerModule} */ (
+				await vite.ssrLoadModule(`${runtime_base}/server/index.js`, { fixStacktrace: true })
+			);
+
+			const server = new Server(manifest);
+
+			await server.init({
+				env,
+				read: (file) => createReadableStream(from_fs(file))
+			});
+
+			const request = await getRequest({
+				base,
+				request: req
+			});
+
+			await server.respond(
+				request,
+				{
+					getClientAddress: () => {
+						const { remoteAddress } = req.socket;
+						if (remoteAddress) return remoteAddress;
+						throw new Error('Could not determine clientAddress');
+					},
+					read: (file) => {
+						if (file in manifest._.server_assets) {
+							return fs.readFileSync(from_fs(file));
+						}
+
+						return fs.readFileSync(path.join(svelte_config.kit.files.assets, file));
+					},
+					before_handle: (event, config, prerender) => {
+						async_local_storage.enterWith({ event, config, prerender });
+					},
+					emulator
+				},
+				{ request: req, socket, head }
+			);
+		});
+
 		vite.middlewares.use(async (req, res) => {
 			// Vite's base middleware strips out the base path. Restore it
 			const original_url = req.url;

packages/kit/src/runtime/server/endpoint.js

@@ -7,17 +7,25 @@ import { method_not_allowed } from './utils.js';
  * @param {import('@sveltejs/kit').RequestEvent} event
  * @param {import('types').SSREndpoint} mod
  * @param {import('types').SSRState} state
- * @returns {Promise<Response>}
+ * @returns {Promise<Response | void>}
  */
 export async function render_endpoint(event, mod, state) {
 	const method = /** @type {import('types').HttpMethod} */ (event.request.method);
 
+	/**
+	 * The handler function to use for the request
+	 * @type {import('@sveltejs/kit').RequestHandler | import('@sveltejs/kit').UpgradeHandler | undefined}
+	 */
 	let handler = mod[method] || mod.fallback;
 
 	if (method === 'HEAD' && mod.GET && !mod.HEAD) {
 		handler = mod.GET;
 	}
 
+	if (method === 'GET' && !mod.GET && mod.UPGRADE) {
+		handler = mod.UPGRADE;
+	}
+
 	if (!handler) {
 		return method_not_allowed(mod, method);
 	}
@@ -40,6 +48,13 @@ export async function render_endpoint(event, mod, state) {
 	}
 
 	try {
+		if (method === 'GET' && event.request.headers.has('upgrade') && event.upgrade && mod.UPGRADE) {
+			await handler(
+				/** @type {import('@sveltejs/kit').RequestEvent<Record<string, any>>} */ (event)
+			);
+			return;
+		}
+
 		let response = await handler(
 			/** @type {import('@sveltejs/kit').RequestEvent<Record<string, any>>} */ (event)
 		);

packages/kit/src/runtime/server/index.js

@@ -93,12 +93,19 @@ export class Server {
 	/**
 	 * @param {Request} request
 	 * @param {import('types').RequestOptions} options
+	 * @param {{request: import('http').IncomingMessage, socket: import('stream').Duplex , head: Buffer}?} webhookRequest
 	 */
-	async respond(request, options) {
-		return respond(request, this.#options, this.#manifest, {
-			...options,
-			error: false,
-			depth: 0
-		});
+	async respond(request, options, webhookRequest) {
+		return respond(
+			request,
+			this.#options,
+			this.#manifest,
+			{
+				...options,
+				error: false,
+				depth: 0
+			},
+			webhookRequest
+		);
 	}
 }

packages/kit/src/runtime/server/respond.js

@@ -54,9 +54,10 @@ const allowed_page_methods = new Set(['GET', 'HEAD', 'OPTIONS']);
  * @param {import('types').SSROptions} options
  * @param {import('@sveltejs/kit').SSRManifest} manifest
  * @param {import('types').SSRState} state
- * @returns {Promise<Response>}
+ * @param {{request: import('http').IncomingMessage, socket: import('stream').Duplex , head: Buffer}?} upgradeRequest
+ * @returns {Promise<void | Response>}
  */
-export async function respond(request, options, manifest, state) {
+export async function respond(request, options, manifest, state, upgradeRequest) {
 	/** URL but stripped from the potential `/__data.json` suffix and its search param  */
 	const url = new URL(request.url);
 
@@ -139,7 +140,7 @@ export async function respond(request, options, manifest, state) {
 	}
 
 	if (!state.prerendering?.fallback) {
-		// TODO this could theoretically break — should probably be inside a try-catch
+		// TODO this could theoretically break - should probably be inside a try-catch
 		const matchers = await manifest._.matchers();
 
 		for (const candidate of manifest._.routes) {
@@ -181,6 +182,7 @@ export async function respond(request, options, manifest, state) {
 		params,
 		platform: state.platform,
 		request,
+		upgrade: upgradeRequest || null,
 		route: { id: route?.id ?? null },
 		setHeaders: (new_headers) => {
 			for (const key in new_headers) {
@@ -328,6 +330,7 @@ export async function respond(request, options, manifest, state) {
 			event,
 			resolve: (event, opts) =>
 				resolve(event, opts).then((response) => {
+					if (!response) return;
 					// add headers/cookies here, rather than inside `resolve`, so that we
 					// can do it once for all responses instead of once per `return`
 					for (const key in headers) {
@@ -346,7 +349,7 @@ export async function respond(request, options, manifest, state) {
 		});
 
 		// respond with 304 if etag matches
-		if (response.status === 200 && response.headers.has('etag')) {
+		if (response?.status === 200 && response?.headers.has('etag')) {
 			let if_none_match_value = request.headers.get('if-none-match');
 
 			// ignore W/ prefix https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-None-Match#directives
@@ -381,7 +384,7 @@ export async function respond(request, options, manifest, state) {
 
 		// Edge case: If user does `return Response(30x)` in handle hook while processing a data request,
 		// we need to transform the redirect response to a corresponding JSON response.
-		if (is_data_request && response.status >= 300 && response.status <= 308) {
+		if (is_data_request && response && response.status >= 300 && response.status <= 308) {
 			const location = response.headers.get('location');
 			if (location) {
 				return redirect_json_response(new Redirect(/** @type {any} */ (response.status), location));
@@ -434,7 +437,7 @@ export async function respond(request, options, manifest, state) {
 			if (route) {
 				const method = /** @type {import('types').HttpMethod} */ (event.request.method);
 
-				/** @type {Response} */
+				/** @type {void | Response} */
 				let response;
 
 				if (is_data_request) {
@@ -484,7 +487,7 @@ export async function respond(request, options, manifest, state) {
 
 				// If the route contains a page and an endpoint, we need to add a
 				// `Vary: Accept` header to the response because of browser caching
-				if (request.method === 'GET' && route.page && route.endpoint) {
+				if (request.method === 'GET' && route.page && route.endpoint && response) {
 					const vary = response.headers
 						.get('vary')
 						?.split(',')

packages/kit/src/types/internal.d.ts

@@ -17,7 +17,8 @@ import {
 	RequestEvent,
 	SSRManifest,
 	Emulator,
-	Adapter
+	Adapter,
+	UpgradeHandler
 } from '@sveltejs/kit';
 import {
 	HttpMethod,
@@ -26,6 +27,8 @@ import {
 	RequestOptions,
 	TrailingSlash
 } from './private.js';
+import type { IncomingMessage } from 'node:http';
+import type { Duplex } from 'node:stream';
 
 export interface ServerModule {
 	Server: typeof InternalServer;
@@ -131,7 +134,8 @@ export class InternalServer extends Server {
 			/** A hook called before `handle` during dev, so that `AsyncLocalStorage` can be populated */
 			before_handle?: (event: RequestEvent, config: any, prerender: PrerenderOption) => void;
 			emulator?: Emulator;
-		}
+		},
+		webhookRequest?: { request: IncomingMessage; socket: Duplex; head: Buffer }
 	): Promise<Response>;
 }
 
@@ -386,6 +390,7 @@ export interface PageNodeIndexes {
 export type PrerenderEntryGenerator = () => MaybePromise<Array<Record<string, string>>>;
 
 export type SSREndpoint = Partial<Record<HttpMethod, RequestHandler>> & {
+	UPGRADE?: UpgradeHandler;
 	prerender?: PrerenderOption;
 	trailingSlash?: TrailingSlash;
 	config?: any;

packages/kit/src/utils/exports.js

@@ -72,6 +72,7 @@ const valid_page_exports = new Set([...valid_layout_exports, 'entries']);
 const valid_layout_server_exports = new Set([...valid_layout_exports]);
 const valid_page_server_exports = new Set([...valid_layout_server_exports, 'actions', 'entries']);
 const valid_server_exports = new Set([
+	'UPGRADE',
 	'GET',
 	'POST',
 	'PATCH',

packages/kit/src/utils/exports.spec.js

@@ -174,7 +174,7 @@ test('validates +server.js', () => {
 		validate_server_exports({
 			answer: 42
 		});
-	}, "Invalid export 'answer' (valid exports are GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD, fallback, prerender, trailingSlash, config, entries, or anything with a '_' prefix)");
+	}, "Invalid export 'answer' (valid exports are UPGRADE, GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD, fallback, prerender, trailingSlash, config, entries, or anything with a '_' prefix)");
 
 	check_error(() => {
 		validate_server_exports({

packages/kit/test/apps/options-2/package.json

@@ -16,10 +16,13 @@
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"cross-env": "^7.0.3",
+		"socket.io": "^4.8.1",
+		"socket.io-client": "^4.8.1",
 		"svelte": "^4.2.10",
 		"svelte-check": "^4.0.1",
 		"typescript": "^5.3.3",
-		"vite": "^5.3.2"
+		"vite": "^5.3.2",
+		"ws": "^8.18.0"
 	},
 	"type": "module"
 }

packages/kit/test/apps/options-2/src/routes/+page.svelte

@@ -8,3 +8,7 @@
 <p data-testid="assets">assets: {assets}</p>
 
 <a href="{base}/hello" data-testid="link">Go to /hello</a>
+<br />
+<a href="{base}/ws" data-testid="link">Go to /ws</a>
+<br />
+<a href="{base}/socket.io" data-testid="link">Go to /socket.io</a>

packages/kit/test/apps/options-2/src/routes/ws/+page.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { browser } from '$app/environment';
+	import { base } from '$app/paths';
+
+	let messages = [];
+
+	if (browser) {
+		const socket = new WebSocket(`${base}/ws`);
+
+		console.log(socket);
+
+		socket.onopen = () => {
+			console.log('websocket connected');
+			socket.send('hello world');
+		};
+
+		socket.onclose = () => {
+			console.log('disconnected');
+		};
+
+		socket.onmessage = (event) => {
+			console.log(event.data);
+			messages = [...messages, event.data];
+			console.log(messages);
+		};
+	}
+</script>
+
+<h1>Messages:</h1>
+
+<div>
+	{#each messages as message}
+		<p>{message}</p>
+	{/each}
+</div>

packages/kit/test/apps/options-2/src/routes/ws/+server.js

@@ -0,0 +1,19 @@
+import { WebSocketServer } from 'ws';
+
+const wss = new WebSocketServer({ noServer: true });
+
+wss.on('connection', (ws) => {
+	ws.on('error', console.error);
+
+	ws.on('message', (message) => {
+		console.log('received: %s', message);
+		ws.send(String(message));
+	});
+});
+
+export function UPGRADE({ upgrade }) {
+	wss.handleUpgrade(upgrade.request, upgrade.socket, upgrade.head, (ws) => {
+		console.log('UPGRADED');
+		wss.emit('connection', ws, upgrade.request);
+	});
+}