Real-Time Chat with Laravel, Vue.js & Pusher

In this video I build a real-time chat application using:
Laravel (Backend PHP Framework)
Laravel Sanctum (Authentication Package)
Jetstream Inertia (Front/Back end user authentication scaffolding)
Vue.js (Frontend Javascript Framework)
Pusher (Real-time web-socket connects)

[@user-tt6nc6mo7k]

At 1:03:20 you say " we didn't set that up yet, I'm gonna go back into the event file and set that up momentarily". However, we don't see you this in the video. I think you might have missed this part out in the recording and it maybe the cause of the issues I am having. Would greatly appreciate if you could look into this when you get the chance.

[@scrypster]

A, you’re the first person to point this out after 4,000+ views. I didn’t rewatch the whole video, but I think you’re right and I may have edited this out somehow. 🤦🏻‍♂️ I apologize for the frustration this has probably caused! Check out this link: laravel.com/docs/8.x/broadcasting#broadcast-name On the frontend I am listening for a named broadcast event. You can customize the broadcast name inside of: /app/Events/NewChatMessage.php //add this line of code public function broadcastAs() { return ‘message.new’; }

[@ramiro174]

@@scrypster or you can change your code window.Echo.private("chat."+this.currentRoom.id). listen('NewChatMessage',e=>{ vm.getMessages();

[@ariffaysal9458]

@@ramiro174 thanks, this works !

[@rommelgaming3732]

I have this error {"event":"pusher:error","data":{"code":4005,"message":"Path not found"}}. Can anyone help me please! Thank you

[@rommelgaming3732]

I downgraded my pusher to 6.0.3 and it works! cheers!

[@josuebarros-desenvolvedorw2490]

Laravel with Vue is a beast!! Thanks for the awesome tutorial!

[@GeorgeBrotherston]

Excellent tutorial, thank you! This really provides the overall connectivity of all the parts as well as the “behind the scenes reasons why it may be a “best practice”. I’ll use a few different pieces (eg self hosted web sockets, Inertia-recommended “manual visit shortcuts” and associated Inertia “returns/renders” for Laravel controllers), but without the benefit of your tutorial this would have been weeks to implement and possibly without the proper understanding of the whats and whys. I’ll skim through one more time and then watch again in detail while I follow along as I implement this in my environment. Thank you again!

[@lozobojan]

Wow! What a great video. Explanations as they should be, not too long, not too short and the perfect video pace.

[@scrypster]

Thank you!

[@jaygrayson7949]

Amazing! I found this video when I started giving up on getting Laravel Echo to work with Pusher on Laravel 10, Vue 3 and Pusher. Nothing I was doing was working correctly and all of the examples that I had found were older Laravel, older Vue and older Pusher. While this video is using old versions as well, I was able to incorporate this into the newer versions and it finally worked! Thank you for the great explanations! This was one of the first videos that I have watched that I didn't have to multiply the speed also. :)

[@bytebandit_0x01]

thanks for the tutorial it was a huge help, the best chat tutorial with laravel, vue and pusher on youtube

[@kvazaios5026]

No Words. You are just amazing

[@asifm3520]

Pretty amazing explanation. After Laracast I found your tutorial as best resource. Keep doing your best.

[@scrypster]

Thank you! I’ll do my best to keep making more content ❤️

[@toyly2820]

It is great, I watched it from start to end and stayed satisfied. Thank you.

[@toyly2820]

Well i came back to say that this tutorial is completely wrong. You don’t listen to chatroom when you enter the chat. You listen to any broadcast information to user and depending on what event is that, you do the work with info. You should broadcast to channel User{user_id} a message, then you can use it as notification pop up when user is not in chatroom and use it as a message when user in chatroom and also other any broadcasting info can go through that channel because it is universal. You limit it too much making it only available in chatroom and naming channel chat{chat_id}. Thanks.

[@tahzidmahmud8207]

you are awesome man ...one of the best contents i have ever seen on laravel...keep them coming

[@scrypster]

Thank you!

[@rafaelmaghari8033]

Thank you for this tut! This is the most updated video related to vuejs, laravel pusher + chat. I just encountered two problems while following your tutorial. 1. add broadcastAs in NewChatMessage Event public function broadcastAs() { return 'message.new'; } 2. Don't forget to implement the ShouldBroadcast in NewMessageEvent. Appreciate you man! New subscriber here :)

[@johnjohn8722]

thnaks mate haha like i just follow the instruction but still didnt get update the real time chat, now i know

[@rebekasojka8646]

u for real saved me. thank u so much

[@elmomahupil]

THANKYOU VERY MUCH. PLEASE CONTINUE DOING MORE VIDEOS LIKE THIS. IT REALLY MEANS A LOT

[@scrypster]

Thank you!

[@elmomahupil]

@@scrypster You're a legend in the making sir

[@gluckgamer]

Awesome video and explanation. Thank you!

[@scrypster]

Thank you!

[@strangersman8623]

yes Awesome video and explanation

[@samuelpradhan1899]

Thanks for this wonderful tutorial 😊😊😊

[@MohamedTarek-by3et]

A big thanks, an amziang turorial👏

[@Shatic]

Great tutorial, thank you!

[@jimburns7549]

Excellent work! Thank you. Suggestion: show finished work at the beginning to provide viewers a visual understanding of what you are building toward.

[@scrypster]

Jim, Iike that idea! I have already pre-recorded a few videos that will be coming out soon... However, I think I’ll do that for the next recording. Thanks for the feedback!

[@techieteacher4609]

Great job, thanks

[@dan23233]

Laravel + Vue is awesome ❤️❤️❤️

[@islamosama1471]

Awesome !! Thank You

[@REZAsys2]

You're the best!

[@labka7445]

THANK YOU VERY MUCH.

[@doit4941]

nice work 👍 thx

[@283518]

thanks this helped

[@user-vm7su4rj7f]

Wow, spaces before and after function arguments

[@elmomahupil]

SHIIIIIIIIETT, THANKYOUUUUUUU

[@mathiasmuniz8453]

Amazing tutorial, man, thank you very much! The only thing I couldn't manage to get right were that the dropdown showing the channel names and the outline border in the input message box. I don't know why, but the dropdown menu doesn't stay in the same line as the chat room title, and the input message box still has a black outline. Thanks!

[@nameLastname786]

❤

[@luisalonsobr]

Git repository: github.com/luisalonsobr/laravel-spa-chatrooms corrected from github.com/edtrade/laravel-spa-chatrooms

[@thefrey9588]

Hey. Thanks for the video. Out of curiosity, which one do you think would be easier to maintain (and to use frameworks like Vuetify with): Laravel with Vue integrated to it or separate Laravel and Vue projects to use as backend and frontend respectively.

[@scrypster]

Prior to Sanctum, I’d say keep it all together. But the purpose of sanctum is to allow SPAs (single page applications) to live in a separate space. So you could completely separate your Vue project on a different server from your Laravel project. As long as you put them on the same root domain you could place Vue and Laravel on separate subdomains without any security/auth problems. I haven’t been able to complete enough projects with Sanctum YET... but I do like the direction they are going.

[@kvazaios5026]

Nice vid. Do you know if we are able to use Pusher & Laravel Echo when our frontend is in a different repo of our backend api? Like I was reading some articles yesterday and I was really confused about how this would work

[@edunwa3679]

Great tutorial, thank you. However, if anyone at this time your chat app is running on current Laravel and PHP version, and you are having issue with new message not reflect on other browser without refreshing browser? just restart your local server so that app will recognize changes done at the .env file.

[@adante407]

Just found your Channel, subbed. Great content 👍 Are you going to be doing any more Vue Laravel in the near future?

[@scrypster]

Thank you! I plan on it. Feel free to send any suggestions for video topics and ideas.

[@hatsikmaroukian4111]

Greetings Scypster, I have to say, works perfectly and it is amazing, but i cant understand how pushed helps us with the whole system. Sorry if it is too noob of a question but we need to start from somewhere :)

[@hatsikmaroukian4111]

Around at @50:18 you might get a black-like dropdown list. Thats because you need to pass in props the value 'room' in chatRoomSelection.

[@hyiping5926]

Ive watched quite a bit of the tutorial already but i am a bit confused, is this using ajax or sockets? can I use this to display lets say a list of items for sale and if the prices change in the database the user will see the price change immediately ? and how efficient is this?

[@Dabayare]

What happened to the "Here is one I cooked earlier and how it looks and interacts"?

[@edersonpalma3469]

Awesome!! Question, if I separate the front completely from the laravel using the route Api, will works too?

[@scrypster]

It should work fine. You’ll just need to make sure the authentication works with your API routes. You may need to provide Axios some authentication info to pass with your request.

[@softwareEngineerKunwar]

Hello thanks for the nice tutorial video and just wondering why are you using Tailwind CSS instead of bootstrap?

[@scrypster]

Good question! By default, Laravel 8 comes with Tailwind CSS. So I just struck with the default CSS after creating my new Laravel project. Thanks for watching.

[@Soulaimaneyh]

If you face a problem in live chat: 1:03:20 put the event name inside .listen ("NewChatMessage")

[@juanjose5080]

thanks!!!

[@hedgefund9999]

everyone gangsta till pusher section came

[@gianlucatiengo7306]

I have problem when i try to switch room, the axios fetch give me the structure of the object with the related chat room but they are empty any idea? if i do console.log(response) all the structure of object came out but empty.... thank you!

[@josuebarros-desenvolvedorw2490]

Is it easy or hard to replace with Laravel Websockets? Do I need Laravel Echo for Laravel Websockets?

[@ramiro174]

the relationship in ChatMessage class with room is belongsTo?

[@kusumapau8883]

It works great for me but for some reason when i type a message, the other person could see the message being typed which is odd. Is it perhaps due to my PrivateChannel not properly set up?

[@acebishbi]

I got this error, which I can't figure how to fix when I am following your tutorial.

[@pwhak]

It's nice to see someone using MAMP for Laravel development. Have you come across any issues with choosing MAMP over Docker or Homestead?

[@scrypster]

TBH. I kinda like it. But I feel like I’m cheating. Haha. Homestead was slow. Docker was cool until I got the new Mac M1 chip. Then I had some weird stuff going on. But MAMP just works without issue. I also just like to switch things up for fun sometimes but MAMP is my failsafe.

[@pwhak]

@@scrypster Thanks for the reply! I'd just started learning Laravel last week and played around with Docker and then Homestead. Then I thought, can't I just use MAMP for this? Then I came across your videos and concluded that if it's good enough for Scrypster then it's good enough for me. :) Thanks for the videos!

[@zicada7661]

Shouldn't chatmessage use belongsTo and not hasOne ?

[@DwayneLeroice]

Do you mind sharing why you selected Pusher over Firebase's Realtime DB?

[@scrypster]

There are so many ways to accomplish real-time functionality, it's just what I'm more comfortable using. I could have used Socket.io as well, but I just have more experience using Pusher. I have some experience with Firebase, but I have only used it for push notifications with PWA's and mobile apps (pusher can do this as well). Firebase is definitely an awesome tool though!

[@malikkhan6680]

if am using livewire instead of inertia then what to do? and other thing is the files which are in JS folder from where to get those files?

[@personal1872]

hey there, is there any way to send message to laravel beyondcode/websockets from python app like flask, django, fastapi, if yes then how ?

[@badralwattar5799]

in minute 12:04, why didn't you use belongsTo instead of hasOne ?

[@lukamugosa911]

I must say this - VSCODE IS NOT AN IDE ! But a great tutorial tnx :D

[@jermainecogo3434]

what extension in vscode are you using I cant automatically import Input from Input.vue

[@PradeepSingh-hu3rh]

I'm not getting values in dropdown menu for rooms

[@nethertale2148]

in web.php i get this error: undefined type 'Inertia\Inertia. What can i do to fix this? can't find anything on stackoverflow as well on this. i get this error on lines like: return Inertia::render('Dashboard');

[@kielbermudez8474]

why do I have to reload another browser for the message to render but I'm connected to the pusher?

[@syafrinaldi1281]

i can't use laravel/sanctum for php version 7.1.19, how to update php version in composer

[@arielacha6773]

It would me very nice of you if you could link the repository of this application. :) Thank you for this

[@user-kg9hk2wk6w]

I am getting 500 error when the controller calls the event any idea why?

[@ahmadraid4214]

I'm having a problem my friends When I create a folder in Pages file it is not recognized It only recognizes previously downloaded files JetStream Inertai

[@enelgy4714]

What about adding features, like deleting messages, muting users if is someone admin and so on ? I would Appreciate so much !

[@nilpo]

It's a tutorial, not a completed project. That's for you to add and make it your own!

[@gianlucatiengo7306]

Witch vs extension to auto - import componets ?

[@scrypster]

I don’t remember what it was. I honestly didn’t like it. Just something I was trying out. It didn’t format correctly and on occasion it would import at the wrong place in my file. Now that you mention it, I gotta figure out one which is was so I can remove it.

[@jlemuelDev]

How to make this a one to one chat to users?

[@jimburns7549]

To be certain are sent messages visible to all other users at /chat?

[@scrypster]

Correct. All messages are visible to all users in this example. In one-to-one chat apps I typically have a chat_room_permissions table where I will store which users can access a specific roomId. Then when I create the broadcast channel I will pull the chat_room_permissions rows matching that specific roomId to confirm users are listed as authorized users. Otherwise they won’t have access to that private channel. In this example I just confirm they are logged into the app. So any authenticated user has access to all rooms. Chat room permission is a bit more advanced and there is some strategy to setting this up if you wanted to allow additional users to be invited etc. Feel free to shoot me an email and I can provide additional details if needed. [e-mail]

[@ShivamSharma-lc3po]

When I inspect my code I did not get message route in network please help me

[@timabnz6692]

When I inspect my code I haven't got messages route in network please help me !!!!

[@WalterAraujoHN]

This can work with WhastApp Cloud Api?

[@glennrudge9164]

Thank you for another great course on Laravel. Currently having an issue with the sendMessage function. When I click the button I get " Cannot read property 'id' of undefined". Any help would be greatly appriciated.

[@alialaa650]

I have the same problem How was the problem solved? Cannot read property 'id' of undefined".

[@glennrudge9164]

@@alialaa650 I had it working, then it just stopped lol --__--

[@glennrudge9164]

@@alialaa650 I haven't found the error yet but I think it has to do with currentRoom, if you go to the container component, try to make sure it isn't coming back undefined.

[@glennrudge9164]

@@alialaa650 I fixed it. Turns out it was a problem with cache and also check your newMessage method, make sure the properties are right. happy coding.

[@alialaa650]

@@glennrudge9164 thank you

[@AanyaFaith]

iam facing a problem with here /chat/room we have those routes are not working getting internal error

[@eleazarfederio1718]

can i use bootstrap with jetstream?

[@scrypster]

You could... but jetstream is built with Tailwind CSS. So you’d be doing a whole lot of work to remove Tailwind and applying Bootstrap. I would just stick with Tailwind honestly. They both do the same thing. You’d just have to familiarize yourself with the Tailwind CSS.

[@LuxKal1122]

idk why it always says the chat_room_id not found even i copy your code

[@LuxKal1122]

the url occured an error chat_room_id not found , please help

[@davidescobedo6185]

Hello there. I developed my chat using your tutorial, but my vue is in different folder than my laravel. Can you explain how to configure vue in the correct way? Thanks a lot for this video.

[@marianl8092]

is this application raspbian-compatible?

[@mohamadcheaib]

hello, Laravel gives me the error message "Laravel curl error 60: ssl certificate problem ..." when broadcasting the event after creating a message, how can we solve it (i am using Laravel server )

[@elDiegoPR88]

Hello, first of al.. amazing video it really helped me get the chat up and running but I am having one problem, the connect() method kind of enters an infinite loop so it is constantly getting all new messages and that takes up a lot of resources after a while, I don't know if that constant message update should happen or if I did something wrong... I hope you can reply Thank you, im subscribed now

[@scrypster]

It’s really hard to diagnose without seeing the errors in the console and what’s causing the infinite loop. If you post your source code to a GitHub repo I can take a look.

[@elDiegoPR88]

​@@scrypster Actually I solved it already, the problem I guess was that I had already some components with vue and I just implemented the channels and events logic, but I changed most of my components to make it look like yours and now it works perfectly, thanks man cheers

[@khanalpride]

Everything looks good. But why are you not using the message received from echo event and push the new message to the array, rather you are just sending axios request to server and fetching all messages again. That's not efficient.

[@abubakrhartley959]

Can you show the database plz

[@tranquangvu9515]

my npm run hot not working can you help me?

[@skyzopip]

I thought I could get to the end without making any mistakes but i've miscalculated xD. My chat doesn't show new messages from other users until i change the channel or send a message. I think this line doesn't work in my case window.Echo.private('chat.' + this.currentRoom.id ).listen('.message.new', e => { vm.getMessages(); }); and it's not listening to 'message.new'. Ofcourse i added public function broadcastAs() { return ‘message.new’; } to NewChatMessage.php, any tips how to fix that?

[@skyzopip]

Nvm i found out just after i wrote this that i didn't implement ShouldBroadCast in NewChatMessage.php

[@marianl8092]

hello, having the packages you suggest until 5:00 why does my login/register page not have the same look as yours? there is a really big laravel logo in black and white and the field for input as well as the buttons are plain html

[@marianl8092]

i got it now, seems kinda flaky tho.

[@marianl8092]

yet i dont get a page when i get to chat.. might be some vite / mix confusion. Why do packages have to change that often?

[@marianl8092]

solved that as well, its nice to have the ability of debugging with f12

[@aashiqhasnat2]

Why not use Vuex?

[@chakerkhachlek6803]

Hi thank you for the video ! but i have a problem that after setting room changing event with pusher(it works) the message sending is returning a 500 internal error , the save passes but no refresh in messages and the error appear .

[@scrypster]

Can you post to a GitHub repo? I can check it out and see what the issue is. Give me a day or 2 because I’m currently traveling. But I brought my laptop with me 👍

[@chakerkhachlek6803]

@@scrypster github.com/ChakerKhachlek/LiveChatApp here ! if i just take off the broadcasting event caller from the controller the post route doesn't call the error anymore but of corse i need that ! and thank you

[@user-kg9hk2wk6w]

@@chakerkhachlek6803 i got the same error did you solved that?

[@chakerkhachlek6803]

No same issue

[@pro-user255]

@@scrypster having same issue

[@stojankukrika7242]

Would you like to share the source code from this video? It will be much easy focus on video.

[@harmmie]

Im getting an error when I add the broadcast(new NewChatMessage($newMessage))->toOthers();. And when I comment that out, there is no error. But the page does not update on an new message

[@harmmie]

After some digging I found an other error inside the /storage/logs/laravel.log I saw something with port. so I changed the pusher port to 80 inside the .env file. This did it for me!

[@user-de4jr1gk7t]

I did everything correctly, but there is an error showing 204 Please help me

[@hsert29]

I've set up everything like shown in the video, however, Chrome dev tools network tab is bringing back {"event":"pusher:error","data":{"code":4005,"message":"Path not found"}}. I have copied in the keys from pusher's website to my env file and I have also included the missing function to the NewChatMessage.php. I also have the implements ShouldBroadcast added too.. why am I getting this error?

[@rommelgaming3732]

I have same issue man. Hope anyone can help us.

[@denisbogdanov620]

me 3

[@kadambhushan]

I was facing the same error you can try: 1. composer require pusher/pusher-php-server 2. npm install --save laravel-echo pusher-js 3. clear the cache php artisan optimize This eeor ssee mostly faced because of pusher version

[@MorganLee1997]

Waita minute, does this work with Vue 3.0?

[@hedgefund9999]

i dont think so

[@remydepoorter6226]

Do you have a github link please ?

[@javiervillatoro9725]

I did all the video, but when doing the test from two different browsers it doesn't work, in network tab, in the request to websocket, if the new message is reflected, when sending from the other browser, but the method that refreshes the messages in the DOM is not executed. HELP :(

[@scrypster]

I’m not sure I follow. Can you post to a GitHub repo and I’ll take a look?

[@Lombarzilor8]

​@@scrypster Same for me.Do you think there are a lot of changes because of the newer version of php and pusher I used ? Php 7.4 and pusher 4.1.5 github.com/adicrainic/chatappLaravel.git

[@alighasempoor2747]

@@Lombarzilor8 tanx man

Same for me.

[@elgrego3849]

how to upload files in this chat?

[@shekhsaifuddin1353]

What will be in the listen...?? my app not working

[@ramiro174]

window.Echo.private("chat."+this.currentRoom.id). listen('NewChatMessage',e=>{ vm.getMessages();

[@miqayelharutyunyan2832]

@scrypster can you give me github repository for this, please . I have an error

[@oueghlanimaha8242]

Excellent tutorial, I have succed to implement real time chat on localhost but when I deploy app on server it can't be work 😢 domain can not subdcribe to the channel so I cann't listen to it :( habe any other config for server side ? And thank you

[@zensabbah]

Hi bro! Nice job! Is there the repo on Git?

[@scrypster]

Sorry, no repo for this one. In the past I haven’t posted any code because I think it’s important for the learning process to actually write it out. I never learn anything by cloning a repo. But I MIGHT post to GitHub for future videos just to provide something to compare against.

[@zensabbah]

@@scrypster Yes, you're totally right! Thanks again for the tutorial!

[@nabin_bh]

Awesome ! also can you please provide source code >:)

[@scrypster]

I haven’t provided source code in the past because I think it’s really important to go through the process and not just copy the code. However, I may provide the source code for future tutorials as a reference guide. But I do really think the best way to learn is to follow along and write the code.

[@haseebmehar3360]

Hi, sir, I am facing an error, please guide me on how to resolve this. In the container.vue file the method function getRooms not define in created functions. (Uncaught (in promise) TypeError: this.getRooms is not a function)

[@hieuvongoc6114]

i can't load vue file in js/Page/Chat folder

[@viciouswhitkid]

Try '../Chat/Component.vue' .. for upper folder