• Laravel Version: 5.4
• PHP Version: 7.1.2
• Database Driver & Version: homestead

Description:

laravel event doesn't work with vuejs using socket.io and ioredis but it works fine with Redis::publish

Note:

• Redis::publish('test-channel', json_encode($data)) - it works both client using vuejs and server side

• event(new TestEvent('sample') - only works on server side but doesn't trigger on client side using vuejs

Steps To Reproduce:

.env

BROADCAST_DRIVER=redis CACHE_DRIVER=file SESSION_DRIVER=file QUEUE_DRIVER=sync

server.js

var app = require('express')();

var server = require('http').Server(app);

var io = require('socket.io')(server);

var Redis = require('ioredis');

var redis = new Redis();

redis.psubscribe(['*'], function(err, count){

});

redis.on('pmessage', function(subscribe, channel, message){

console.log(subscribe, channel, message);

console.log('message received');

message = JSON.parse(message);

io.emit(channel + ':' + message.event, message.data);

});

server.listen(3000, function(){ console.log('server run at port 3000 to stop ctr + c'); });

io.on('connection', function (socket) { console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); });

event

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

public $name;

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

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

}

routes/Channel.php

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

routes/web.php

Route::get('event', function(){

// it works both client using vuejs and server side
$data = [
	'event' => 'App\\Events\\TestEvent',
	'data' => [
		'name' => 'norman'
	]
];

// Redis::publish('test-channel', json_encode($data));

    // only works on server side but doesn't trigger on client side using vuejs
event(new TestEvent('sample'));

	return view('sample');

});

vuejs

<template> <div> <ul> <li v-for="test in tests">{{ test }}</li> </ul> </div> </template> <script> export default { data() { return { tests: [] } }, mounted() { let self = this; socket.on('test-channel:App\\Events\\TestEvent', function(data){ console.log(data.name) self.tests.push(data.name) }); } } </script>

config.js

export default{ host: 'http://dominoone-vagrant.app', port: 3000, }

app.js

require('./bootstrap');

window.Vue = require('vue');

import Config from './config'

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

window.socket = io(Config.host + ':' + Config.port);

window.eventApp = new Vue();

Vue.component('event', require('./components/event.vue'));

const app = new Vue({ el: '#app' });