Integrating WebSockets in Nuxt and Nitro

[@TheAlexLichter]

Who was looking forward to WebSockets? 🙌🙌🙌

[@Indam1]

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🔥

[@s4ndeep1203]

Suggestion: Would love to have a video by you on Nuxt Layers !

[@TheAlexLichter]

Noted 👌🏻

[@geek-de3pi]

@@TheAlexLichter 1 suggestion nuxt layers with each layer having own local modules

[@ZiadMalik-fs7ps]

Super relevant video for an app I am working on right now, keep up the good videos! Not enough Nuxt content by far!

[@TheAlexLichter]

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 KZbin 🙏🏻 Thank you so much! 🙌🏻

[@damiangowala5681]

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

[@TheAlexLichter]

Noted Damian ✅

[@prishanf]

Very easy to understand example. I’m loving Nuxt how simple the web socket api is both FE and backend.

[@TheAlexLichter]

Delighted to hear that the example was great ☺️ Right? The APIs are so elegant 🔥

[@todpale]

We finally have it in Nuxt! Almost, but still! Thanks for the video!

[@TheAlexLichter]

Hope you enjoy it!

[@lbmgary]

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 :)

[@TheAlexLichter]

Yes please! Definitely share it! Would love to see more examples on it 🔥

[@randomtimessomehow]

I love these videos, I'm learning something new everytime :) Keep up the good work

[@TheAlexLichter]

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 🔥

[@silvesterwali6565]

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

[@TheAlexLichter]

Absolutely! Noted 👌

[@joschua6523]

Would love to see a video on IndexedDB and how to handle reactivity while using it!

[@TheAlexLichter]

I'd go with idb-keyval and the composable around @ vueuse.org/integrations/useIDBKeyval/ ☺️

[@m.h.323]

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.

[@luc122c]

Thanks for another great video! I’m going to have a look at proxying web sockets using nitro

[@TheAlexLichter]

You are welcome 🙌🏻 Were you successful? ☺️

[@luc122c]

@@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 😝

[@nonameviz]

I already use this + the task feature 🔥 Love you all 💚💚

[@TheAlexLichter]

So amazing, right? What do you use it for? ☺️

[@nonameviz]

@@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💚

[@TheDigitalSight]

Can you also create video on consuming streaming responses for text & video? For example, How to render responses from OpenAI api or local LLMs?

[@TheAlexLichter]

On the list 👍🏻

[@TheDigitalSight]

If possible will you create reusable composable we can use? or even better if possible integrate in nuxt core@@TheAlexLichter

[@TheDigitalSight]

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 ♥

[@MissedWarrior]

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!

[@TheAlexLichter]

Good point! Thanks for the heads up 😊

[@nanaassumadu4997]

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

[@TheAlexLichter]

You are welcome! How did the implementation go?

[@SKTTWkartrider]

Rare video that Alex filmed during day

[@TheAlexLichter]

Well spotted! I did today as I was busy writing my thesis until Wednesday 👀😁

[@svenvanreenen]

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?

[@TheAlexLichter]

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 😊

[@ralacerda12]

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?

[@TheAlexLichter]

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)

[@valacshiro378]

Thank you, this is amazing I love your vids they are always helpful

[@TheAlexLichter]

Happy to help! 🙏🏻

[@trinhnam3117]

Your video is very helpful, thank you. Can you share how to handle authentication with Nuxt3, I'm looking forward to it ^^

[@TheAlexLichter]

Glad to hear 🙏🏻 Auth is on the list, yes. But unfortunately a *very broad* topic to cover. So many ways to do auth 🙈

[@randomtimessomehow]

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?

[@TheAlexLichter]

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 👍🏻

[@randomtimessomehow]

Thanks again! 🙏🏻@@TheAlexLichter

[@QueeeeenZ]

Can you do a video about Nitro Tasks?

[@TheAlexLichter]

Sure! Wrote it on the list 👌🏻

[@sematoghem]

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!!!!

[@TheAlexLichter]

It is actually pretty "tricky" given the runtime-agnostic approach. In "node only" it'd be simple though, yes.

[@michaelpeters9551]

You are awesome thank you!

[@TheAlexLichter]

Thank you so much 🙏🏻

[@夕阳子]

Really cool video. can you do a video about Nuxt test?

[@TheAlexLichter]

Yes, soon!

[@productdevbook]

Thank you ❤

[@TheAlexLichter]

You are welcome 🙏🏻

[@leestevenscoder]

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.

[@leestevenscoder]

because I need to `pnpm i @vueuse/core` and import from that

[@TheAlexLichter]

Should be auto imported when using the nuxt module (shown in the config beforehand) ☺️

[@leestevenscoder]

Yes. There it is 😂

[@dracula5752]

how do you disconnect or not allow connect to websockets if they are not authenicated?

[@Gornius]

Can you do the same with Server Sent Events? It's uni-directional (server-to-client), but works on the same protocol (HTTP).

[@TheAlexLichter]

SSE also work with nitro, yes!

[@miguelcassimiro8103]

Could an external API send a request to the websocket?

[@miguelcassimiro8103]

Love the usage of Brazilian meme lol

[@Shulkerkiste]

Firebase is listed at 1:20 In which way will it be supported? Does Firebase support Websockets?

[@TheAlexLichter]

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! 🙌😊)

[@iUmerFarooq]

That's cool 🔥

[@TheAlexLichter]

Oh yess 🔥

[@RonGeorgePile]

Does anyone have a Nuxt chat app that works on production? Which hosting platform did you use? I'm currently stuck after deploying to Netlify which can't support web sockets

[@TheAlexLichter]

Check out github.com/unjs/nitro/issues/2171 for supported platforms!

[@jurarexx]

Is there a way to send message to websocket from server-side?

[@TheAlexLichter]

You probably can by setting up a node websocket client, sure.

[@devoxygen7395]

Lub dude

[@Zyk0tiK]

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?

[@TheAlexLichter]

As mentioned from 00:50 on, make sure you use the nightly build of nuxt + nuxi which are necessary at the moment 😊

[@Zyk0tiK]

@@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!

[@TheAlexLichter]

It should also run fine with `npm run dev` in there 😊

[@iUmerFarooq]

Why we can't call https api in nuxt server. It gives ssl issue. How and when it will solve?

[@svenvanreenen]

I can without issues. $fetch working great in nitro server.

[@TheAlexLichter]

You might need NODE_TLS_REJECT_UNAUTHORIZED='0', see e.g. github.com/nuxt/nuxt/issues/26222

[@iUmerFarooq]

@@TheAlexLichter Yeah it's work. If possible please make a tutorial on it. Thanks a lot 💚

[@carlotadias9335]

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

[@some_body_qtyeeuy]

Здарова Лёха!

[@TheAlexLichter]

Heyy!

[@undertale-15075O]

Не надо дядя, не надо 😮

[@DougLopes]

holy 4 min of explanation and config to use this, doesn't look trustable

[@TheAlexLichter]

How long do you usually spend time reading the docs + implementing the learnt knowledge? I bet more than 4 minutes 😁

[@DougLopes]

@@TheAlexLichter absolutelly yes, just saying that looks unsafe for prod if is so experimental.

[@TheAlexLichter]

Ah well, a fair point to use it carefully but it works fine! Just make sure to pin the version in case changes come 🙌🏻

[@lcapocer]

This is not working for me. First of all it says useWebSocket is not defined hence I needed to pnpm i @vueuse/nuxt @vueuse/core and now it says "Cannot read properties of undefined (reading 'host')" :(

[@lcapocer]

ok apparently I needed to adjust the path to the websocket 🤦

[@TheAlexLichter]

Glad you got it resolved 😋