Pusher + Vue + Laravel = Let’s Do It!

A “Real-Time” Machine

Image for post
Image for post
Google Drawing of what we’re building :)
npm install axios (laravel default)
npm install vue (laravel default)
npm install pusher-js
npm install collect.js

Vue Component Scaffolding

**Don’t forget to load the component in your main Vue instance.

export default{
name:'pusher-events',
props:['api_key','api_cluster', 'channel_data'],
data() {
return {
channels:{},
form:{} //for method testing
}
},
beforeMount(){
this.initPusher()
this.bindConnections()
},
methods: {
//...
},
}

Component Tag

<pusher-events
api_key="{{env('PUSHER_APP_KEY')}}"
api_cluster="{{env('PUSHER_APP_CLUSTER')}}"
:channel_data="{
test: {{ json_encode(session()->get('pusher-test', [])) }}
}">
</pusher-events>

Add Method: initPusher()

/** Init Pusher **/
initPusher(){
this.client = new Pusher(this.api_key,{
cluster: this.api_cluster,
encrypted: true
});
},

Add Method: bindConnections()

/** Bind Connections **/
bindConnections() {
let vm = this
const subscriptionChannels = [{
name: 'test',
events: [{
name: 'App\\Events\\TestPublish',
callback: vm.pushData
},
{
name: 'App\\Events\\TestRemove',
callback: vm.removeData
},
{
name: 'App\\Events\\TestUpdate',
callback: vm.updateData
}
]
}]
//Loop Channels
for(let channel of subscriptionChannels){
//...
}
},

Add Method: bindConnections() — Continued

//Loop Channels
for(let channel of subscriptionChannels){...
//Load Channel Data from Prop
let channelData = []
if(this.channel_data.hasOwnProperty(channel.name)){
channelData = this.channel_data[channel.name]
}

//Init Channel
this.$set(this.channels, channel.name, {
channel: this.client.subscribe(channel.name),
data: channelData,
})
//Loop Channel Events
for(let event of channel.events){

//Bind Channel Event
this.channels[channel.name].channel.bind(event.name, (data) => {

//Fire Event Callback
event.callback(channel.name, data)
});
}

...}

What did we just build? — A home for our channels & data!

Image for post
Image for post
Vue Component Data Tree via: https://github.com/vuejs/vue-devtools

Data Methods

If you’re using VueX you can use your $store.

Add Method: pushData()

/** Push Object to Connection's DataSet **/
pushData(name, data) {
this.channels[name].data.push(data.object)
console.info(name, data.object, 'added')
},

Add Method: removeData()

/** Remove Object from Connection's DataSet **/
removeData(name, data) {
let dataSet = this.channels[name].data
let collection = collect(dataSet)
let item = collection.where('id', data.object.id).first()
if(item){
dataSet.splice(dataSet.indexOf(item), 1)
console.info(name, data.object, 'removed')
}
},

Add Method: updateData()

/** Update Object in Connection's DataSet **/
updateData(name, data) {
let dataSet = this.channels[name].data
let collection = collect(dataSet)
let item = collection.where('id', data.object.id).first()
if(item) {
dataSet.splice(dataSet.indexOf(item), 1, data.object)
console.info(name, data.object, 'updated')
}
},

Add Method: submitForm() — (demo)

/** Submit Form (demo) **/
submitForm(){
axios
.post('/app-events', this.form)
.then((response)=>{
console.info(response.data)
})
.catch((error)=>{
console.error(error.response.data)
})
}

Template Time!

<div v-for="(object, index) in channels.test.data" :key="index">
{{ object }}
</div>
<form @submit.prevent="submitForm">
<input type="text" v-model="form.content"/>
<select v-model="form.id" v-if="form.event !== 'test-publish'">
<option v-for="object in channels.test.data" :value="object.id">
{{object.id}}
</option>
</select>
<select v-model="form.event">
<option value="test-publish">Add</option>
<option value="test-update">Update</option>
<option value="test-remove">Remove</option>
</select>
<button type="submit">
Submit
</button>
</form>

A Route Specifically for Events

With this route we can make a request to fire any event in our application with an anonymous object that should be handled by our event class instead of using a controller. — Why instantiate another class if we don’t need to!

Route::post('app-events', function(){

$event = '\\App\\Events\\'.camel_case(request()->get('event'));

if(class_exists($event)){
event(app()->makeWith($event, array(
'object' => (object) request()->all()
)));
return response(request()->all(), 200);
}
return response('Event does not exist.', 404);
});

Add the TestPublish Event

php artisan make:event TestPublish

We’ll use our session manager to store our objects for this demonstration. *Replace your new class with the following:

class TestPublish implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

public $object;

/**
* Create a new event instance.
*
@param $object
*
@return void
*/
public function __construct($object)
{
$this->object = $object;
session()->push('pusher-test', $this->object);
}

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

Add the TestRemove Event

php artisan make:event TestRemove

*Replace your new class with the following:

class TestRemove implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

public $object;

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

session()->put('pusher-test', collect(session()->get('pusher-test'))->reject(function ($storedObject) {
return $storedObject->id === $this->object->id;
}));
}

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

Add the TestUpdate Event

php artisan make:event TestUpdate

*Replace your new class with the following:

class TestUpdate implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

public $object;

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

session()->put('pusher-test', collect(session()->get('pusher-test'))->map(function ($storedObject) {
if($storedObject->id == $this->object->id){
return $this->object;
}
return $storedObject;
}));
}

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

Wrap Up: Video

**Let me know if you find any bugs in this demonstration. :)

Written by

Full Stack Developer — Community Moderator @ Laravel PHP Framework Facebook Group

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store