How to get the updates from the Pusher to get the updated time from the server.?
I Use, the html(Blade file) with 3 div's like the below,
<div id="divId1">0</div>
<div id="divId2">0</div>
<div id="divId3">0</div>
The 0in each div is replaced by time() in the Controller.
public function gettime($id=null)
{
$result = time();
return $result;
}
In js file
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
document.querySelectorAll('*').forEach(function(node) {
var data = '';
ajax = $.ajax({
url: '/getTime/' . node,
method: 'get',
success: function(data) {
//parse the server side response
console.log(data);
}
});
});
});
var pusher = new Pusher('xxxxxxxxxxxxxxx', {
cluster: 'eu',
encrypted: true
})
var channel = pusher.subscribe('time-updated');
// Binding a function to a Event
channel.bind('App\Events\TimeUpdated', function(data){
console.log(data);
});
Event file
class TimeUpdated implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $timechanged;
public function __construct($timechanged)
{
$this->timechanged = $timechanged;
}
public function broadcastOn()
{
return new Channel('time-updated');
}
}
Routes.php
Route::get('/getTime/{id}', 'App\Http\Controllers\Controller@getTime');
In the Browser, When I pass the URL as www.sample.test/getTime/3
It displays, 1620614613 the time for each div individually.
How to get the updates from the PUSHER to update the time for each div?
Could anyone please help?