Real Time Chat With Laravel Reverb

Learn the ins and outs of Laravel Reverb, the new open source web socket server from Laravel. Using a simple real time chat example using Livewire Volt, I'll guide you on how to start using Laravel Reverb
Chat Box: gist.github.com/tuto1902/d183...
Code: github.com/tuto1902/reverb-chat
Credit to Kaushik Thakkar for the inspiration of the chat box livewire component.
devkaushik.hashnode.dev/how-t...
Latest Subscriber: Maximus
Subscriber Goal: ||||||||||||||| 70% |||||||........ 3.53K/5K
Start creating Filament Admin Panels today with the Filament Bootcamp
👉jorgearturorojas.gumroad.com/...
Do you like my content? Buy me a coffee and help the channel grow ☕️ mercury.streamelements.com/ti...
Latest tippers: MilenKo - $10.00, Sean - $5.00, Daniel GAMEL - $1.00, Mwest2020 - $5.00
Join me on Discord
/ discord
Discord Goal: ||||||||||||||| 74% ||||||||....... 224/300
Latest discord member: dorian0325♯0

[@FaizanAmin_Faizi]

By the way thanks a lot, the private channel part was really awesome ❤

[@1337Anz]

Thank you!!!!!! I've been stuck so long not having any idea why my client wasn't receiving any events.. much love from here!

[@Tuto1902]

I know the feeling. I'm glad I could help!

[@user-tj7sw4fe8g]

Great Tutorial! it help us a lot! we will try to follow this!

[@justink.6231]

It was useful and helpful. I will try to implement such a scenario in my own code.

[@jonathans.8650]

Great Video again! 🤩

[@Tuto1902]

Thanks! 😁

[@Rafa_Marques0202]

thanks, you really opened my mind 😊

[@tzalejo82]

Thanks for the video!!!

[@sinaahmadpour3180]

Thanks for the great material 🙏🏻

[@Tuto1902]

I'm glad you enjoyed it! 😁

Saludos desde Chihuahua, México

[@belikode]

thank you for the queue connection mate

[@Tuktuk_Academy]

its fantastic

[@solaymanmousa5083]

thanks i was need this

[@ahmadrio]

terimakasih dengan konten yang sangat membantu saya menambah skill di laravel. good luck

[@Tuto1902]

Saya senang Anda menyukai video dan konten saya. P.S. translated using open A.I.

[@programmertelo]

amazing video 😍

[@Tuto1902]

Thank you!!

[@ArtH2O]

Great Job Arturo! I would like to ask you about the limitations of the private or public channels.

[@Tuto1902]

Sure thing! Let me know what questions you have and I'll do my best to answer them properly.

[@muntasirhasan2052]

Thanks for you information i tried this and its working very good in my local machine but when i am moving it to production it gives BroadcastException: Pusher Error (Not found) when i trigger Event I think you may help me Thanks

[@diazwatson]

Thanks for creating and sharing this content 👍👍 I’m working on a multiplayers game where all players connect to a room then the same card is presented to all players but only the current player can interact with it. After that another card is presented and the next player plays, etc. Would you recommend Laravel Reverb for this kind of implementation?

[@Tuto1902]

Yeah, sounds like a cool idea. You can pass player ids in dispatched events so you can control which player gets to interact with the card.

[@jjplays404]

Awesome. which vscode icons you are using for your vscode explorer (right side panel) ?

[@Tuto1902]

catpuccin icons

[@samubella]

You can use broadcast helper to "dispatch" event without hit queue

[@Tuto1902]

Interesting. I haven't tested this but, doesn't it contradicts the broadcasting documentation? It says that -"By default, each broadcast event is placed on the default queue for the default queue connection specified in your queue.php configuration file". Does the broadcast() helper simply bypasses the default broadcast queue configuration entirely? While convenient for local development, I would advise against it since you might want to be able to switch between live and queued events with just one change to the .env file. laravel.com/docs/11.x/broadcasting#broadcast-queue

[@SiddharthDivetiya]

Awesome, Thanks. I am facing 1 issue after hitting command "laravel new chat", It is not showing options you got, Installing other dependencies directly. How can i get those? Please help.

[@Tuto1902]

Try re-installing the Laravel application installer. You'll need composer already installed composer global remove laravel/installer composer global require laravel/installer laravel new

[@kirinyetbrian]

I am getting a weird Pusher Error 400 when I dispatch event :. {"exception":"[object] (Illuminate\\Broadcasting\\BroadcastException(code: 0): Pusher error 400 :

[@Tuto1902]

Check the value of BROADCAST_CONNECTION in your .env file and make sure is set to "reverb" and not "pusher"

[@mh5854]

Can we make a bidirectional connection with laravel reverb or it's only one direction using events??

[@Tuto1902]

I'm not sure what a bidirectional connection implies. But in this scenario, you have Events & Listeners. You dispatch the former and react to it in the latter. You can have many kind of listeners, not just Echo or clients with web sockets, although that is the most common use

[@lexxunime5826]

can i use reverb in older laravel? or it's just for latest version?

[@Tuto1902]

I’m sure you can give it a try. The one thing I know you’re not getting in an older version is the install:broadcasting command but you can probably just follow the installation steps.

[@BrianHollenbach]

How can we setup sending and receiving messages from specific users? So that it is not a global chat but a private chat between two users?

[@Tuto1902]

You can add parameters to your channels, like user ids, and then authorize who can listen to such channels in the channels.php route file. So, for example. I can broadcast a new message to a user channel like PrivateMessage::dispatch($userId), where $userId is the user I want to send the message to. In Laravel Echo, you can listen for private channels with Echo.private(`messages.${userId}`). In this case, $userId is the current logged in user. Then, you need to authorize the current logged in user to listen to such channel in the channels route. Here are the docs for this: laravel.com/docs/11.x/broadcasting#using-example-application

[@FaizanAmin_Faizi]

Rather than setting QUEUE_CONNECTION to sync in env file, you should implement ShouldBroadcastNow in your events. Why disturbing whole queue system for just events?

[@Tuto1902]

Thanks! You are totally right. I didn't know about the ShouldBroadcastNow contract. I've learned something new today.

[@SayfiddinErgashev-lg7lz]

According documentation, ShouldbroadcastNow interface still uses sync connection.

[@mh5854]

, thanks for ur video i just want to be sure that can we make a bidirectional real time connection with laravel reverb or not? Or it's just one direction with events? ​@@Tuto1902

[@muresanandrei7565]

I have laravel 11 and don't have the dispatch static method how did you get that ?

[@Tuto1902]

That's just part of Laravel events. laravel.com/docs/11.x/events#dispatching-events

[@yasark6347]

Wss connection failed error showing in console in laravel reveb working fine on localhost how to configure in production server AWS lightsail nginix

[@Tuto1902]

I would recommend reading the docs. There are several things that you need to do server wise, apparently. laravel.com/docs/11.x/reverb#production

[@ujustwatch]

I am using WAMP server, socket connection is not working, in chrome browser it showing '(failed)net::ERR_CONNECTION_REFUSED' and brave browser '(blocked:other)' and also design shows broken

[@Tuto1902]

I'm not a WAMP server user but here are a few things to check 1. Try using php artisan serve to see if the problem persist 2. If you are using SSL locally, try disabling it for this project and see if it works 3. Make sure you have a Vite dev server running (npm run dev) or that you have built all local assets (npm run build)

[@coulibalyali3151]

thanks, it's possible to do the same in laravl 10 project ?

[@Tuto1902]

I believe so, yes. According to the documentation, you need php 8.2+ and Laravel 10.47+ laravel.com/docs/10.x/reverb#installation

[@coulibalyali3151]

@@Tuto1902 thanks

[@w0okil1ci0us]

Is it possible to set all of this up and have react native call and utilize the real time chat?

[@Tuto1902]

I honestly don't know. I'm not familiar with React Native. Laravel reverb uses the Pusher Channels Protocol behind the scenes. So if you have ever created a chat using React native and Pusher, I imagine it could be easy to point the react native app to your Laravel reverb host instead of the Pusher server. But this is all conjecture and must be taken with a huge grain of salt.

[@w0okil1ci0us]

@@Tuto1902 Cheers, will try it out and let you know if I succeed, great video!

[@mokhosh]

4:03 that’s what she said 😂

[@Bcodein-lr4lc]

Sir event Listener's and broadcasting p bhi bna dyn

[@Tuto1902]

Sorry, I don't understand the question. Can you elaborate?

[@Daaboo]

Big question is. Does this work in Laravel 10 api backend. and Vue3 frontend...... ? Do i dear trash the whole setup or just pay the stupid Firebase bill....

[@Tuto1902]

My guess is that it does work. Or at least it should. Reverb does not have any framework version dependencies and I believe you can use Echo in Vue3

[@morpichdesign1402]

I can not found this installation like when i install new project I dont find blade with alpine only blade show.

[@Tuto1902]

I don't follow. Can you elaborate? Usual steps to install this code locally would be to run composer install, npm install and npm run build. The easiest way to serve the project would be with php artisan serve. Don't forget to run the migrations as well. The chatbox.blade.php component is located inside resources/views/livewire and it's made using Livewire Volt. I hope this helps

[@M-xc2hw]

have you tried to setup laravel project with reverb with front as a standalone Vue app? No inertia. Just a separate project. Well, I've tried that and so far it doesn't seem to be working.

[@Tuto1902]

Can’t say that I have. Any specific errors you’re facing?

[@M-xc2hw]

​@@Tuto1902 Nope. Just WebSocket connection to ws://... error in browser console

[@harinik4063]

Is reverb not supported in laravel 10.48

[@Tuto1902]

The composer.json file for the package has no requirement for a laravel version github.com/laravel/reverb/blob/main/composer.json

[@relax7778]

Please create chat API using reverb

[@Tuto1902]

I'll make a note for it. Thanks for the suggestion!

[@akeemakeem3862]

the ssl one is not working

[@Tuto1902]

I haven't tried it myself yet but yeah, it won't work unless your local dev server is configured with SSL. And even so, I think I remember having issues with the web socket not connecting over SSL. I'd have to go back and try again to see if something has changed since launch.

[@JalebiJester]

10:47 i used the same echo.js configs that you used. i didn't get any results in the ws tab of browser. window.Echo.channel("messages").listen("MessageSent", (e) => { console.log(e); }); i had used laravel new chat --breeze to install the project

[@Tuto1902]

Make sure you either rebuild the local assets with npm run build, or you have a vite dev server running with npm run dev. Also, try starting reverb in debug mode using php artisan reverb:start --debug to get more details on the connection

[@JesusLaucho]

hellow

[@Tuto1902]

👋🏻

[@mahammadnabiyev]

I have been working on it for 3 days, but I couldn't understanding what's the problem. Thanks for helping

[@Tuto1902]

I'm sorry to hear that. If there's anything I can do to help, let me know