Theo's Typesafe Cult•2y ago

T3 + sockets?

I've been working with https://github.com/trpc/examples-next-prisma-websockets-starter which works just fine but I need a channel/room implementation with I believe socket.io provides, is there any existing repos that use this? with preferably WSS attaching to trpc's server 🙂

23 Replies

Keef•2y ago

If you are okay with soketi instead of socket.io

Keef•2y ago

https://github.com/pingdotgg/zapdos

GitHub

GitHub - pingdotgg/zapdos

Contribute to pingdotgg/zapdos development by creating an account on GitHub.

Keef•2y ago

https://docs.soketi.app/

soketi

Soketi is your simple, fast, and resilient open-source WebSockets server. 📣

Keef•2y ago

It doesn't hook into trpc's subscriptions but instead uses a zustand context with provider on the client Then you can subscribe to events that are spun off/whatever

ShoodeyOP•2y ago

I've read as much as could take and im so confused - Soketi: Compared with Pusher, you can achieve much more for less than one-third of the price. since im running my own wss - but why do i need pusher then? I need to ws but i also need to use it with trpc and as i have another app that needs to listen to events and it also uses trpc, any ideas?

Keef•2y ago

So soketi is ur websocket and it makes use of the pusher libs so you have access to all the fancy features pusher can provide at a much cheaper cost The pusher api is pretty encompassing but you want "channel/room implementation" Thats provided, you just have to use the client

Unknown User•2y ago

Message Not Public

Keef•2y ago

There really isn’t much, I recommend checking out their discord https://discord.gg/xUc4P45m

Unknown User•2y ago

Message Not Public

ShoodeyOP•2y ago

I have been playing around with zapdos's approach and it got me convinced tbh - I like the flexibility soketi offers and i dont think trpc's subscriptions are easily hookable with it (at least after several trials) - however im a bit stuck again wherein i am able to send events but not receive them... here's a bit of my codebase: - exact same pusher.tsx and pusher.ts implementations for provider & serverclient - page.tsx (both wrapper and component)

<PusherProvider slug={`room-${id}`}>
  <PusherStuff />
</PusherProvider>
----
const PusherStuff = () => {
  useSubscribeToEvent("new-message", (data) => {
    console.log(data);
  });

  const members = useCurrentMemberCount();

  return (
    <>
      <div>Pusher stuff</div>
      <p>{members}</p>
    </>
  );
};

<PusherProvider slug={`room-${id}`}>
  <PusherStuff />
</PusherProvider>
----
const PusherStuff = () => {
  useSubscribeToEvent("new-message", (data) => {
    console.log(data);
  });

  const members = useCurrentMemberCount();

  return (
    <>
      <div>Pusher stuff</div>
      <p>{members}</p>
    </>
  );
};

- trpc endpoint

.mutation(async ({ input }) => {
      pusherServer.trigger(`room-${input.id}`, "new-message", {
        ...input,
      });
      return input;
    }),

.mutation(async ({ input }) => {
      pusherServer.trigger(`room-${input.id}`, "new-message", {
        ...input,
      });
      return input;
    }),

members count works fine, but i dont see anything when the event is triggered - i do see log on soekti tho

:zap: HTTP Payload received:
{
  name: 'new-message',
  data: '{"id":"xxx","message":"wdwd"}',
  channels: [ 'room-xxx' ]
}

:zap: HTTP Payload received:
{
  name: 'new-message',
  data: '{"id":"xxx","message":"wdwd"}',
  channels: [ 'room-xxx' ]
}

maybe worth noting that 1. i get this warning on browser

WebSocket connection to 'ws://localhost:6001/app/xxx?protocol=7&client=js&version=8.0.0&flash=false' failed: WebSocket is closed before the connection is established.

2. when i trigger events from pusher dashboard i dont see them on soketi? ok after a loot of investifation this doesnt EVEN work on zapdos - the only reason u get new questions is because it refetches on window focus.... and not because of the custom hook...

Keef•2y ago

I have a similar set up on my app and it does work. It could be your soketi configuration that’s the issue

ShoodeyOP•2y ago

Idk how i missed your message, thanks could u share config with me via dm? Or i can try to ping later today after i wake up

Keef•2y ago

So I didn't really touch anything in the soketi config aside from debug. I spin off messages using this from my server

pusherServerClient.trigger(
   roomName,    
   eventName,
   JSON.stringify(any),
);

pusherServerClient.trigger(
   roomName,    
   eventName,
   JSON.stringify(any),
);

On the front end I do this:

 
useSubscribeToEvent(eventName, async (e: SOMETYPE => {
        utils.setInfiniteData(...)
})

 
useSubscribeToEvent(eventName, async (e: SOMETYPE => {
        utils.setInfiniteData(...)
})

I have a infinite list and these messages are added to the bottom. It has been working for me since I've set it up My rooms are very broad though where a client subscribes to their tenant's room and I just push all events to that room. Then I just use it in specific views I did this really quickly so plz no sadKitty

ShoodeyOP•2y ago

cool and do you use soketi with this?

Keef•2y ago

yeah I had soketi running in a railway container

Unknown User•2y ago

Message Not Public

Keef•2y ago

Could it be from missing the cluster? @ibrahimyaacob

Unknown User•2y ago

Message Not Public

Keef•2y ago

Let me dig it up. I’ve since just ended up using ably since I didn’t have the time to flesh it out and it’s a commercial project I used “main” but I need to check my soketi config if that’s related to anything

Unknown User•2y ago

Message Not Public

Heljas•2y ago

@ibrahimyaacob Hi, I think I found a solution, check out my repo: https://github.com/Heljas/soketi-railway You need to override a Railway port to 6001 and set the host to 0.0.0.0

GitHub

GitHub - Heljas/soketi-railway: Dockerfile with the latest version ...

Dockerfile with the latest version of Soketi with an explanation of how to host it on Railway. - GitHub - Heljas/soketi-railway: Dockerfile with the latest version of Soketi with an explanation of ...

ManuRodgers•2y ago

Hey mate, can you give me some code example in terms of how you combine ably with tRPC?

Keef•2y ago

I stick to client side with the websocket. Back when I was talking about this the story around it wasn't toooooooo great I'm not sure if its viable to do now @manurodgers Trpc is only involved for handing me an auth token so I can auth with my provider

Gaming

Programming

T3 + sockets?