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

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’; }

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

@@ramiro174 thanks, this works !

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

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

Thank you!

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

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!

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

Thank you!

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.

Thank you!

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

thanks!!!

Thank you!

yes Awesome video and explanation

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.

@@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!

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

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.

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

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.

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.

did you found the error? im with laravel11 too and also cant figure out this error

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 👍

@@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

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

No same issue

@@scrypster having same issue

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.

​@@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

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

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

@@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.

@@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.

@@glennrudge9164 thank you

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

​@@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

@@Lombarzilor8 tanx man

Same for me.

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!

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

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!

i got it now, seems kinda flaky tho.

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?

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

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

@@kadambhushan i tried these commands you sent but i got error on pusher , in console log i get Disconnection

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.

Same with mine, have you solved it?

@@konzz9137 1:03:47 I changed .listen('.message.new') to same the name of Events file ".listen('NewChatMessage')" And it's worked.

@@dickhairy332 Thanks a lot.

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

me 3

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

Solved. I just deleteed pusher app, and created a new one and thats all. Magic.

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. mj@scrypster.com

I want to implement this to one to one user chat also do u have a repo on ur work?

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

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.

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

i dont think so

You forgot to set emitter in your inputMessage when message posted, and v-on for that emitter in main chat component. I suppose.