WebSockets

[qbeauperin]

Creating a new discussion / feature request regarding Payload and WebSockets (related discussions #257 #1490 #2087 ).

I feel like there has to be a way to integrate nicely with Payload's existing hooks and/or API endpoints, but I honestly don't know a whole lot about WebSockets, so I'm curious to hear what the community and the Payload team current thoughts around the subject are.

[qbeauperin]

I'll get the discussion started with a use case of mine:

I'm building a "collaboration" plugin where users can post, respond, and resolve messages within the Payload admin (a la Google Docs), which could benefit a ton from having access to WebSockets.

2023-04-17_20-18-28.mp4

In this proof of concept, with the help of a Discord thread, I created a new WebSocket server with a custom endpoint.

When called from my messages collection's afterChange and afterDelete hooks, that endpoint emits an update to the ws server and tells whoever's listening that a message changed on this particular doc.

From my custom UI field component, I can then connect to that ws server, listen for any changes, and refresh the UI accordingly in real time. 🙌

The issue is that all the WebSocket server logic is setup in my server.ts file, which I won't be able to do once I package this in a standalone Payload plugin. I think?

---

So in this case, being able to do something like this for example:

const socket = io(`ws://localhost:3000/api/posts/${id}`);
socket.on('afterChange', (doc: Post) => {
    // Do whatever with this post that just changed
});

would be super handy.

[daniloitj]

Hi @qbeauperin , could you provide the component code? Congratulations on the work

[matthijs166]

That's an excellent suggestion! Implementing collection subscriptions, similar to Firebase, would indeed be a valuable addition. This feature could enhance real-time collaboration and data synchronization among clients. Picture this: a dynamic page where updates to a specific element, like the title, are instantly propagated to all connected clients. It would undoubtedly elevate the user experience and make your platform even more versatile and user-friendly. Great thinking! 👏🚀

[matthijs166]

This feature would also improve the live preview! #4281

[milanp93]

Hello guys, just follow up on this, what happened with this? Is this supported now with payload and if not is there code example how to implement this? Thanks

[eltonmorais]

Subscription and reactiveness is one core function of MongoDB. It really should be supported...