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🔥
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
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.
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 :)
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
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 😊
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)
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! 🙌😊)
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 ♥
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
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 👍🏻
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 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!
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.
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!
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!!!!
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')" :(
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 ✅
We finally have it in Nuxt! Almost, but still! Thanks for the video!
Hope you enjoy it!
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 🔥
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.
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 🔥
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 🔥
Rare video that Alex filmed during day
Well spotted! I did today as I was busy writing my thesis until Wednesday 👀😁
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 👌
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 😊
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)
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?
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 😝
how do you disconnect or not allow connect to websockets if they are not authenicated?
Could an external API send a request to the websocket?
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/ ☺️
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!
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! 🙌😊)
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 ♥
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
Check out github.com/unjs/nitro/issues/2171 for supported platforms!
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
Thank you, this is amazing I love your vids they are always helpful
Happy to help! 🙏🏻
Is there a way to send message to websocket from server-side?
You probably can by setting up a node websocket client, sure.
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 😊
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 😂
Love the usage of Brazilian meme lol
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 😊
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 do a video about Nitro Tasks?
Sure! Wrote it on the list 👌🏻
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 💚
You are awesome thank you!
Thank you so much 🙏🏻
Thank you ❤
You are welcome 🙏🏻
Really cool video. can you do a video about Nuxt test?
Yes, soon!
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 🙈
That's cool 🔥
Oh yess 🔥
Здарова Лёха!
Heyy!
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')" :(
ok apparently I needed to adjust the path to the websocket 🤦
Glad you got it resolved 😋
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
Lub dude
Не надо дядя, не надо 😮
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 🙌🏻