close

Создание Real-Time чат-приложения с помощью Laravel WebSocket

Приложение real-time для чата — отличный пример того, как WebSocket можно революционизировать real-time интерактивное общение в Интернете. В этой статье мы рассмотрим создание простого приложения для чата с использованием Laravel и интеграцию WebSocket с использованием laravel-websockets package для обеспечения интерактивного взаимодействия с пользователями.

Цели приложения

Мы создадим real-time чат-приложение со следующими функциями:

Мгновенная отправка и получение сообщений: пользователи могут мгновенно отправлять и получать сообщения, не обновляя страницу.

Список онлайн-пользователей: приложение отобразит список онлайн-пользователей и их статус чата.

Отправка изображений и файлов: пользователи могут обмениваться изображениями и файлами в чате.

Начало работы с установкой и настройкой

Для начала нам нужно установить laravel-websockets package и настроить его для интеграции WebSocket с Laravel. Следуй этим шагам:

Установите laravel-websockets package: Начните с установки package с помощью Composer.

composer require pusher/pusher-php-server

Опубликуйте файл конфигурации: после установки опубликуйте файл конфигурации, чтобы настроить параметры.

 

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

Выполнить migration: Создайте необходимые таблицы базы данных для WebSocket.

php artisan migrate

Запустить WebSocket сервер: Запустите WebSocket сервер для обработки real-time подключений .

php artisan websockets:serve

Создание пользовательского интерфейса

Мы создадим простой пользовательский интерфейс с использованием HTML, CSS и JavaScript для отображения списка сообщений, поля ввода и списка онлайн-пользователей.

<!-- 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>

Интеграция WebSocket и Broadcasting

Мы будем использовать Laravel Broadcasting для интеграции WebSocket с приложением.

Установить Pusher: установить pusher/pusher-php-server package для использования Pusher в качестве Broadcasting драйвера.

composer require pusher/pusher-php-server

Настройка Broadcasting: в config/broadcasting.php файле настройте драйвер и укажите свои Pusher учетные данные.

'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,  
    ],  
],

Создайте событие и транслируйте: создайте событие ChatMessageSent и транслируйте его, когда пользователь отправляет сообщение.

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

Сценарий JavaScript: используйте JavaScript для прослушивания событий с сервера и обновления пользовательского интерфейса.

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

Заключение

Выполнив это руководство, вы успешно создали real-time приложение для чата, используя WebSocket файлы Laravel. Пользователи могут мгновенно отправлять и получать сообщения, и вы видели, как WebSocket обеспечивается отзывчивое и интерактивное общение.