Websocket :)

[lantos1618]

Hey awasome work,
Could you give a shot at adding websockets to this project.

I gave it a shot

import { browser } from '$app/env';
import type { Router } from '$lib/server/trpc';
import * as trpc from '@trpc/client';
import type { inferProcedureInput, inferProcedureOutput } from '@trpc/server';
import trpcTransformer from 'trpc-transformer';
import { httpLink } from '@trpc/client/links/httpLink';
import { wsLink, createWSClient } from '@trpc/client/links/wsLink';
import { splitLink } from '@trpc/client/links/splitLink';

const url = browser ? '/trpc' : 'http://localhost:3000/trpc';

const httpUrl = 'http://localhost:3000/trpc';
const wsUrl = 'ws://localhost:3000/trpc';

export default (loadFetch?: typeof fetch) => {
  try {
    trpc.createTRPCClient<Router>({
      transformer: trpcTransformer,
      links: [
        splitLink({
          condition: (op) => {
            return op.type === 'subscription';
          },
          true: wsLink({
            client: createWSClient({
              url: wsUrl
            })
          }),
          false: httpLink({
            url: httpUrl
          })
        })
      ]
    });
  } catch {
    return trpc.createTRPCClient<Router>({
      url: '/trpc',
      transformer: trpcTransformer,
      fetch: loadFetch
    });
  }
};

type Query = keyof Router['_def']['queries'];
type Mutation = keyof Router['_def']['mutations'];

export type InferQueryOutput<RouteKey extends Query> = inferProcedureOutput<
  Router['_def']['queries'][RouteKey]
>;
export type InferQueryInput<RouteKey extends Query> = inferProcedureInput<
  Router['_def']['queries'][RouteKey]
>;
export type InferMutationOutput<RouteKey extends Mutation> = inferProcedureOutput<
  Router['_def']['mutations'][RouteKey]
>;
export type InferMutationInput<RouteKey extends Mutation> = inferProcedureInput<
  Router['_def']['mutations'][RouteKey]
>;

just don't know how to pull i the WS server into svelte

[TheBotlyNoob]

related: sveltejs/kit#1491

[icflorescu]

Let's see if SvelteKit comes with native WebSocket support first...

[SrZorro]

Looks like oficial WebSocket support its in the "soon" milestone and 6 months had passed from the creation of this ticket.

As it looks like its not going to be "soon" enough for my project I opened a pull request where Im adding support for websockets to trpc-sveltekit following this workaround https://joyofcode.xyz/using-websockets-with-sveltekit