Laravel Reverb: The Easiest Way to Add Real-Time Magic to Your App

Рет қаралды 28,564

Күн бұрын

Пікірлер: 98

@mcylinder 6 ай бұрын

Excellent job. I really appreciate you using a very real world scenario. It provided context for why this approach is so helpful.

@glennraya 6 ай бұрын

Thank you. I always strive to present real-world use cases in my examples so people can have an idea of where to use them in their projects.

@hamburger--fries 6 ай бұрын

Wow! This saved me some time and I did not know about Reverb. I am using it for a Book project taking Japanese to other languages and allow users to edit the text. I section text into blocks which could be a paragraph or a sentence and users can see which blocks of text in the book are being edited or have a hold because someone already edited. I used Tailwind as well. Thanks for this wonderful video you put out!

@glennraya 6 ай бұрын

Thanks for your kind comment. Good luck on your projects. You may check my other videos related to Laravel Reverb. ☺️🙏

@JordanJanevski 6 ай бұрын

Very informative and nicely done. I tried this in my local env. but i cant pass this simple error. I can notice at 8:25 of this video that your console shows the same thing for you as well. Firefox cant establish a connection to wss. I tried both laravel Herd (free) and docker but to no avail. Do you have any guidance for how to resolve this? Thanks in advance

@glennraya 6 ай бұрын

Thanks for the comment, you have to make sure that REVERB_HOST is set your local domain "example.test" and your REVERB_SCHEME is set to https. In some dev environments, some do encounter this issue on Firefox, so far I don't encounter this. Kinda unpredictable, but it should work normally in production.

@JordanJanevski 6 ай бұрын

@@glennraya Thanks for the answer, I already have the env set with the correct data. But i am already at this for 2 days and i slowly lean to giving up :/

@glennraya 6 ай бұрын

If you're developing on Windows but it's working on Webkit browsers (chrome, edge, etc.) it should be fine, other people also have this issue on Firefox on Windows because Firefox seems to have been rejecting local SSL, in production it should be fine. On macOS though, it seems to be ok.

@glennraya 6 ай бұрын

@@JordanJanevski I suggest removing the local SSL and testing it on HTTP only (without SSL), and it should work. I also talked to other people regarding this, and their issue is that the local SSL on Windows seems to be not working on all browsers.

@JordanJanevski 6 ай бұрын

@@glennraya After disabling the SSL in herd, and changing app url and reverb scheme to http, I dont see any differences. I still see the error in the console being for wss.. is windows this bad or is it just me? x.x its the same for both chrome / firefox

@wormy_coder 3 ай бұрын

Another Superb Tutorial, Keep it up Bro

@glennraya 3 ай бұрын

@@wormy_coder thank you

@christiancolewan 6 ай бұрын

Ang ganda ng explanation kung ganto lang sana mga speakers sa DICT seminars😅

@glennraya 6 ай бұрын

ahaha, salamat po! 😆

@christiancolewan 4 ай бұрын

@@glennraya Hi, may I ask how did you use SSL to your local website?

@glennraya 4 ай бұрын

@@christiancolewan I am on macOS, and it's very easy to setup local SSL on macOS. I use Laravel Herd for my local dev environment, you can set local SSL from there. If you're on Windows, Herd is now also available for Windows as well.

@christiancolewan 4 ай бұрын

@@glennraya ohh salamat master

@tamilselvan-jas 4 күн бұрын

Can you please share the vscode customisation settings details? Like theme, font, line height, ...

@glennraya 4 күн бұрын

I have a video dedicated for it: kzbin.info/www/bejne/b5CsYZWviLaiedU

@tamilselvan-jas 3 күн бұрын

But this looks different than vs code used in current video, I like the current video vs code settings.

@glennraya 3 күн бұрын

@@tamilselvan-jas as far as I remembered, I used GitHub's Monaspace font here, and the GitHub Palenight Dark theme.

@tamilselvan-jas 2 күн бұрын

Thank you ❤❤❤

@jokokentir666 5 ай бұрын

Terima kasih mas, sangat membantuku

@glennraya 5 ай бұрын

You're welcome! ☺

@ivordotdev 3 ай бұрын

Pretty cool! I understand this is a demo but I think instead of $article->user you should pass the logged in user - right? Because the editor is the user who authorizes the delete, and not article_user.

@glennraya 3 ай бұрын

In this context, `$article->user` represents the article's owner, who initiated the delete. I passed this data to ensure the article also disappears for the user who deleted it. Thanks! 🙏🏼

@iqbalhossain9299 2 ай бұрын

Hey, Its a nice work. what if i host my reverb application as a middleware to send notifications from a server and my frontend will be run from different different machine/server. how to listen from a specific URL? i mean two machine will run from two server. so how front end will detect the actual server, you know if you create a listenData channel how it will connect with middleware that are hosted in a specific domain

@glennraya 2 ай бұрын

Thank you! I personally haven't tried to use Reverb on a separate host yet. However, according to the official Reverb docs, it is possible. I successfully used Reverb with a NextJS front-end and a Laravel back-end but it's on a single server.

@hamzabarry7880 6 ай бұрын

Hi I'm using livewire how to dispach my event??

@glennraya 6 ай бұрын

Hi, I'm not using livewire so I can't tell 😅 to my knowledge people say it's actually easier in livewire. However dispatching an event is just the same: broadcast(...) or event(...) from your controller methods or wherever you need to dispatch the event.

@hamzabarry7880 6 ай бұрын

@@glennraya yes it's normally very easy to dispatch but I have a problem that I don't know where he is from

@gamesandlofimucic 6 ай бұрын

where do you get ID and keys for reverb in the env file? also, nice tutorial, subscribed to you haha

@glennraya 6 ай бұрын

There's no artisan command to generate that unless you install broadcasting from scratch, but you can set it to whatever string/numeric values you want for as long as it is unique. That's all it requires.

@gamesandlofimucic 6 ай бұрын

@@glennraya so hindi na need gumawa ng account boss? hindi katulad ng pusher? so random string as long as unique?

@glennraya 6 ай бұрын

@@gamesandlofimucic yes po. Wala ng account bale parang locally hosted yan

@viraliz6334 3 ай бұрын

@@gamesandlofimucic just run php artisan reverb:install

@ElephantBay-nv5jn 7 ай бұрын

good one bro

@anthonyhidalgo3391 6 ай бұрын

Nice video, what is your vsc theme please

@glennraya 6 ай бұрын

Thanks! The theme is "Github Dark Palenight"

@TheHenriquesbr 7 ай бұрын

Cool, simple and straightforward. I tried several projects and none worked through the network. Only on the server. Like using another machine or over the phone doesn't work. Any tricks to make it work?

@glennraya 7 ай бұрын

I haven't tried that setup yet, but it should be fairly easy to setup in production servers.

@TheHenriquesbr 6 ай бұрын

@@glennraya Thanks for the feedback! Maybe when you have some free time, you could make a video explaining how to put it into production on a local server. Lay people always wanting to learn from the best. Thanks again and stay focused on helping others!

@glennraya 6 ай бұрын

@@TheHenriquesbr Yes, I actually planning the video for deploying Reverb into a production server, a VPS with a domain. Thank you for your feedback! ☺

@rajaasyraf25 6 ай бұрын

Thanks a lot for sharing this!

@glennraya 6 ай бұрын

@@rajaasyraf25 you're welcome 🙏☺️

@Плененныйкустами 6 ай бұрын

it is working, but i had to install pusher js, even i don't need it. otherwise there is an error: ReferenceError: Pusher is not defined

@glennraya 6 ай бұрын

Yes, I'm aware of the Pusher is not defined error, to what I remember, you only need to put the window.Pusher instance in the useEffect hook. If you try to remove pusher, it won't work. I think Echo is using some of Pusher's methods, maybe that's why it is still needed and was included in the docs to be installed.

@optimusdebugger9638 5 ай бұрын

Great content! Was simplicity the reason why you are not using REST for article deletion request ? ie DELETE /users/:userId/articles/:articleId I am thinking that could help use route model minding to ensure the IDs (user and article) are valid

@glennraya 5 ай бұрын

Thanks, 🙏🏼 I didn't use REST to delete the resource because I want to focus on Reverb itself so I can quickly show Reverb's capabilities. This is just a demo of Reverb but of course, when in real-world development, we should use established best practices.

@himanshubelwal-m4l 2 ай бұрын

are you sure this chat work on laravel tenancy if you know about this how we can connect server each other please help

@glennraya 2 ай бұрын

I don't know if you watched the entirety of the video, but this is not a chat app, it's a demonstration of how we can implement real-time functionality in a Laravel app. Of course, the example I made is not meant for production use, but just an example of how we can utilize Reverb in a similar project, including a chat app. I also have a video about a chat app using Reverb. kzbin.info/www/bejne/eWScpnpthcaYeqs

@himanshubelwal-m4l 2 ай бұрын

@@glennraya Have you ever used Laravel Reverb with a Laravel tenant?

@glennraya 2 ай бұрын

@@himanshubelwal-m4l If you're referring to "multi-tenant" apps, I haven't used Reverb yet on a multi-tenant apps, but I'm pretty sure it would work just like in a normal single tenant app.

@himanshubelwal-m4l 2 ай бұрын

@@glennraya I have also done one user to one user chats and grops chats using laravel reveb but I am not able to connect with laravel tenant. If anyone can help please help me in creating auth in laravel tenancy 403 and message sending time 419. what error has occurred

@programmingmindset 5 ай бұрын

you are gem man 😎😎😎😎

@glennraya 5 ай бұрын

Thank you so much! 🙏🏼

@programmingmindset 5 ай бұрын

@@glennraya keep sharing knowledge. we need more guides like you in programming world

@glennraya 5 ай бұрын

@@programmingmindset I'm striving to be consistent in uploading on a regular basis (weekly). Thank you! 🙏🏼

@JSONFX 6 ай бұрын

What do you use for this project? Awesome video by the way!

@JSONFX 6 ай бұрын

and also what theme are you using?

@glennraya 6 ай бұрын

Thank you, I used nextUI for some of the UI. It's the Laravel Breeze scaffolding.

@JSONFX 6 ай бұрын

@@glennraya what font are you using for this project?

@glennraya 6 ай бұрын

@@JSONFX Github's Monaspace code fonts (Monaspace Neon).

@saffetoge 4 ай бұрын

Which program do you use on terminal and sql ?

@glennraya 4 ай бұрын

I use Warp for the terminal, and TablePlus for my DB client.

@tasneemwahdan3618 7 ай бұрын

Very nice explanation 👌 thank you You used the same channel for both events right?

@glennraya 7 ай бұрын

Thank you! yes, it's a single channel, and listen to multiple events. Tomorrow, I'm going to upload a new video as a follow-up to this, where I'm going to explain how we can use Laravel Reverb when the frontend is separated from the backend, I'll be using NextJS for that example.

@tasneemwahdan3618 7 ай бұрын

@@glennraya great! Thank you 😊

@ThanHtutZaw3 6 ай бұрын

@@glennraya Can we also use this in MEVN stack ? Nodejs Vue Mongo

@mdismailhossain2219 4 ай бұрын

great video....

@glennraya 4 ай бұрын

Thank you!

@CaneZyle 7 ай бұрын

nice one boss. easy to deploy din ito? like sa mga configs/env... any tips/advice on the things to consider before deploying (ie: dev server), any issues you encountered so far using this package?

@glennraya 7 ай бұрын

Thank you. Actually kahapon ko lang na try yung Reverb, pero yung deployment sa production should be almost the same sa local, may reverb server and queue workers na naka start, you may need to configure supervisor to restart yung mga process kapag nag reboot ng server, and yung mga deployment tips sa Laravel Broadcasting docs, under deployment may mga tips sila sa server configs.

@lotkutv2392 7 ай бұрын

Saktong sakto to sa inaaral ko kanina sa work for realtime notif when client request something😂 gamit ko sir laravel + pusher at react/next + pusherjs. Saktong sakto itong video mo ito hinahanap ko yung naka per user po yung notif sa ngayon kasi ginagawa ko parang naka public broadcast lang hindi naka private channel.

@glennraya 7 ай бұрын

Madali po yan promise. Mas matagal ko pa ginawa yung UI para example kaysa doon sa real-time mismo.

@KingRyanGaming 7 ай бұрын

Mas gaganda ba system king naka vue or next.js ang front end?

@glennraya 7 ай бұрын

@@KingRyanGaming depende po sa requirements ng project. If malaking app na maraming modules and may kasama pang mobile app, better na naka decoupled architecture (separate frontend/backend).