Uncaught TypeError: callback is not a function while implementing pusher with laravel

Question

I'm making a simple chat application, I get this error while connecting to pusher, I'm using laravel 5.4

Uncaught TypeError: callback is not a function
    at app.js:15350
    at PresenceChannel.Dispatcher.emit (app.js:34417)
    at PresenceChannel.handleEvent (app.js:35936)
    at app.js:33001
    at ConnectionManager.Dispatcher.emit (app.js:34417)
    at message (app.js:36336)
    at Connection.Dispatcher.emit (app.js:34417)
    at message (app.js:35789)
    at TransportConnection.Dispatcher.emit (app.js:34417)
    at TransportConnection.onMessage (app.js:34320)

i have put my app data in the right files and keys , i just cant figure out what is going on, when i remove the Echo function few lines it doesn't show that error, can you help me what's that error is about, here is my front end file App.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));
Vue.component('chat-log', require('./components/ChatLog.vue'));
Vue.component('chat-composer', require('./components/ChatComposer.vue'));

const app = new Vue({
    el: '#app',
    data: {
        messages: []   
            },
    methods: {
        addMessage(message){
            // add to existing messages
            this.messages.push(message);

            // persist to the database
            axios.post('/messages', message).then(response=>{
                // do whatever
            });
        }
    },
    created(){
        // axios uses promises so we could do .then
        axios.get('/messages').then(response=>{
            this.messages = response.data;
        });

        Echo.join('chatroom')
            .here()
            .joining()
            .leaving()
            .listen('MessagePosted', (e)=>{
                console.log(e);
            });

    }
});

and here is my MessagePosted created Event

<?php

namespace App\Events;
use App\Message;
use App\User;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessagePosted implements ShouldBroadcast
{

    public $message = new Message;


    public $user = new User;

    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message, User $user)
    {
        $this->message = $message;
        $this->user = $user;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PresenceChannel('chatroom');
    }
}

Answer 1

The methods here , joining and leaving take a callback as a parameter. A type check is done on the parameter to verify it is a function, callback is undefined because there is no parameter and you get
Uncaught TypeError: callback is not a function

Echo.join('chatroom')
    .here()
    .joining()
    .leaving()
    .listen('MessagePosted', (e)=>{
        console.log(e);
    });