anan7•2y ago

Websocket is not defined error

I'm getting a "WebSocket is not defined error" on my next app connected to an express backend. Any idea what I'm doing wrong? My server/index file is

import * as trpcExpress from "@trpc/server/adapters/express";
import { applyWSSHandler } from "@trpc/server/adapters/ws";
import express from "express";
import cors from "cors";
import { appRouter } from "./routers/_app";
import { createContext } from "./context";
import ws from 'ws'

const app = express();
app.use(cors({ origin: ["http://localhost:3000", "http://localhost:3001"] }));
app.use(
    "/trpc",
    trpcExpress.createExpressMiddleware({
        router: appRouter,
        createContext,
    })
);

const server = app.listen(8000);

applyWSSHandler({
    wss: new ws.Server({ server }),
    router: appRouter,
    createContext
})

My context file is

import { inferAsyncReturnType } from "@trpc/server";
import * as trpcExpress from "@trpc/server/adapters/express";
import { NodeHTTPCreateContextFnOptions } from '@trpc/server/adapters/node-http';
import { IncomingMessage } from 'http';
import ws from 'ws';

export const createContext = ({ req, res }: trpcExpress.CreateExpressContextOptions |  NodeHTTPCreateContextFnOptions<IncomingMessage, ws>) => {
    return ({
        req, res
    })
}
export type Context = inferAsyncReturnType<typeof createContext>;

1 Reply

anan7•2y ago

My Next app's _app.tsx file is

import React, { useState } from 'react';
import '../styles/globals.css';
import { AppProps } from 'next/app';
import Head from 'next/head';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink, createWSClient, wsLink, splitLink } from '@trpc/client';
import { trpc } from '@/utils/trpc';

function getCookie(name: string) {
  const cookies = document.cookie.split(";");
  for (let cookie of cookies) {
    let [cookieName, cookieValue] = cookie.trim().split("=");
    if (cookieName === name) return cookieValue;
  }
  return "empty";
}

export default function SharedApp(props: AppProps) {
  const { Component, pageProps } = props;

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        splitLink({
            condition: op => { return op.type === "subscription"
          },
          true: wsLink({
            client: createWSClient({
              url: 'ws://localhost:8000/trpc',
            })
          }),
          false: httpBatchLink({
            url: 'http://localhost:8000/trpc',
            headers() {
              return {
                authorization: getCookie("user-token"),
              };
            },
          }),
        })
      ],
    }),
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <Head>
          <title>Cravin</title>
          <link rel="icon" href="/cravinwebicon16.png" />
          <meta name="description" content="An app for serving food" />
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        </Head>
        <Component {...pageProps} />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

Little help here please?