Advertisement
  1. Code
  2. PHP

Cómo Funciona la Radiodifusión Laravel

Scroll to top
Read Time: 20 min

Spanish (Español) translation by James (you can also view the original English article)

Hoy, vamos a explorar el concepto de radiodifusión en el marco de la web de Laravel. Permite enviar notificaciones al lado del cliente cuando algo sucede en el servidor. En este artículo, vamos a usar la biblioteca de Pusher de terceros para enviar notificaciones al lado del cliente.

Si alguna vez has querido enviar notificaciones desde el servidor al cliente cuando ocurre algo en un servidor en Laravel, busca la función de difusión.

Por ejemplo, supongamos que ha implementado una aplicación de mensajería que permite a los usuarios de su sistema enviar mensajes entre sí. Ahora, cuando el usuario A envía un mensaje al usuario B, desea notificar al usuario B en tiempo real. Puede mostrar una ventana emergente o un cuadro de alerta que informa a usuario B sobre el nuevo mensaje!

Es el caso de uso perfecta para caminar a través del concepto de radiodifusión en Laravel, y eso es lo implementaremos en este artículo.

Si te estás preguntando cómo el servidor puede enviar notificaciones al cliente, está utilizando sockets bajo el capó para conseguirlo. Vamos a entender el flujo básico de tomas antes de profundizar más en la aplicación real.

  • En primer lugar, necesitas un servidor que soporta el protocolo web sockets y permite al cliente establecer una conexión de socket de la web.
  • Puedes implementar tu propio servidor o usar un servicio de terceros como el botón. Preferimos esta última en este artículo.
  • El cliente inicia una conexión de socket de la web al servidor web de zócalo y recibe un identificador único con conexión exitosa.
  • Una vez que la conexión es exitosa, el cliente se suscribe a ciertos canales a la que le gustaría recibir eventos.
  • Finalmente, bajo el canal de suscrito, el cliente registra los eventos que le gustaría escuchar.
  • Ahora en el servidor, cuando sucede un evento en particular, le informamos al servidor de web Sockets proporciona el nombre del canal y el nombre del evento.
  • Y por último, el servidor de web Sockets transmite ese evento para clientes registrados en ese canal particular.

No te preocupes si parece demasiado de una sola vez; usted conseguirá la caída de la misma a medida que avanzamos a través de este artículo.

A continuación, vamos a echar un vistazo en el fichero de configuración de emisión por defecto en config/broadcasting.php.

1
<?php
2
3
return [
4
5
    /*

6
    |--------------------------------------------------------------------------

7
    | Default Broadcaster

8
    |--------------------------------------------------------------------------

9
    |

10
    | This option controls the default broadcaster that will be used by the

11
    | framework when an event needs to be broadcast. You may set this to

12
    | any of the connections defined in the "connections" array below.

13
    |

14
    | Supported: "pusher", "redis", "log", "null"

15
    |

16
    */
17
18
    'default' => env('BROADCAST_DRIVER', 'log'),
19
20
    /*

21
    |--------------------------------------------------------------------------

22
    | Broadcast Connections

23
    |--------------------------------------------------------------------------

24
    |

25
    | Here you may define all of the broadcast connections that will be used

26
    | to broadcast events to other systems or over websockets. Samples of

27
    | each available type of connection are provided inside this array.

28
    |

29
    */
30
31
    'connections' => [
32
33
        'pusher' => [
34
            'driver' => 'pusher',
35
            'key' => env('PUSHER_APP_KEY'),
36
            'secret' => env('PUSHER_APP_SECRET'),
37
            'app_id' => env('PUSHER_APP_ID'),
38
        ],
39
40
        'redis' => [
41
            'driver' => 'redis',
42
            'connection' => 'default',
43
        ],
44
45
        'log' => [
46
            'driver' => 'log',
47
        ],
48
49
        'null' => [
50
            'driver' => 'null',
51
        ],
52
53
    ],
54
55
];

De forma predeterminada, Laravel admite varios adaptadores de transmisión en el núcleo sí mismo.

En este artículo, vamos a utilizar el adaptador de transmisión de Pusher. Para propósitos de depuración, también puede usar el adaptador de registro. Por supuesto, si estás usando el adaptador de log, el cliente no recibe notificaciones de eventos de cualquier, y sólo te se registran en el archivo de laravel.log.

En la sección siguiente hacia adelante, enseguida a zambullirse la aplicación efectiva de los mencionados casos de uso.

Establecer los Requisitos

En la radiodifusión, hay diferentes tipos de canales: público, privado y presencia. Cuando usted desea difundir sus eventos públicamente, es el canal público que se supone que utilice. Por el contrario, la cadena privada se utiliza cuando desea limitar las notificaciones del acontecimiento a ciertos canales privados.

En nuestro caso de uso, queremos notificar a los usuarios cuando reciben un nuevo mensaje. Y para ser elegible para recibir notificaciones de emisión, el usuario tiene que estar conectado. Así, tendremos que utilizar el canal privado en nuestro caso.

Característica de Autenticación de la Base

En primer lugar, es necesario activar el sistema de autenticación por defecto Laravel para que funciones como registro, Inicio de sesión y el trabajo como fuera de la caja. Si no estás seguro de cómo hacerlo, la documentación oficial ofrece una visión rápida en eso.

Pusher SDK, Instalación y Configuración

Como vamos a utilizar el servicio de terceros Pusher como nuestro servidor de web sockets, usted necesita crear una cuenta con él y asegúrese de que tener las credenciales API necesarias con su registro de post. Si estás enfrentando algún problema crearlo, no dudes en preguntarme en los comentarios.

A continuación, tenemos que instalar el SDK de PHP de empuje para que nuestra aplicación Laravel puede enviar notificaciones de emisión para el servidor de web sockets de empujador.

En la raíz de la aplicación Laravel, ejecute el siguiente comando para instalar como un paquete de compositor.

1
$composer require pusher/pusher-php-server "~3.0"

Ahora, vamos a cambiar el archivo de configuración de transmisión para activar el adaptador de empujador como nuestro controlador de transmisión predeterminado.

1
<?php
2
3
return [
4
5
    /*

6
    |--------------------------------------------------------------------------

7
    | Default Broadcaster

8
    |--------------------------------------------------------------------------

9
    |

10
    | This option controls the default broadcaster that will be used by the

11
    | framework when an event needs to be broadcast. You may set this to

12
    | any of the connections defined in the "connections" array below.

13
    |

14
    | Supported: "pusher", "redis", "log", "null"

15
    |

16
    */
17
18
    'default' => env('BROADCAST_DRIVER', 'pusher'),
19
20
    /*

21
    |--------------------------------------------------------------------------

22
    | Broadcast Connections

23
    |--------------------------------------------------------------------------

24
    |

25
    | Here you may define all of the broadcast connections that will be used

26
    | to broadcast events to other systems or over websockets. Samples of

27
    | each available type of connection are provided inside this array.

28
    |

29
    */
30
31
    'connections' => [
32
33
        'pusher' => [
34
            'driver' => 'pusher',
35
            'key' => env('PUSHER_APP_KEY'),
36
            'secret' => env('PUSHER_APP_SECRET'),
37
            'app_id' => env('PUSHER_APP_ID'),
38
            'options' => [
39
                        'cluster' => 'ap2',
40
                        'encrypted' => true
41
            ],
42
        ],
43
44
        'redis' => [
45
            'driver' => 'redis',
46
            'connection' => 'default',
47
        ],
48
49
        'log' => [
50
            'driver' => 'log',
51
        ],
52
53
        'null' => [
54
            'driver' => 'null',
55
        ],
56
57
    ],
58
59
];

Como se puede ver, hemos cambiado el controlador de transmisión predeterminado a empujador. También hemos añadido el racimo y opciones de configuración cifradas que debe tienes desde la cuenta de empuje en el primer lugar.

También, va directo a los valores de las variables de entorno. ¡Asegúrese de que configurar las siguientes variables en el archivo .env correctamente.

1
BROADCAST_DRIVER=pusher
2
3
PUSHER_APP_ID={YOUR_APP_ID}
4
PUSHER_APP_KEY={YOUR_APP_KEY}
5
PUSHER_APP_SECRET={YOUR_APP_SECRET}

Luego, tuve que hacer unos cambios en un par de ficheros Laravel para hacerla compatible con el último SDK de empujador. Por supuesto, no recomendamos realizar ningún cambio en el marco básico, pero sólo te destacaría lo que debe hacerse.

Seguir adelante y abrir el archivo vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/PusherBroadcaster.php. Simplemente reemplazar el fragmento use Pusher; con el use Pusher\Pusher;.

A continuación, vamos a abrir el archivo vendor/laravel/framework/src/Illuminate/Broadcasting/BroadcastManager.php y hacer un cambio similar en el siguiente fragmento de código.

1
return new PusherBroadcaster(
2
  new \Pusher\Pusher($config['key'], $config['secret'],
3
  $config['app_id'], Arr::get($config, 'options', []))
4
);

Por último, vamos a habilitar el servicio de difusión en config/app.php quitando el comentario en la siguiente línea.

1
App\Providers\BroadcastServiceProvider::class,

Hasta ahora, hemos instalado bibliotecas específicas de servidor. En la siguiente sección, iremos a través de las bibliotecas de cliente que necesitan ser instalado así.

Empujador y bibliotecas Laravel eco — instalación y configuración

En la radiodifusión, la responsabilidad de la parte cliente es suscribirse a canales y eventos deseados. Bajo el capó, logra mediante la apertura de una nueva conexión al servidor de web Sockets.

Por suerte, no tenemos que implementar cualquier cosa compleja de JavaScript para conseguir como Laravel ya proporciona una biblioteca de cliente útil, Laravel eco, que nos ayuda a acuerdo con sockets en el cliente. También, es compatible con el servicio de empujador que vamos a utilizar en este artículo.

Puede instalar Laravel Echo usando el gestor de paquetes MNP. Por supuesto, necesitará instalar nodos y MNP en primer lugar si no los tienes ya. El resto es bastante simple, como se muestra en el siguiente fragmento de código.

1
$npm install laravel-echo

Lo que nos interesa es el archivo node_modules/laravel-echo/dist/echo.js que debería copiar a public/echo.js.

Sí, entiendo, es un poco de overkill que acaba de obtener un único archivo JavaScript. Si no quieres ir a través de este ejercicio, puede descargar el archivo echo.js en mi GitHub.

Y con esto, hemos terminado con nuestra configuración de bibliotecas de cliente.

Configuración de Archivo Back-End

Recuerdo que estábamos hablando de creación de una aplicación que permite a los usuarios de nuestra aplicación para enviar mensajes entre sí. Por el contrario, enviaremos notificaciones de difusión a los usuarios que se registran en cuando reciben un nuevo mensaje de otros usuarios.

En esta sección, vamos a crear los archivos que se requieren para implementar el caso de uso que estamos buscando.

Para comenzar con, vamos a crear el modelo de Mensaje que contiene los mensajes enviados por los usuarios entre sí.

1
$php artisan make:model Message --migration

También es necesario agregar algunos campos como tofrom y message a nuestra tabla de mensajes. Así que vamos a cambiar el archivo de migración antes de ejecutar el comando migrate.

1
<?php
2
3
use Illuminate\Support\Facades\Schema;
4
use Illuminate\Database\Schema\Blueprint;
5
use Illuminate\Database\Migrations\Migration;
6
7
class CreateMessagesTable extends Migration
8
{
9
    /**

10
     * Run the migrations.

11
     *

12
     * @return void

13
     */
14
    public function up()
15
    {
16
        Schema::create('messages', function (Blueprint $table) {
17
            $table->increments('id');
18
            $table->integer('from', FALSE, TRUE);
19
            $table->integer('to', FALSE, TRUE);
20
            $table->text('message');
21
            $table->timestamps();
22
        });
23
    }
24
25
    /**

26
     * Reverse the migrations.

27
     *

28
     * @return void

29
     */
30
    public function down()
31
    {
32
        Schema::dropIfExists('messages');
33
    }
34
}

Ahora, vamos a ejecutar el comando de migración que crea la tabla de mensajes en la base de datos.

1
$php artisan migrate

Cada vez que desee crear un evento personalizado en Laravel, debe crear una clase para ese evento. Basado en el tipo de evento, Laravel reacciona en consecuencia y toma las acciones necesarias.

Si el evento es un evento normal, Laravel llama las clases de oyente asociado. Por otro lado, si el evento es de tipo broadcast, Laravel envía el evento al servidor web Sockets que se configura en el archivo config/broadcasting.php.

En nuestro ejemplo estamos usando el servicio de Pusher, Laravel enviaremos eventos al servidor de Pusher.

Vamos a usar el siguiente comando artesanal para crear una clase de evento personalizado: NewMessageNotification.

1
$php artisan make:event NewMessageNotification

Debe crear la clase app/Events/NewMessageNotification.php. Vamos a sustituir el contenido de ese archivo con el siguiente.

1
<?php
2
3
namespace App\Events;
4
5
use Illuminate\Broadcasting\Channel;
6
use Illuminate\Queue\SerializesModels;
7
use Illuminate\Broadcasting\PrivateChannel;
8
use Illuminate\Broadcasting\PresenceChannel;
9
use Illuminate\Broadcasting\InteractsWithSockets;
10
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
11
use App\Message;
12
13
class NewMessageNotification implements ShouldBroadcastNow
14
{
15
    use SerializesModels;
16
17
    public $message;
18
19
    /**

20
     * Create a new event instance.

21
     *

22
     * @return void

23
     */
24
    public function __construct(Message $message)
25
    {
26
        $this->message = $message;
27
    }
28
29
    /**

30
     * Get the channels the event should broadcast on.

31
     *

32
     * @return Channel|array

33
     */
34
    public function broadcastOn()
35
    {
36
        return new PrivateChannel('user.'.$this->message->to);
37
    }
38
}

Lo importante a destacar es que la clase NewMessageNotification implementa la interfaz ShouldBroadcastNow. Así, cuando levantamos un evento, Laravel sabe que este evento debe ser transmitido.

De hecho, podría también implementar la interfaz ShouldBroadcast y Laravel añade un evento en la cola de eventos. A ser procesado por el trabajador de la cola de eventos cuando tiene la oportunidad de hacerlo. En nuestro caso, queremos transmitir inmediatamente, y es por eso que hemos utilizado la interfaz ShouldBroadcastNow.

En nuestro caso, queremos mostrar un mensaje que ha recibido el usuario, y así hemos pasado el modelo de Mensaje en el argumento del constructor. De esta manera, se pasarán los datos junto con el evento.

A continuación, es el método de broadcastOn que define el nombre del canal en el cual se transmitirá el evento. En nuestro caso, hemos utilizado el canal privado ya que queremos restringir el evento de difusión a los usuarios conectados.

$this->message->to a variable se refiere a la identificación del usuario a la que se transmitirá el evento. Así, efectivamente es el nombre del canal como user.{USER_ID}.

En el caso de canales privados, el cliente debe autenticarse antes de establecer una conexión con el servidor de web Sockets. Se asegura de que los eventos que se emiten en canales privados son enviados a los clientes autenticados sólo. En nuestro caso, significa que solamente usuarios registrados podrán suscribirse a nuestro canal de user.{USER_ID}.

Si está utilizando la biblioteca cliente de eco Laravel para suscripción de canal, estás de suerte! Automáticamente se encarga de la parte de autenticación, y sólo debe definir las rutas de canal.

Vamos a seguir adelante y añadir una ruta para nuestro canal privado en el archivo routes/channels.php.

1
<?php
2
3
/*

4
|--------------------------------------------------------------------------

5
| Broadcast Channels

6
|--------------------------------------------------------------------------

7
|

8
| Here you may register all of the event broadcasting channels that your

9
| application supports. The given channel authorization callbacks are

10
| used to check if an authenticated user can listen to the channel.

11
|

12
*/
13
14
Broadcast::channel('App.User.{id}', function ($user, $id) {
15
    return (int) $user->id === (int) $id;
16
});
17
18
Broadcast::channel('user.{toUserId}', function ($user, $toUserId) {
19
    return $user->id == $toUserId;
20
});

Como se puede ver, hemos definido el user.{toUserId} ruta nuestro canal privado.

El segundo argumento del método canal debe ser una función de cierre. Laravel pasa automáticamente al usuario actualmente logueado como el primer argumento de la función de cierre, y el segundo argumento se trae generalmente del nombre del canal.

Cuando el cliente intenta suscribirse al canal privado user.{USER_ID}, la biblioteca Laravel Echo hace la autenticación necesaria en el fondo mediante el objeto XMLHttpRequest, o más comúnmente conocido como XHR.

Hasta ahora, hemos terminado con la configuración, así que vamos adelante y prueba.

Configuración de Archivo Front-End

En esta sección, vamos a crear los archivos que se requieren para probar nuestro caso de uso.

Vamos a ir adelante y crear un archivo de controlador en app/Http/Controllers/MessageController.php con el siguiente contenido.

1
<?php
2
namespace App\Http\Controllers;
3
4
use App\Http\Controllers\Controller;
5
use App\Message;
6
use App\Events\NewMessageNotification;
7
use Illuminate\Support\Facades\Auth;
8
9
class MessageController extends Controller
10
{
11
    public function __construct() {
12
        $this->middleware('auth');
13
    }
14
15
    public function index()
16
    {
17
        $user_id = Auth::user()->id;
18
        $data = array('user_id' => $user_id);
19
20
        return view('broadcast', $data);
21
    }
22
23
    public function send()
24
    {
25
        // ...

26
        
27
        // message is being sent

28
        $message = new Message;
29
        $message->setAttribute('from', 1);
30
        $message->setAttribute('to', 2);
31
        $message->setAttribute('message', 'Demo message from user 1 to user 2');
32
        $message->save();
33
        
34
        // want to broadcast NewMessageNotification event

35
        event(new NewMessageNotification($message));
36
        
37
        // ...

38
    }
39
}

En el método index, estamos utilizando la vista de la broadcast, así que vamos a crear el archivo de vista resources/views/broadcast.blade.php así.

1
<!DOCTYPE html>
2
<html lang="{{ app()->getLocale() }}">
3
<head>
4
    <meta charset="utf-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8
    <!-- CSRF Token -->
9
    <meta name="csrf-token" content="{{ csrf_token() }}">
10
11
    <title>Test</title>
12
13
    <!-- Styles -->
14
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
15
</head>
16
<body>
17
    <div id="app">
18
        <nav class="navbar navbar-default navbar-static-top">
19
            <div class="container">
20
                <div class="navbar-header">
21
22
                    <!-- Collapsed Hamburger -->
23
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
24
                        <span class="sr-only">Toggle Navigation</span>
25
                        <span class="icon-bar"></span>
26
                        <span class="icon-bar"></span>
27
                        <span class="icon-bar"></span>
28
                    </button>
29
30
                    <!-- Branding Image -->
31
                    <a class="navbar-brand123" href="{{ url('/') }}">
32
                        Test
33
                    </a>
34
                </div>
35
36
                <div class="collapse navbar-collapse" id="app-navbar-collapse">
37
                    <!-- Left Side Of Navbar -->
38
                    <ul class="nav navbar-nav">
39
                        &nbsp;
40
                    </ul>
41
42
                    <!-- Right Side Of Navbar -->
43
                    <ul class="nav navbar-nav navbar-right">
44
                        <!-- Authentication Links -->
45
                        @if (Auth::guest())
46
                            <li><a href="{{ route('login') }}">Login</a></li>
47
                            <li><a href="{{ route('register') }}">Register</a></li>
48
                        @else
49
                            <li class="dropdown">
50
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
51
                                    {{ Auth::user()->name }} <span class="caret"></span>
52
                                </a>
53
54
                                <ul class="dropdown-menu" role="menu">
55
                                    <li>
56
                                        <a href="{{ route('logout') }}"
57
                                            onclick="event.preventDefault();

58
                                                     document.getElementById('logout-form').submit();">
59
                                            Logout
60
                                        </a>
61
62
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
63
                                            {{ csrf_field() }}
64
                                        </form>
65
                                    </li>
66
                                </ul>
67
                            </li>
68
                        @endif
69
                    </ul>
70
                </div>
71
            </div>
72
        </nav>
73
74
        <div class="content">
75
                <div class="m-b-md">
76
                    New notification will be alerted realtime!
77
                </div>
78
        </div>
79
    </div>
80
81
    <!-- receive notifications -->
82
    <script src="{{ asset('js/echo.js') }}"></script>
83
84
    <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
85
        
86
        <script>
87
          Pusher.logToConsole = true;
88
        
89
          window.Echo = new Echo({
90
            broadcaster: 'pusher',
91
            key: 'c91c1b7e8c6ece46053b',
92
            cluster: 'ap2',
93
            encrypted: true,
94
            logToConsole: true
95
          });
96
        
97
          Echo.private('user.{{ $user_id }}')
98
          .listen('NewMessageNotification', (e) => {
99
              alert(e.message.message);
100
          });
101
        </script>
102
    <!-- receive notifications -->
103
</body>
104
</html>

Y, por supuesto, tenemos que agregar rutas así como en el archivo routes/web.php.

1
Route::get('message/index', 'MessageController@index');
2
Route::get('message/send', 'MessageController@send');

En el método constructor de la clase del controlador, se puede ver que hemos utilizado el middleware de auth para asegurarse de que métodos de control se accede sólo a usuarios registrados.

A continuación, es el método de index que representa la vista de broadcast. Vamos a tirar el código más importante en el archivo de vista.

1
<!-- receive notifications -->
2
<script src="{{ asset('js/echo.js') }}"></script>
3
4
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
5
    
6
<script>
7
    Pusher.logToConsole = true;
8
9
    window.Echo = new Echo({
10
        broadcaster: 'pusher',
11
        key: 'c91c1b7e8c6ece46053b',
12
        cluster: 'ap2',
13
        encrypted: true,
14
        logToConsole: true
15
    });
16
17
    Echo.private('user.{{ $user_id }}')
18
    .listen('NewMessageNotification', (e) => {
19
        alert(e.message.message);
20
    });
21
</script>
22
<!-- receive notifications -->

En primer lugar, cargamos las bibliotecas de cliente necesario, Laravel eco y Pusher, lo que nos permite abrir la conexión de web-socket para el servidor de web sockets de Pusher.

A continuación, creamos la instancia de Echo proporcionando empuje como nuestro adaptador de difusión y otra información relacionada con el empuje necesario.

Mover más, utilizamos el método privado de Echo para suscribirse al canal privado user.{USER_ID}. Como ya comentamos anteriormente, el cliente debe autenticarse antes de suscribirse al canal privado. Así el objeto Echo realiza la autentificación necesaria enviando el XHR en el fondo con los parámetros necesarios. Por último, Laravel intenta encontrar la ruta user.{USER_ID} y deben coincidir con la ruta que hemos definido en el archivo routes/channels.php.

Si todo va bien, usted debe tener una conexión de socket de web abierta con el servidor de web sockets de empuje y es listado de eventos del ¡Canal user.{USER_ID}! De ahora en adelante, podremos recibir todos los eventos entrantes de este canal.

En nuestro caso, queremos escuchar para el evento de NewMessageNotification y así hemos utilizado el método de listen del objeto Echo para lograrlo. Para mantener las cosas simples, le avisaremos cuando justo el mensaje que hemos recibido desde el servidor de botón.

Así era la configuración para recibir eventos desde el servidor de web sockets. A continuación, iremos a través del método de send en el archivo de controlador que genera el evento de difusión.

Vamos a tirar rápidamente en el código del método send.

1
public function send()
2
{
3
    // ...

4
    
5
    // message is being sent

6
    $message = new Message;
7
    $message->setAttribute('from', 1);
8
    $message->setAttribute('to', 2);
9
    $message->setAttribute('message', 'Demo message from user 1 to user 2');
10
    $message->save();
11
    
12
    // want to broadcast NewMessageNotification event

13
    event(new NewMessageNotification($message));
14
    
15
    // ...

16
}

En nuestro caso, vamos a notificar a los usuarios registrados cuando recibe un nuevo mensaje. Así que hemos tratado de imitar ese comportamiento en el método send.

A continuación, hemos utilizado la función ayudante de event para el evento NewMessageNotification. Ya que el evento NewMessageNotification es de tipo ShouldBroadcastNow, Laravel carga la configuración predeterminada de difusión desde el archivo config/broadcasting.php. Por último, emite el evento NewMessageNotification para el servidor web configurado-toma del canal user.{USER_ID}.

En nuestro caso, el evento será transmitido al servidor de web Sockets Pusher en el canal user.{USER_ID}. Si el ID del usuario destinatario es 1, el evento se transmitirá por el canal de user.1.

Como ya comentamos anteriormente, ya tenemos una configuración que escucha los eventos de este canal, por lo que debe ser capaz de recibir este evento, y aparece el cuadro de alerta al usuario.

Vamos a seguir adelante y caminar a través de cómo se supone para probar el caso de uso que hemos construido hasta ahora.

Abra el http://your-laravel-site-domain/message/index URL en su navegador. Si usted no está conectado todavía, se te redirigirá a la pantalla de inicio de sesión. Una vez que estás logueado, usted debe ver la difusión que definimos anteriormente, nada de lujo todavía.

De hecho, Laravel ha hecho absolutamente un poco de trabajo en el fondo ya para usted. Como hemos habilitado al ajuste de Pusher.logToConsole proporcionado por la biblioteca de cliente de Pusher, registra todo en la consola del explorador para propósitos de depuración. Vamos a ver lo que se está registrando en la consola cuando acceda a la página de http://your-laravel-site-domain/message/index.

1
Pusher : State changed : initialized -> connecting
2
3
Pusher : Connecting : {"transport":"ws","url":"wss://ws-ap2.pusher.com:443/app/c91c1b7e8c6ece46053b?protocol=7&client=js&version=4.1.0&flash=false"}
4
5
Pusher : Connecting : {"transport":"xhr_streaming","url":"https://sockjs-ap2.pusher.com:443/pusher/app/c91c1b7e8c6ece46053b?protocol=7&client=js&version=4.1.0"}
6
7
Pusher : State changed : connecting -> connected with new socket ID 1386.68660
8
9
Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":"c91c1b7e8c6ece46053b:cd8b924580e2cbbd2977fd4ef0d41f1846eb358e9b7c327d89ff6bdc2de9082d","channel":"private-user.2"}}
10
11
Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"private-user.2"}
12
13
Pusher : No callbacks on private-user.2 for pusher:subscription_succeeded

Ha abierto la conexión de web-socket con el servidor de web Sockets empujador y suscrito para escuchar eventos en el canal privado. Por supuesto, podría tener un nombre de canal diferente en su caso basado en el ID del usuario que está conectado con. Ahora, vamos a mantener esta página abierta a medida que avanzamos probar el método send.

A continuación, vamos a abrir la URL http://your-laravel-site-domain/message/send en la otra pestaña o en un navegador distinto. Si vas a usar otro navegador, necesita conectarse para poder acceder a esa página.

Tan pronto como se abre la página http://your-laravel-site-domain/message/send, podrá ver un mensaje de alerta en la ficha otros en http://your-laravel-site-domain/message/index.

Vamos a navegar a la consola para ver lo que ha sucedido.

1
Pusher : Event recd : {"event":"App\\Events\\NewMessageNotification","data":{"message":{"id":57,"from":1,"to":2,"message":"Demo message from user 1 to user 2","created_at":"2018-01-13 07:10:10","updated_at":"2018-01-13 07:10:10"}},"channel":"private-user.2"}

Como se puede ver, le dice que sólo ha recibido el evento App\Events\NewMessageNotification desde el servidor de web Sockets Pusher en el canal private-user.2.

De hecho, usted puede ver lo que está sucediendo ahí fuera en el extremo del Pusher, así. Accede a tu cuenta de Pusher y desplácese hasta la aplicación. En la consola de depuración, debería poder ver los mensajes que se está registrando.

Pusher DashboardPusher DashboardPusher Dashboard

Y nos lleva al final de este artículo! Que no era demasiado de una sola vez como he tratado de simplificar las cosas a lo mejor de mi conocimiento.

Conclusión

Hoy en día, pasamos por una de las características menos discutidas de Laravel — difusión. Permite enviar notificaciones en tiempo real usando sockets de web. En el transcurso de este artículo, hemos construido un ejemplo real que demuestra el concepto ya mencionado.

Sí ya sé, es un montón de cosas para digerir en un solo artículo, así que no dude en utilizar el comentario de alimentación por debajo debe usted se encuentra en problemas durante la implementación.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.