Effortless Real-Time Chat Apps with Laravel Reverb and Vue.js 3

Laravel Reverb Tutorial: This video dives into building a seamless real-time chat application using Laravel Reverb and Vue.js 3! We'll show you how to leverage Reverb's power alongside Vue.js 3 to create a smooth, effortless chat experience for your users.
In this video, you'll learn:
- The magic of Laravel Reverb for real-time features
- Integrating Reverb with Vue.js 3 for a seamless frontend
- Building a real-time chat application step-by-step
- Essential techniques for a user-friendly chat experience
By the end of this video, you'll be equipped to build and deploy modern chat applications confidently!
Don't get left behind! Try Spec Coder: Supercharge Your Coding with AI!
50% off! Use code YT-FAMILY (limited time offer).
👉 qirolab.com/spec-coder
GitHub Repository:
github.com/qirolab/laravel-re...
Blog Post: Building Real-Time Chat Applications with Laravel Reverb and Vue 3
qirolab.com/posts/building-re...
🔥 Spec Coder: Supercharge Your Coding with AI! (Features & AI Setup)
• 🔥 Spec Coder: Supercha...
▶ Real-time Chat system (Laravel WebSockets, VueJs, Laravel-echo)
• Real-time Chat system ...
▶ Laravel Themer: Add multi-theme support for the Laravel application
• Laravel Themer: Add mu...
▶ VSCode Customisation Tips & Tricks
• VS Code Customisation ...
▶ Code Quality DevTools
• Code Quality DevTools
▶ #1: SPA Authentication using Laravel Sanctum Tutorial
• #1: SPA Authentication...
▶ #2: API Token Authentication using Laravel Sanctum
• #2: API Token Authenti...
▶ SOLID design principles Playlist
• SOLID design principles
▶ Install Laravel Valet Linux Plus
• #4: How to install Lar...
▶ Laravel Eloquent Relationships
• #1 - One to One relati...
▶ Laravel Excel Tutorial
• #1: Laravel Excel Expo...
#LaravelReverb #laravel #Vuejs3 #RealTimeChatApp #WebDevelopment #CodingTutorial #qirolab #programming #laravel11 #laravelphp #laravel_tutorial
Timestamps:
00:00 - Introduction
02:01 - Create Fresh Laravel 11 App
03:05 - (Optional) Installing Laravel-Themer Package for quick authentication scaffolding
07:06 - Display list of users on the Dashboard page
10:06 - Create a Chat Page
12:07 - Chat Component in Vue 3
17:07 - Create `ChatMessage` Model & Migration
19:28 - Display Chat messages
27:14 - Implementing the Send Message feature
30:38 - Installing Laravel Reverb
36:01 - Broadcasting `MessageSent` event & Creating Channel Route
38:21 - Listen for broadcasted messages in the Chat Component using Laravel Echo
40:33 - Fix scroll on receive a new message
42:32 - Wisper typing event using Laravel Echo
Support my work:
1. On BuyMeACoffee: www.buymeacoffee.com/qirolab
Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: qirolab
𝐓𝐰𝐢𝐭𝐭𝐞𝐫: / qirolab

[@QiroLab]

Don't get left behind! Try Spec Coder: Supercharge Your Coding with AI!
*50% off!* Use code *YT-FAMILY* (limited time offer).
👉 qirolab.com/spec-coder

[@Ehsankhan0577]

your videos are always very helpful. thanks

[@QiroLab]

So nice of you

[@ah-rahimi]

How can we receive events in the backend from frontend, we can use whisper() function?

[@DevShahin-zm8ni]

make some videos on basic concept of websocket, echo, pusher, broadcasting etc.

[@QiroLab]

Noted

[@gabbusaii3375]

hello, do you ever plan on making a react version for this?

[@QiroLab]

I haven't planned a separate video for React because the same logic can be applied in React.js as well. If you have any specific questions about how to implement it in React, feel free to ask!

[@marcinmaj3609]

please make the same with InertiaJs

[@QiroLab]

Implementation with Inertia.js is the same, just follow 38:26 in your component.

[@sagarghorai2616]

Hi, please show all online user list, i'm face the issue to handel the get all online user without refresh. i get online user when i refresh the page. Please help

[@QiroLab]

For that, you should watch this playlist: czcams.com/play/PL1TrjkMQ8UbWfFUCimQ50CdrR_J7QvEFW.html
It is a real-time chat using Laravel WebSocket, and the logic is the same with Laravel Echo.

[@arturodelosangeles]

shouldnt be sockets ? instead of ajax?

[@bommambo7425]

😂😂

[@QiroLab]

WebSocket is two-way communication over a single TCP connection; I used AJAX to store messages in the database and WebSockets for real-time communication.

[@alireza10up]

well

[@shaungbhone8368]

480p?

[@QiroLab]

Apologies for the low quality of the video. I made a mistake during the rendering process.

[@shaungbhone8368]

@@QiroLab nvm! A great video.

[@QiroLab]

Thanks