Skip to main content
Version: 10.x

WebSocket Link

wsLink is a terminating link that's used when using tRPC's WebSockets Client and Subscriptions, which you can learn more about here.

Usage

To use wsLink, you need to pass it a TRPCWebSocketClient, which you can create with createWSClient:

client/index.ts
ts
import { createTRPCProxyClient, createWSClient, wsLink } from '@trpc/client';
import type { AppRouter } from '../server';
const wsClient = createWSClient({
url: 'ws://localhost:3000',
});
const trpcClient = createTRPCProxyClient<AppRouter>({
links: [wsLink<AppRouter>(wsClient)],
});
client/index.ts
ts
import { createTRPCProxyClient, createWSClient, wsLink } from '@trpc/client';
import type { AppRouter } from '../server';
const wsClient = createWSClient({
url: 'ws://localhost:3000',
});
const trpcClient = createTRPCProxyClient<AppRouter>({
links: [wsLink<AppRouter>(wsClient)],
});

The wsLink function requires a TRPCWebSocketClient to be passed, which can be configured with the fields defined in WebSocketClientOptions:

ts
export interface WebSocketLinkOptions {
client: TRPCWebSocketClient;
}
function createWSClient(opts: WebSocketClientOptions) => TRPCWebSocketClient
export interface WebSocketClientOptions {
url: string;
WebSocket?: typeof WebSocket;
retryDelayMs?: typeof retryDelay;
onOpen?: () => void;
onClose?: (cause?: { code?: number }) => void;
}
ts
export interface WebSocketLinkOptions {
client: TRPCWebSocketClient;
}
function createWSClient(opts: WebSocketClientOptions) => TRPCWebSocketClient
export interface WebSocketClientOptions {
url: string;
WebSocket?: typeof WebSocket;
retryDelayMs?: typeof retryDelay;
onOpen?: () => void;
onClose?: (cause?: { code?: number }) => void;
}

Reference

You can check out the source code for this link on GitHub.