Hey! How do I integrate websockets or Socket.io into my project? Particularly to add a live chat functionality on one of my pages? This is my first time using Plasmic from my codebase and I haven’t seen really any information on this kind of integration with Plasmic. Any info would be much appreciated.
Long Live Plasmic.
Hi @a_vaughn, we don’t have a specific example of integrating Socket.io with Plasmic, but it shouldn’t be too different from integrating with any other React/NextJS codebase! They have pretty good documentation, for example: How to use with React | Socket.IO
The best way to integrate partly depends on the type of project (is it a Plasmic loader or codegen project), and how you plan to host it. You can either run a separate Socket.io, or directly in the Next.js server.
Either way, you’d probably want to implement something like a ChatWidget and register it as a code component, then add it to your pages in Plasmic. It would to something like:
Fetch autn token → connect socket → join chat room
Listen for messages
Emit message send events
On unmount leave the room (but maybe keep socket alive)
First, Thanks a bunch for the answer. The only other question I have is wether I could build that kind of component within the Plasmic editor, maybe using a data fetcher or graphql fetcher, or do I just have to import an external component? Thanks again
Sorry for the late reply! It’s necessary to use a code component for this at the moment, since current data fetching solution in the Studio don’t support websockets. It is possible that something like that could be added in the future, but I don’t have a specific timeline for it now.
Thanks, that answers it. Websockets/Live queries definitely would be a great implementation for Plasmic. But I agree, it shouldn’t be too hard with code components. Thanks again for the reply.