Issues with TRPC and Websockets in NextJS

[ghost]

I've tried to follow the docs and the two example apps (simple, advanced) to set up a TRPC server with Websockets and regular HTTP.

I am getting the error "error - ReferenceError: WebSocket is not defined" during the createWSClient() , in the WithTRPC function. I did work for about 5 min, and I do not know why, neither why it did work nor why it stopped since I did not change any of the code.

If anyone has any pointers or general feedback for improvements I'd be grateful.

_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { splitLink } from '@trpc/client/links/splitLink';
import { httpLink } from '@trpc/client/links/httpLink';
import getConfig from 'next/config';
import { withTRPC } from "@trpc/next";
import type { AppRouter } from '../server/routers/app';
import { createWSClient,wsLink } from '@trpc/client/links/wsLink';


function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}


const { publicRuntimeConfig } = getConfig();
const { APP_URL, WS_URL } = publicRuntimeConfig;

export default withTRPC<AppRouter>({
  config({ ctx }) {
    return {
      links:[
        splitLink({
          condition: (op) => op.type === 'subscription',
          true: wsLink({
            client: createWSClient({
              url: WS_URL,
            }),
          }),
          false: httpLink({
            url:`${APP_URL}/api/trpc`,
          }),
        })
      ],
    };
  },
  ssr: true,
})(MyApp);

[trpc].ts

import * as trpcNext from '@trpc/server/adapters/next';
import { appRouter } from '../../../server/routers/app';


// export API handler
export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => null,
});

Websocket server

import { appRouter } from './routers/app';
import { applyWSSHandler } from '@trpc/server/adapters/ws';
import ws from 'ws';


const wss = new ws.Server({
  port: 3001,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext:()=>null });

wss.on('connection', (ws) => {
  console.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once('close', () => {
    console.log(`➖➖ Connection (${wss.clients.size})`);
  });
});
console.log('✅ WebSocket Server listening on ws://localhost:3001');

process.on('SIGTERM', () => {
  console.log('SIGTERM');
  handler.broadcastReconnectNotification();
  wss.close();
});

Main Server

import * as trpc from '@trpc/server';
import { userRouter } from './user';
import wsRouter  from './ws';
export const appRouter =  trpc.router()
  .query('healthz', {
    async resolve() {
      return 'yay!';
    },
  })
  .merge("user.",userRouter)
  .merge("ws.", wsRouter )

// export type definition of API
export type AppRouter = typeof appRouter;

Websocket Router

import * as trpc from '@trpc/server';
import { Subscription } from '@trpc/server';
import {wsUserRouter} from './users';

const appRouter =  trpc.router()
.subscription('healthz', {
    resolve() {
        const num = Math.random()
        console.log(num)
      return new Subscription<number>((emit) => {
        const int = setInterval(() => {
          emit.data(num);
        }, 500);
        return () => {
          clearInterval(int);
        };
      })
    }}).merge("user.",wsUserRouter)

export default appRouter

Page using TRPC over Websocket

import Link from 'next/link';
import { useState } from 'react';
import { trpc } from 'utils/trpc';

export default function AboutPage() {
  const [num, setNumber] = useState<number>();
  trpc.useSubscription(['ws.healthz'], {
    onNext(n) {
      setNumber(n);
    },
    onError(err) {
      console.error('error', err);
    },

  });
  return (
    <div>
      Here&apos;s a random number from a sub: {num} <br />
      <Link href="/">
        <a>Index</a>
      </Link>
    </div>
  );
}

Package JSON

{
  "name": "fuzzy-barney",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "run-p dev:*",
    "dev:next": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "dev:wss": "cross-env PORT=3001 nodemon --watch src --ext .ts,.tsx,js,jsx --signal SIGTERM --exec \"ts-node --project tsconfig.server.json src/server/wsServer.ts\"",
    "db-up": "docker-compose up -d",
    "db-migrate-dev": "yarn prisma migrate dev",
    "dx": "run-s db-up db-migrate-dev dev"
  },
  "dependencies": {
    "@prisma/client": "3.15.2",
    "@trpc/client": "^9.25.3",
    "@trpc/next": "^9.25.3",
    "@trpc/react": "^9.25.3",
    "@trpc/server": "^9.25.3",
    "@types/node-fetch": "^2.6.2",
    "@types/ws": "^8.5.3",
    "cross-env": "^7.0.3",
    "next": "12.1.6",
    "node-fetch": "^3.2.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-query": "^3.39.1",
    "run-p": "^0.0.0",
    "ws": "^8.8.0",
    "zod": "^3.17.3"
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "prisma": "^3.15.2",
    "tailwindcss": "^3.1.4",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.4"
  }
}

[KATT]

I think you're initializing the wsLink on the server where there is no websockets. On my phone but a quick hack should be to do global.WebSocket = global.WebSocket || null

[ghost]

Thank you for the quick reply!

I tried to add the suggested snippet to all relevant files, but it sadly did not help. I get a new error now, but I'm guessing that might be that you updated the error message 🙏🏾

 Error: No WebSocket implementation found - you probably don't want to use this on the server, but if you do you need to pass a `WebSocket`-ponyfill

[KATT]

You seem to be missing this that ensures the wsLink is never used on the server

https://github.com/trpc/examples-next-prisma-starter-websockets/blob/daf54ca6576f3e290aa4f36dc7d0ff1eb718b716/src/pages/_app.tsx#L32-L44

[ghost]

You are completely right, thank you so much! 🙏

[yann-lauwers]

Hey, I think the way we should do it today has changed and I can't get it working.
I keep getting the following error in my console.
wsLink.mjs?c48a:73 WebSocket connection to 'ws://localhost:3001/' failed:
The only main difference I see with your code is that we can't merge routes anymore.

Can u help me in any way ?

[vincent-thomas]

I also get this error