Previous steps that I've done to the app ( Laravel 5.5)

steps_i've_made.md

I am on version Laravel 5.5

• I added this in the bottom part of the .env file

MIX_APP_URL="${APP_URL}"

• I issued in the terminal

php artisan config:cache

• I created an event with

 php artisan make:event MessageSent

It would look like this

<?php	

namespace App\Events;
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 MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message ;

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

        /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {

        /*we'll just use this for simpler coding..*/
        return new PrivateChannel('message.'.$this->message->id);
        // private channels .. -> needs user authenticated..
        // return new PrivateChannel('channel-name');
    }

    public function broadcastAs()
    {
        return "New Event";
    }

    public function broadcastWith()
    {
        return [ 
            'message' => $this->message
        ];
    }
    
}

Then I issued this ..

composer require predis/predis
yarn add --save socket.io-client laravel-echo
yarn run dev

yarn install -g laravel-echo-server

then i issued

$ laravel-echo-server init
? Do you want to run this server in development mode? Yes
? Which port would you like to serve from? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server. http://blacktrail.test/
? Will you be serving on http or https? http
? Do you want to generate a client ID/Key for HTTP API? Yes
? Do you want to setup cross domain access to the API? Yes
? Specify the URI that may access the API: http://blacktrail.test:80
? Enter the HTTP methods that are allowed for CORS: GET, POST
? Enter the HTTP headers that are allowed for CORS: Origin, Content-Type, X-Auth-Token, X-Requested-Wi th, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id
? What do you want this config to be saved as? laravel-echo-server.json
appId: ca947070522dc618
key: 1c63d178a9cdc73ac98359b7b976418a

this is what my webpack.mix.js

let mix = require('laravel-mix');
require('laravel-mix-tailwind');

/*
|--------------------------------------------------------------------------
| Mix Asset Management		
|-------------------------------------	-------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.minTemplate = require('laravel-mix-template-minifier');
// mix.js('resources/assets/js/scripts.js', 'public/js')
mix.js('resources/assets/js/app.js', 'public/js')
// .js('resources/assets/js/script.js','public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.tailwind()
.browserSync("localhost:8004")


if (mix.inProduction()) {

mix.minTemplate('storage/framework/views/*.php', 'storage/framework/views/')

}

• I open the terminal and ran

$ laravel-echo-server start             
                                        
L A R A V E L  E C H O  S E R V E R     
                                        
version 1.6.0                           
                                        
⚠ Starting server in DEV mode...        
                                        
✔  Running at localhost on port 6001    
✔  Channels are ready.                  
✔  Listening for http events...         
✔  Listening for redis events...        
                                        
Server ready!                           
                                        

then I added this in bootstrap.js

import Echo from "laravel-echo" ;

window.io = require("socket.io-client");

console.log("URL:"+process.env.MIX_APP_URL);

window.Echo = new Echo({
	broadcaster: 'socket.io',
	host : process.env.MIX_APP_URL + ':6001'
	// key : '1232b570ab3e5024b5e9d',
	// cluster : 'ap1',
	// encrypted : true
});	

then I added this in my ChatApp.vue my main chat view

	mounted(){

		let channel = Echo.channel('public')

		axios.get('/getAll').then(({data}) => {
			this.messages = data;
		});
		
		// Registered client on public channel to listen to MessageSent event
		Echo.channel('public').listen('MessageSent', ({message}) => {
			this.messages.push(message);
		});

		console.log('Component mounted.');

	}

$ npm run watch
$ php artisan queue:work 

But I'm stuck in the queue:work for like few minutes and that means there's something error.