cidit
cidit
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
@OtterSwims checking in that it does indeed work
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
np np
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
👍 ttyl
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
but i can share with you the relevant snippets, which are basically just the ones above
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
unfortunately its propriatery, so i cant show u
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
ayt lmk if u have issues. cant guarantee a timely response, but there will be one
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
definetly
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
for my use case i only need websockets for client-server interactions so i didnt bother looking up more
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
i think i might be completely wrong
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
i think the reasoning is that since websockets are more efficient, you might as well use websockets instead of http if you already have a connection
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
because of the ending link not being http
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
yes, if i understand correctly all of your trafic goes thru websocket now
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
in theory, do those steps and subscriptions should work correctly and u can just look at the docs to find what to do next
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
from what i understand, the frontend "trpc hook" (src/pages/api/trpc/[trpc].ts) looks for what it needs in src/utils/api.ts
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
i added a script in my package.json for that like this:
"dev:wss": "cross-env PORT=3005 tsx watch src/server/wss.ts --tsconfig tsconfig.server.json",
"dev:wss": "cross-env PORT=3005 tsx watch src/server/wss.ts --tsconfig tsconfig.server.json",
that way, when i run
pnpm dev:wss
pnpm dev:wss
it launches the wss server, and then i do
pnpm dev
pnpm dev
which starts the next server
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
yea
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
heres the catch: you launch them separately
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
alot of ppl do a getEndingLink function instead that fallbacks to a httpBatchLink if window is undefined. i omitted it for simplicity, but you should do that too.
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
then, add the websockets ending link in src/utils/api.ts:
import { createWSClient, wsLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";

const wssLink = wsLink<AppRouter>({
client: createWSClient({
url: "ws://localhost:3005",
onOpen: () => console.info("ws con established"),
onClose: () => console.info("ws con closed"),
}),
});

export const api = createTRPCNext<AppRouter>({
config({ ctx: _ctx }) {
return {
// ...
links: [
// ...
wssLink
],
};
},
import { createWSClient, wsLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";

const wssLink = wsLink<AppRouter>({
client: createWSClient({
url: "ws://localhost:3005",
onOpen: () => console.info("ws con established"),
onClose: () => console.info("ws con closed"),
}),
});

export const api = createTRPCNext<AppRouter>({
config({ ctx: _ctx }) {
return {
// ...
links: [
// ...
wssLink
],
};
},
56 replies
TTCTheo's Typesafe Cult
Created by cidit on 12/10/2023 in #questions
im having trouble setting up trpc w/ websockets on latest t3...
Basically, create a wss.ts in src/server (assuming your sources folder is called src, ofc) and fill it with the following:
import {WebSocketServer} from "ws"
import { applyWSSHandler } from "@trpc/server/adapters/ws"
import {appRouter} from "src/server/api/root"
import { createTRPCContext } from "src/server/api/trpc"

const wss = new WebSocketServer({
port: 3005
})

const handler = applyWSSHandler({
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
wss, router: appRouter, createContext: createTRPCContext as any
})

wss.on("connection", (ws) => {
const fakeClientId = Math.floor(Math.random() * 1000)
console.info(`client_connected ${fakeClientId}`)
ws.once("close", () => {
console.info(`cliend_close ${fakeClientId}`)
})
})


console.info("wss enabled")

process.on('SIGTERM', () => {
console.log('SIGTERM');
handler.broadcastReconnectNotification();
wss.close();
});
import {WebSocketServer} from "ws"
import { applyWSSHandler } from "@trpc/server/adapters/ws"
import {appRouter} from "src/server/api/root"
import { createTRPCContext } from "src/server/api/trpc"

const wss = new WebSocketServer({
port: 3005
})

const handler = applyWSSHandler({
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
wss, router: appRouter, createContext: createTRPCContext as any
})

wss.on("connection", (ws) => {
const fakeClientId = Math.floor(Math.random() * 1000)
console.info(`client_connected ${fakeClientId}`)
ws.once("close", () => {
console.info(`cliend_close ${fakeClientId}`)
})
})


console.info("wss enabled")

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