Como usar o Laravel com soquete.Io

WebSockets são legais. Eles são realmente úteis se você quiser mostrar atividades em tempo real de seus usuários (ou talvez alguns empregos na fila).

Agora, se você tem medo da palavra "websockets", não seja. Vou estabelecer as instruções sobre como você pode usá -lo e estarei por perto para responder às suas perguntas, se necessário.

Eu tive esse desafio em que precisava mostrar uma lista de pessoas que estão atualmente vendo um URL específico em Laravel. Então eu comecei a pensar. Parte de mim queria fazer um truque rápido (felizmente esse não é o lado mais forte do meu). Enquanto o outro queria construir algo legal, reutilizável e duradouro.

“Por que você simplesmente não usa empurrador?”

É o seguinte.

Laravel vem com empurrador habilitado. Embora o Pusher pareça uma solução rápida de "plug and play" (o que é), ela vem com limitações. Confira https: // empurrador.com/preços

E a maioria dos tutoriais o enganam com o título de implementação do WebSockets quando, na realidade. (E minha parte favorita é quando eles dizem que você pode mudar facilmente para o soquete.io)

“Queremos ter um número ilimitado de conexões”

Não queremos nos preocupar com limitações.

Vamos começar.

Estou usando o Vagrant / Homestead.

Para isso, precisaremos ler sobre transmissão de eventos.

Coisas a serem observadas aqui (então eu não preciso repetir as coisas):

1. Interface devebroadcast para eventos

2. Ativar rotas de transmissão e usar rotas/canais.PHP para autenticar usuários

3. Public Channel - todos podem ouvir

4. Canal privado - você precisa autorizar os usuários antes que eles possam ingressar em um canal

5. Canal de presença - como privado, mas você pode passar muitos metadados adicionais nesse canal e obter uma lista de pessoas que se juntaram ao canal.Método do evento Broadcaston ()

Crie seu evento

PHP Artisan Make: Event Messagepushed

Você pode até seguir o exemplo específico na documentação de transmissão de eventos. (Que devemos realmente).

Instale redis

Antes disso, eu realmente tinha filas configuradas com supervisor/redis/horizonte. Horizon é ótimo e você pode encontrar informações sobre isso aqui https: // laravel.com/docs/5.6/Horizon

Depois de trabalhar suas filas, esse evento MessagePushed precisará usar filas.

Nota: Para que tudo isso funcione, edite seu .Arquivo ENV:

Transmission_driver = redis
Queue_driver = Redis (isso é da configuração do horizonte, mas precisaremos disso para mais tarde)
Redis_host = 127.0.0.1
Redis_password = null
Redis_port = 6379

Instale o servidor Laravel Echo

Portanto, esta parte é na verdade onde instalamos o soquete.Servidor de IO que é incluído dentro de Laravel-Eco-Server. Você pode encontrar sobre isso aqui: https: // github.com/tlaverdure/laravel-eco-server

Nota: Verifique os requisitos no topo!

Execute o seguinte (conforme declarado no documento)

NPM Install -g Laravel-Eco-Server

E depois execute o init para obter seu servidor Laravel-Eco.Arquivo JSON gerado na raiz do aplicativo (que precisaremos configurar).

Laravel-eco-server init

Depois de gerar o seu servidor Laravel-Eco.arquivo json, deve ficar assim.

"Authhost": "http: // local-website.aplicativo",
"AuthendPoint": "/Broadcasting/Auth",
"Clientes": [

"Appid": "My-App-Id",
"Key": "My-Key-Generated-With-Init-Command"

],
"Banco de dados": "redis",
"DatabaseConfig":
"Redis": ,
"Sqlite":
"Databasepath": "/Database/Laravel-Eco-Server.sqlite "
,
"Port": "6379",
"Host": "127.0.0.1 "
,
"DevMode": false,
"Host": NULL,
"Port": "6001",
"Protocolo": "http",
"Socketio": ,
"SSLCERTPATH": "",
"Sslkeypath": "",
"SSLCERTCHAINPATH": "",
"sslpassphrase": ""

Nota: Se você quiser empurrar isso para o seu servidor público, adicione o Laravel-Eco-server.json para o seu .Gitignore. Gere este arquivo no servidor, caso contrário, você precisará alterar seu authost o tempo todo.

Execute seu servidor Laravel Echo

Você tem que executá -lo para iniciar o websockets.

Laravel-eco-server Start

(Dentro da sua raiz-onde seu Laravel-Eco-Server.JSON é colocado)

Deve começar com sucesso. (Agora vamos querer adicionar isso ao supervisor no seu servidor, por isso é iniciado automaticamente e reiniciado caso traga)

Dentro do seu/etc/supervisor/conf.D/Laravel-Eco.conf (basta criar este arquivo dentro do seu conf.D Pasta) Coloque o seguinte:

[Programa: Laravel-Eco]
diretório =/var/www/my-website-foldder
process_name =%(program_name) s _%(process_num) 02d
Command = Laravel-Eco-Server Start
AutoStart = true
autorestart = true
usuário = seu linux-usuário
numProcs = 1
redirect_stderr = true
stdout_logfile =/var/www/my-website-folder/storage/logs/eco.registro

Depois de se posicionar em sua raiz de Laravel, você pode correr

PWD

Para obter o caminho para o seu 'diretório' acima e 'stdout_logfile' prefixo.

Seu usuário será seu usuário Linux (Vagrant ou Ubuntu ou outro)

Salve o arquivo e saia.

Se você usou o vim laravel-eco.Conf então, quando dentro, pressione I (como Istambul) no seu teclado para editar um arquivo com vim e depois digite ESC seguinte: WQ! Para fechar o arquivo e salvá -lo.

Em seguida, precisamos executar os seguintes comandos:

Supervisorctl SUDO STOP
SUDO SUPERVISORCTL REERADE
SUDO SUPERVISORCTL RELOAD

Depois disso, cheque para ver se o Laravel Echo está funcionando

SUDO SUPERVISORCTL STATUS

Instale o cliente Laravel Echo e Socket IO

NPM Instale-Save Laravel-Eco
NPM Instalação -Socoque.io-client
[/c] C
E então em seu bootstrap.JS (estou usando o vue js) Registre seu eco
[CC Lang = "Bash" escapou = "True" Width = "800"]
Importar eco de "Laravel-Eco"
janela.io = requer ('soquete.io-client ');
// tem isso caso você pare de executar seu
Laravel Echo Serverif (tipo de io !== 'indefinido')
janela.Eco = novo eco (
emissora: 'soquete.io ',
Host: janela.localização.nome de host + ': 6001',
);

Agora verifique novamente como ouvir seus eventos em canais específicos.

Após a documentação sobre a transmissão do Laravel, compartilhamos acima, se você definir o método Broadcaston () para retornar um novo Presencechannel (explicarei o caso específico que fiz, mas fique à vontade para fazer perguntas, caso você precise de algo mais implementado. Acho que isso é de maior complexidade do que simplesmente usar um canal público, para que possamos diminuir sem problemas), então queremos ouvir esse canal no lado JavaScript (frontend).

Aqui está um exemplo concreto:

1. Eu empurrei um evento para um canal de presença (eu estava lidando com pesquisas)

Função pública Broadcaston ()
Retorne o novo Presencechannel ('Pesquisa.' . $ this-> pesquisa-> id);

2. Depois de empurrar o evento, ele passará por canais.php. Lá, queremos criar uma autorização para este usuário. (Lembre -se de devolver uma matriz para a autorização do canal de presença e não um booleano.)

Broadcast :: Channel ('pesquisa.ware
['id' => $ user-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Então, no meu componente Vuejs, que carrega na página, eu quero monitorar, defino um método que será iniciado a partir do método criado () na carga:

OuvirForBroadcast (Survey_Id)
Eco.ingressar ('pesquisa.' + Survey_id)
.aqui ((usuários) =>
esse.usuários_viewing = usuários;
esse.$ forceUpdate ();
)
.JONING ((usuário) =>
se este.checkIfUseralReadyViewingsurvey (Usuário))
esse.usuários_viewing.push (usuário);
esse.$ forceUpdate ();

)
.deixando ((usuário) =>
esse.RemowViewingUser (usuário);
esse.$ forceUpdate ();
);
,

Obviamente, retirei algum código do contexto aqui, mas tenho essa matriz 'Usuários_viewing' para manter meus usuários atuais que se juntaram ao canal.
E isso seria realmente.

Espero que você tenha sido capaz de seguir enquanto eu tentava ser detalhado como posso.

Codificação feliz!