Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Lars-Janssen's avatar

Laravel pusher

Hi,

I'm following this tutorial for making a chat:

https://blog.pusher.com/how-to-build-a-laravel-chat-app-with-pusher/

I can't get this to work. I'm trying for 3 hours now but still no result.

At the beginning I read this:

Before we start using Laravel event broadcasting, we first need to register the App\Providers\BroadcastServiceProvider. Open config/app.php and uncomment App\Providers\BroadcastServiceProvider in the providers array.

So I've done that. If I do that I receive a 404 in my network tab with this url:

localhost/broadcasting/auth

But if I uncomment it (App\Providers\BroadcastServiceProvider) I receive no errors anymore but my chat is not working (only with a refresh).

If I look into my pusher dashboard I can see that connections are being made but no messages are being send.

Any idea what could be wrong?

--EDIT--

Front end code:

bootstrap.js

import Echo from "laravel-echo";

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'mykey',
    cluster: 'eu',
    encrypted: true
});

app.js

// resources/assets/js/app.js

require('./bootstrap');

Vue.component('chat-messages', require('./components/ChatMessage.vue'));
Vue.component('chat-form', require('./components/ChatForm.vue'));

const app = new Vue({
    el: '#app',

    data: {
        messages: []
    },

    created() {
        this.fetchMessages();

        Echo.private('chat')
            .listen('MessageSent', (e) => {
                this.messages.push({
                    message: e.message.message,
                    user: e.user
                });
        });
    },

    methods: {
        fetchMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },

        addMessage(message) {
            this.messages.push(message);

            axios.post('/messages', message).then(response => {
                console.log(response.data);
            });
        }
    }
});

ChatMessage.vue

<template>
    <ul class="chat">
        <li class="left clearfix" v-for="message in messages">
            <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font">
                        {{ message.user.name }}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages']
    };
</script>

ChatForm.vue

<template>
    <div class="input-group">
        <input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" @keyup.enter="sendMessage">

        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
                Send
            </button>
        </span>
    </div>
</template>

<script>
    export default {
        props: ['user'],

        data() {
            return {
                newMessage: ''
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                this.newMessage = ''
            }
        }
    }
</script>
0 likes
22 replies
cracker182's avatar

do you make the auth? php artisan make:auth

It will give you the possibility to register and authenticate a user.

Greetings Dennis

Lars-Janssen's avatar

@cracker182 Yes done that! I can sign in etc. and the messages are being posted but pusher is not working. So I've to refresh the page before I can see someones new message.

Snapey's avatar

What makes you think localhost/broadcasting/auth exists as a route that you can call?

have you created something in your routes file for this path?

Snapey's avatar

ok, so when you include the service provider, should should be able to run php artisan route:list and see that route listed?

Snapey's avatar

Do you see anything in the pusher console?

Lars-Janssen's avatar

@Snapey Yes, I can see that there is a connection:

But no events are being added. I have implemented the ShouldBroadcast interface. Very strange.

Snapey's avatar

So that shows your client is connected.

Next, trap the event so that you can see if the event fires when you post from the client.

Lars-Janssen's avatar

@Snapey When I dd('test'); into broadCast:

public function broadcastOn()
{
    dd('test');
    return new PrivateChannel('chat');
}

The dd('test') shows up in my network tab.

Snapey's avatar

Sorry @lars6 whilst I have pusher live in a project, I have not used the Echo version.

The dd('test') shows up just when you post the message?

Lars-Janssen's avatar

@Snapey yes when I dd('test'); it shows up when I post a message. So the event is being fired. Already asked this question on StackOverflow aswel but no solution yet.

WebKenth's avatar

You have successfully sent the event, but that doesn't mean you are listening for the right event

Szyfr's avatar

@lars6

check your cluster? make sure you define your cluster

In your config/broadcasting.php

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_KEY'),
            'secret' => env('PUSHER_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => 'eu'
            ],
        ],

or try to remove

In your bootstrap.js

encrypted: true
Lars-Janssen's avatar

@Encrypt hey, cluster is 100% eu and removing encrypted: true does not matter just tested that.

WebKenth's avatar

You sent an event to Laravel to broadcast a new event to anyone listening

You successfully documented that you could broadcast the event with the dd('test') but you never showed that you could receive the event

  1. Vue sends the event messagesent
  2. Laravel processed it and dumped test
  3. Laravel has to broadcast the MessageSent event to anyone listening
  4. Vue has to listen for the MessageSent event and append the message to the array
1 like
zoomyboy's avatar

Could you post the debugging information from your pusher client API? If there's e.g. an authentication failure, it would show up there.

Maveth's avatar

Hey!! I actually was following the same tutorial and had the same issue. I spent a good while trying to figure it out. The code has plenty of mistakes but it does work... eventually. I had to change a bit. But I'll upload the code for you sometime soon. It's time to celebrate right now. ;)

Please or to participate in this conversation.