Theo's Typesafe Cult•14mo ago

next-prisma-websockets-starter explanation

This is the repo I'm trying to copy websocket setup from... https://github.com/trpc/examples-next-prisma-websockets-starter Inside of the server folder in this template, [https://github.com/trpc/examples-next-prisma-websockets-starter/tree/main/src/server] there is a prodServer.ts file and a wssDevServer.ts file. How are these files used?? When and how is the prodServer.ts file used(ran) and how is the wssDevServer.ts file ran? Because in the trpc.ts file [https://github.com/trpc/examples-next-prisma-websockets-starter/blob/main/src/utils/trpc.ts] the wsLink is used but there are no checks for dev or prod. And WS_URL is imported from publicRuntimeConfig. This is confusing. The tRPC docs also do it differently. They hardcode the websocket urls. And there are no checks for dev and prod.

GitHub

GitHub - trpc/examples-next-prisma-websockets-starter: 🏓 tRPC Next....

🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.

38 Replies

kenny•14mo ago

This is what my trpc.ts file in the utils folder looks like

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return "";
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;

export type RouterOutputs = inferRouterOutputs<AppRouter>;

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return "";
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;

export type RouterOutputs = inferRouterOutputs<AppRouter>;

I want to add my websocket url to this. But the template from github does it differently. the docs also do it differently. Web dev simplified on Youtube also has a different setup. This is my wssServer.ts file

import { createContext } from "./context";
import { appRouter } from "./api/root";
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 });

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();
});

import { createContext } from "./context";
import { appRouter } from "./api/root";
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 });

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();
});

tbh I don't know how this is gonna run. It has no exports.

Alejo•14mo ago

Quickly looking at the repo, they seem to simply be called from scripts in package.json, start and dev:wss, For npm run dev, it excecutes pnpm migrate-dev && run-p dev:* which means it is running both dev:next and dev:wss run-p is just a package that lets you run package.json scripts in parallel

kenny•14mo ago

oww the tRPC don't show the package.json setup I don't think that would work for me tho Cuz it's for pnpm man this is a headache.

Gaming

Programming

next-prisma-websockets-starter explanation