Integrating WebSockets in Nuxt and Nitro
Вставка
- Опубліковано 9 лип 2024
- 🎉 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 make sure you can use Nitro WebSockets
Info: Nuxt CLI v3.11.1 was released. YOU DON'T NEED THE NIGHTLY BUILD ANYMORE.
---
Links:
🔗 Code - github.com/manniL/alexander-l...
🔗 Nuxt CLI - github.com/nuxt/cli
🔗 Nitro WebSocket Docs - nitro.unjs.io/guide/websocket
🔗 VueUse useWebsocket - vueuse.org/core/usewebsocket
🔗 CrossWS - github.com/unjs/crossws
📺 Proxying your API - • The BEST way to proxy ...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:50 Setup to enable WebSockets
03:02 Check dependency versions
04:00 Demo App Setup
04:22 Integrating WebSockets on the server
07:15 Using it on the Client
12:05 Verifying in the browser
13:35 Adding one more functionality
17:05 Summary - Наука та технологія
Who was looking forward to WebSockets? 🙌🙌🙌
Wow, I started to work with WebSockets on Nuxt 3-5 hours ago and only now could create a chat. Time to solidify knowledge😁
Thank you for the great videos🔥
Suggestion: Would love to have a video by you on Nuxt Layers !
Noted 👌🏻
@@TheAlexLichter 1 suggestion nuxt layers with each layer having own local modules
Super relevant video for an app I am working on right now, keep up the good videos! Not enough Nuxt content by far!
Perfect! Glad it could help you straight away 🔥
I’ll definitely keep it up with the content! Your Super Thanks is ensuring it can keep going on and I can invest more time into UA-cam 🙏🏻
Thank you so much! 🙌🏻
An in-depth guide on Vite PWA for Nuxt would be amazing to see (workbox, caching, custom installation prompt, etc.); currently, there are very few resources on it
Noted Damian ✅
This is so awesome. Coming from Laravel where they do sooooo much to try to make it easy and, sorry, it just isn't. What a great demo. Rocking a connection with home assistant now turning lights on and off. Going to make it pretty and share it :)
Yes please! Definitely share it! Would love to see more examples on it 🔥
We finally have it in Nuxt! Almost, but still! Thanks for the video!
Hope you enjoy it!
I love these videos, I'm learning something new everytime :) Keep up the good work
Thank you so much Phillip! I highly appreciate it 🙏🏻
Donations like yours will allow me to spend even more time on the channel and such videos 🔥
Very easy to understand example. I’m loving Nuxt how simple the web socket api is both FE and backend.
Delighted to hear that the example was great ☺️
Right? The APIs are so elegant 🔥
Thanks for another great video! I’m going to have a look at proxying web sockets using nitro
You are welcome 🙌🏻
Were you successful? ☺️
@@TheAlexLichter I still have some stuff to workout, it's not going as I expected but that's the fun of living on the edge 😝
Thank you, this is amazing I love your vids they are always helpful
Happy to help! 🙏🏻
Thank you...This is awesome... I will definitely implement this in all my Nuxt project as a way to get feedback from my users
Thanks a lot
You are welcome! How did the implementation go?
I already use this + the task feature 🔥
Love you all 💚💚
So amazing, right?
What do you use it for? ☺️
@@TheAlexLichter I have a task that runs every 48hrs to purge unverified accounts for a community website I'm building.
The websocket feature to show some kind of progress to the users (some applications have multi stages).
Love and good wishes to you all, especially Pooya💚
You are awesome thank you!
Thank you so much 🙏🏻
Still can't wrap my head around the functionality. Tested the demo, which works fine, but that requires everything is in one composable. How would I approach it when I have an existing service, that is listening to events and writes in the DB. I want to get that eventName and push it to the Websocket. Example would be great.
Thank you ❤
You are welcome 🙏🏻
Rare video that Alex filmed during day
Well spotted! I did today as I was busy writing my thesis until Wednesday 👀😁
Lub dude
That's cool 🔥
Oh yess 🔥
I love these videos, I'm learning something new everytime :) I have a general question... Let's say I would actually have to build a chat functionality in my web app (luckily I don't!) in combination with Supabase. Supabase has a subscribe feature (I'm not sure if you're familiar with it). Could I develop such chat functionality solely with Supabase subscribe feature (so I can automatically retrieve new messages in realtime) or would I need the web socket handler on top of that?
Glad to hear that the videos are helpful 🙏🏻
Regarding your question: Yes, you could implement that with Supabase only as they provide the logic for broadcasting out of the box 👍🏻
Thanks again! 🙏🏻@@TheAlexLichter
Would love to see a video on IndexedDB and how to handle reactivity while using it!
I'd go with idb-keyval and the composable around @ vueuse.org/integrations/useIDBKeyval/ ☺️
This is really cool. I dont have much experience with websockets, so I have a storage question. How long will messages be stored, as long as the server runs? or should they be saved in a DB?
As mentioned in a comment earlier - the messages must be saved externally to be persisted. WebSockets are only a way to communicate and do not persist data by default 😊
amazing .. video. can you make another video how to handle properly file uploaded in nuxt fullstack. like laravel they can upload assets for public and private. and those asset will not missing/ lose after rebuild project
Absolutely! Noted 👌
how do you disconnect or not allow connect to websockets if they are not authenicated?
This is amazing.
But if I'm building a chat application I would need to save the messages somewhere (using unstorage), right?
If I have a array on the top of the 'websocket.ts' file, will that be avaliable for all instances of the websocket?
Also, I'm assuming this cannot be deployed on serverless, right?
Yes, saving would be helpful, eg in a KV store or even a database. Check out Nitros db0 layer or unstitched as you mentioned
A external variable would work as „in-memory storage“ but I’d not recommend that as you can’t share it across instances (Better use a kv then)
Firefox also has WebSocket debugging tool in response tab but since there were no messages after connection it simply showed that there were no messages 😅 Thanks for the vid!
Good point! Thanks for the heads up 😊
Can you do the same with Server Sent Events? It's uni-directional (server-to-client), but works on the same protocol (HTTP).
SSE also work with nitro, yes!
Really cool video. can you do a video about Nuxt test?
Yes, soon!
finally... this feature is so simple but long time to do. you can use socketio but it so not native and the bad thing is it work in dev but not in prod!!!!
It is actually pretty "tricky" given the runtime-agnostic approach. In "node only" it'd be simple though, yes.
Can you also create video on consuming streaming responses for text & video? For example, How to render responses from OpenAI api or local LLMs?
On the list 👍🏻
If possible will you create reusable composable we can use? or even better if possible integrate in nuxt core@@TheAlexLichter
Also I'll be using OpenAI api next week so may I know when you'll be uploading video for it if possible?@@TheAlexLichter
Thanks for teaching gems in nuxt ♥
Your video is very helpful, thank you. Can you share how to handle authentication with Nuxt3, I'm looking forward to it ^^
Glad to hear 🙏🏻
Auth is on the list, yes. But unfortunately a *very broad* topic to cover. So many ways to do auth 🙈
Firebase is listed at 1:20
In which way will it be supported?
Does Firebase support Websockets?
Firebase is listed as "needs investigation", meaning no guaranteed support at the time of recording
Follow along github.com/unjs/nitro/issues/2171 (+ get involved if possible! 🙌😊)
Is there a way to send message to websocket from server-side?
You probably can by setting up a node websocket client, sure.
Great stuff. Many thanks to Alex for being so cutting edge with Nuxt. But does anyone know why "useWebSocket is not defined"? Even when i get the same output from `pnpm why nuxi-nightly` as the video.
because I need to `pnpm i @vueuse/core` and import from that
Should be auto imported when using the nuxt module (shown in the config beforehand) ☺️
Yes. There it is 😂
I downloaded your example code from GitHub but I am unable to get it to connect to websockets with npm run dev, I have to build it and run it with node. Any ideas?
As mentioned from 00:50 on, make sure you use the nightly build of nuxt + nuxi which are necessary at the moment 😊
@@TheAlexLichter I used your code from github and did an npm install on it. The package.json says it's using nuxt-nightly... am I missing something else?
Aha, I see. `npx nuxi-nightly dev` to run it. All good!
It should also run fine with `npm run dev` in there 😊
Why we can't call https api in nuxt server. It gives ssl issue. How and when it will solve?
I can without issues. $fetch working great in nitro server.
You might need NODE_TLS_REJECT_UNAUTHORIZED='0', see e.g. github.com/nuxt/nuxt/issues/26222
@@TheAlexLichter Yeah it's work.
If possible please make a tutorial on it.
Thanks a lot 💚
Can you do a video about Nitro Tasks?
Sure! Wrote it on the list 👌🏻
Здарова Лёха!
Heyy!
Не надо дядя, не надо 😮
holy 4 min of explanation and config to use this, doesn't look trustable
How long do you usually spend time reading the docs + implementing the learnt knowledge? I bet more than 4 minutes 😁
@@TheAlexLichter absolutelly yes, just saying that looks unsafe for prod if is so experimental.
Ah well, a fair point to use it carefully but it works fine! Just make sure to pin the version in case changes come 🙌🏻