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
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?