Dev0ps
1 week ago

Websocket Echo broadcast not showing values on console

Posted 1 week ago by Dev0ps

i am not using laravel authentication system, its custom

i added csrf token

BroadcastServiceProvider

 public function boot()
    {
        Broadcast::routes(['middleware' => 'auth']);

        require base_path('routes/channels.php');
    }

channels.php

Broadcast::channel('chat', function ($user) {
    return $user;
});

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

// try {
//     window.$ = window.jQuery = require('jquery');
//
//     require('bootstrap-sass');
// } catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    authEndpoint: "broadcasting/auth",
    broadcaster: 'pusher',
    key: 'anyKey',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    // namespace: 'App.Events'
});


// window.Echo.channel('DemoChannel')
//     .listen('WebsocketDemoEvent', (e) => {
//
//         console.log(e);
//
//     });

window.Echo.listen('DemoChannel', '.App/Events/WebsocketDemoEvent', (e) => {
    console.log(e);
});

window.Echo.channel('new-message')
    .listen('.NewMessage', (e) => {
        console.log('Got event...');
        console.log(e);
    });

NewMessage //Event


<?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 NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
//        return new PrivateChannel('new-message');
        return new Channel('new-message');
    }
}

Call Event like

event(new NewMessage('some data'));

Nothigh on console

Log

subscribed  147734680.395932423 Channel: new-message    21:10:36
occupied        Channel: new-message    21:10:36

Please sign in or create an account to participate in this conversation.