What is the best way to stream info from server?
I am looking into streaming progress updates from the server to the front end, is the best way of doing this sockets? Or is there an easier way?
Thank you!
5 Replies
Hi @Dimitris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The best way to stream progress updates from the server to the frontend in Wasp is to use WebSockets. Wasp provides a fully integrated WebSocket experience using Socket.IO on both the client and server. This approach is ideal for real-time updates, such as streaming progress, because it allows the server to push events to the client instantly.
To set this up in Wasp:
1. Define your WebSocket logic on the server by implementing a
webSocketFn function, where you can emit events (such as progress updates) to connected clients.
2. Enable WebSockets in your Wasp file by specifying the webSocket field in your app definition and linking it to your webSocketFn.
3. On the client, use the useSocket and useSocketListener hooks in your React components to listen for and display progress updates.
Here’s a summary from the docs:
Wasp provides a fully integrated WebSocket experience by utilizing Socket.IO on the client and server. ... We handle making sure your URLs are correctly setup, CORS is enabled, and provide a usefulThere is no mention in the knowledge sources of an easier or more integrated way in Wasp to stream real-time updates from server to client than using WebSockets. Other approaches (like polling or server-sent events) are not documented as supported or recommended in Wasp. So, for your use case, WebSockets are the best and most supported way to stream progress updates from the server to the frontend in Wasp. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Dimitris, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?useSocketanduseSocketListenerabstractions for use in React components.
...
To get started, you need to:
1. Define your WebSocket logic on the server.
2. Enable WebSockets in your Wasp file, and connect it with your server logic.
3. Use WebSockets on the client, in React, viauseSocketanduseSocketListener.
4. Optionally, type the WebSocket events and payloads for full-stack type safety.
Web Sockets | Wasp Docs
I think the easiest way is WebSockets, it's a two way connection which enables the server to send data when something happens.
Alternatively, just ping every 5 seconds from the client, you send a param with your request "hey I have this ID that I received latest, give me newer records"
Thanks! What about server side events? Would that be possible, and if so better/worse?
You could achieve them via custom APIs I believe, I haven't tried it tbh. There are some advantages of SSE over Websockets - you can cache SSE responses, they are easier to scale I believe. The disadvantage is no two way communication obviously.
I think you should go for the simplest option first - and see how it works for you 🙂 you can always swap out things and optimize later on
Great thank you!