close

Construindo um Real-Time aplicativo de bate-papo com Laravel WebSocket

Um real-time aplicativo de chat é um excelente exemplo de como WebSocket pode revolucionar real-time a comunicação interativa na web. Neste artigo, veremos como criar um aplicativo de bate-papo simples usando Laravel e integrando WebSocket usando o laravel-websockets package para fornecer experiências de comunicação responsivas e interativas aos usuários.

Objetivos do Aplicativo

Vamos construir um real-time aplicativo de chat com as seguintes características:

Enviar e receber mensagens instantaneamente: os usuários podem enviar e receber mensagens instantaneamente sem precisar atualizar a página.

Lista de usuários online: o aplicativo exibirá uma lista de usuários online e seu status de bate-papo.

Enviar imagens e arquivos: os usuários podem compartilhar imagens e arquivos no chat.

Introdução à instalação e configuração

Para começar, precisamos instalar laravel-websockets package e configurar para integrar WebSocket com Laravel. Siga esses passos:

Instale o laravel-websockets package: Comece instalando o package usando Composer.

composer require pusher/pusher-php-server

Publique o arquivo de configuração: após a instalação, publique o arquivo de configuração para personalizar as configurações.

 

php artisan vendor:publish --tag=websockets-config

Executar migration: Crie as tabelas de banco de dados necessárias para WebSocket.

php artisan migrate

Iniciar WebSocket servidor: inicie o WebSocket servidor para lidar com real-time as conexões 

php artisan websockets:serve

Construindo a interface do usuário

Criaremos uma interface de usuário simples usando HTML, CSS e JavaScript para exibir a lista de mensagens, a caixa de entrada e a lista de usuários online.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>

Integrando WebSocket e Broadcasting

Usaremos Laravel Broadcasting para integrar WebSocket com o aplicativo.

Instalar Pusher: Instale o pusher/pusher-php-server package para usar Pusher como Broadcasting driver.

composer require pusher/pusher-php-server

Configure Broadcasting: No config/broadcasting.php arquivo, configure o driver e forneça suas Pusher credenciais.

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],

Crie um evento e transmita: crie um evento ChatMessageSent e transmita-o quando um usuário enviar uma mensagem.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}

Script JavaScript: Use JavaScript para ouvir eventos do servidor e atualizar a interface do usuário.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});

Conclusão

Ao concluir este tutorial, você construiu com sucesso um real-time aplicativo de bate-papo usando WebSocket o Laravel. Os usuários podem enviar e receber mensagens instantaneamente, e você testemunhou como WebSocket fornece uma experiência de comunicação responsiva e interativa.