Websocket and SSE with Nuxt 3
Hi everyone, I'm struggling to setup a communication in my project and in my mind it is really simple but I didn't found a way to make the things work well. I have a external API using Fastify, that receives comments from other service. I need to my front update a list everytime my API send the new comment. I've been trying with Websocket but really doesn't work for me. Have someone implemented websocket or SSE that receives data from outside the application?
5 Replies
Do you want to provide a reproduction?
what exactly is the problem?
There is a native Websocket u can use. But for this ur must turn off ssr.
So, acttualy I set the same example of the unJS using SSE (https://nitro.unjs.io/guide/websocket)
I also watched the video about websockets by Alexander Lichter (https://www.youtube.com/watch?v=OfY7JcrqkPg). But my mainly question that I tried something but nothing works is how to send a message to the websocket from outside, by other API. A tried using a POST HTTP request but nothing happens.
WebSocket - Nitro
Nitro natively support a cross platform WebSocket API
Alexander Lichter
YouTube
Integrating WebSockets in Nuxt and Nitro
🎉 Nitro 2.9 was released just before Vue.js Amsterdam and brings new features such as a database layer, a task API and also WebSocket support! But how can we integrate it in a Nuxt application? This video will teach you 👌
Key points:
🛠 How to set up WebSockets in Nitro and in Nuxt
💡 Working from scratch to a functional application
⚠️ Hints to m...
You can implement an API Endpoint in your application (use authentification!) which sends the data from Fastify to Nuxt -> Inside the server endpoint use the socket to inform the client frontends?
I used something like this in a education project to inform the frontent about deleted user (sse and hooks):
https://github.com/Renegade1912/vit-rooms/blob/main/server/api/user/index.delete.ts
https://github.com/Renegade1912/vit-rooms/blob/main/server/utils/hooks.ts
https://github.com/Renegade1912/vit-rooms/blob/main/server/routes/sse.ts
Thanks a lot. I'll take a look into to adapt to my project.
Hope I can bring any result to share with you guys soon