Broadcasting e Notificações 📡
Tags: tutorial, programming, laravel, beginners
Published: 2023-12-26 22:33:02

## Notificações
Notificações são um meio de informar aos nossos usuários que algo aconteceu. Existem diversos tipos de notificações, como e-mail e SMS, mas para este projeto, utilizaremos notificações do tipo push, que são mensagens enviadas aos dispositivos dos usuários, mesmo quando o aplicativo está fechado ou não em uso. Geralmente, essas notificações ficam no ícone do "sininho".

Na documentação, em notificações: [https://laravel.com/docs/10.x/notifications](https://laravel.com/docs/10.x/notifications) conseguimos encontrar o que precisaremos para que as notificações funcionem. Uma dependência é o broadcast: [https://laravel.com/docs/10.x/notifications#broadcast-notifications](https://laravel.com/docs/10.x/notifications#broadcast-notifications), a própria documentação nos instrui a configurar e compreender o conceito de broadcasting, e é exatamente isso que faremos antes de prosseguir:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44yt70l6hqbrbecwh1fu.png)

##Broadcasting
Resumidamente, de acordo com a documentação, os broadcasts são canais que permitem compartilhar os mesmos nomes de eventos e dados entre sua aplicação Laravel no servidor e sua aplicação JavaScript no cliente. Os clientes se conectam no frontend em canais pré-nomeados, enquanto sua aplicação Laravel transmite eventos para esses canais no backend. Esses eventos podem conter qualquer dado adicional que você queira disponibilizar para o frontend. Broadcasting é o que possibilitará que nosso backend informe em tempo real ao nosso frontend quando algo ocorre.

##Configuração inicial para utilizar Broadcasting
- Precisamos ter uma conta no [Pusher](https://pusher.com/) que será nosso server-side broadcasting driver, você pode criar uma conta gratuita de teste (Sandbox).
Posteriormente criar um app:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqf4uiipfkltv8lt82p8.png)
Depois vamos pegar nossas credenciais e preencher no .env:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzymxjk64d4zzddhun33.png)
.env:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spdwcu7v5wg6wn3pa96y.png)

- Vamos usar queues, logo precisamos configurar um queue worker [Queue](https://laravel.com/docs/10.x/queues):
No .env:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m1yg68z3x7krdwbu2yi.png)

Executar os comandos:
`php artisan queue:table`
`php artisan migrate`
Agora devemos ter uma nova tabela no nosso banco de dados:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8pb7qdm170s8v9n0jj4.png)

Essa tabela guarda todos os jobs que ainda não foram executados pela nossa queue.

##Configuração do broadcasting

- Descomente "App\Providers\BroadcastServiceProvider" no array de providers do seu arquivo config/app.php

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlwhu1okvqudkn1p4gxw.png)
- Instale o Pusher Channels PHP SDK:
`composer require pusher/pusher-php-server`

- Mude seu driver de broadcasting para o pusher no arquivo .env:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsifwt0w42qfs6gsmfwa.png)

- Instale o Laravel Echo, uma biblioteca JavaScript que torna simples se inscrever em canais e ouvir eventos transmitidos pelo driver de broadcasting no lado do servidor. Vamos aproveitar para instalar o pusher-js, já que escolhemos o Pusher como driver:
`npm install --save-dev laravel-echo pusher-js`

- Crie uma nova instância do Echo em JavaScript para a aplicação; um ótimo local para fazer isso é no arquivo de configuração resources/js/bootstrap.js. O arquivo já possui um exemplo que usaremos como referência:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e51iy2x3vey8s55j5wmn.png)

- Vamos compilar a aplicação:
`npm run dev`

- No nosso projeto usaremos canais privados, canais que precisam de autorização para serem acessados. Você pode encontrar mais detalhes aqui: [https://laravel.com/docs/10.x/broadcasting#defining-authorization-routes](https://laravel.com/docs/10.x/broadcasting#defining-authorization-routes)

Precisamos definir nossas regras de autorização de canais em routes/channels.php, usaremos o canal de exemplo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1ear3cdci4apd86pp72.png)

Nesse exemplo estamos passando o usuário logado que é padrão, e o id de algum usuário através do "{id}", para verificar se o id do usuário que estamos passando é o mesmo do usuário logado.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7t2cpv643qfqv3okyju.png)