Laravel websockets
https://docs.beyondco.de/laravel-websockets/
instalar websocket por el composer
composer require beyondcode/laravel-websocketsEste paquete viene con una migración para almacenar información estadística mientras ejecuta su servidor WebSocket. Puede publicar el archivo de migración usando:
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"Migrar
php artisan migrateA continuación, debe publicar el archivo de configuración de WebSocket
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"Quitar comentario en el archivo config/app.php
App\Providers\BroadcastServiceProvider::class,Pusher
Instalar pusher por composer en el laravel
composer require pusher/pusher-php-serverAgregar las variables de pusher en el archivo .env
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxConfigure las opciones de Canales en config / broadcasting.php:
'options' => [
'cluster' => 'us2',
'useTLS' => true
],Laravel
Crear un evento
php artisan make:event NewMessageapp/Events/NewMessage.php
public $data;
public function __construct($data)
{
$this->data = $data;
}
public function broadcastOn()
{
return ['mi-canal'];
}
public function broadcastAs()
{
return 'mi-evento';
}Enviar mensaje desde Evento
Route::get('message', function () {
$message['user'] = "Juan Perez";
$message['message'] = "Prueba mensaje desde Pusher";
$success = event(new App\Events\NewMessage($message));
return $success;
});Javascript
Crear un archivo normal en formato html para testear pusher
<!DOCTYPE html>
<head>
<title>Pusher Test</title>
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
<script>
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var PUSHER_APP_KEY = "xxxxxxxxxxx"
var pusher = new Pusher(PUSHER_APP_KEY, {
cluster: 'us2',
forceTLS: true
});
var channel = pusher.subscribe('mi-canal');
channel.bind('mi-evento', function(data) {
// alert(JSON.stringify(data));
console.log(data.data)
const message = data.data
var node = document.createElement("LI");
var textnode = document.createTextNode(message.user+"=>"+message.message);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
});
</script>
</head>
<body>
<h1>Pusher Test</h1>
<p>
Intenta publicar un evento en el canal <code>mi-canal</code>
con nombre del evento <code>mi-evento</code>.
</p>
<ul id="myList">
<li>Primer mensaje</li>
</ul>
</body>
