Як побудувати додаток для чату в режимі реального часу з Laravel 5.4 та VueJs

Laravel - це дуже майбутнє поле в сучасному світі. Ця платформа допомогла розробити різні аспекти платформи без особливих зусиль. Використання Laravel Echo також стало дуже поширеним. Laravel Echo - бібліотека Javascript, завдяки якій безболісно підписуватися на різні канали та слухати трансляцію подій Laravel.

Існує також послуга штовхача повідомлень, де можна створити обліковий запис за допомогою власного месенджера. З використанням Laravel 5.3 для файлів лез, а також бібліотеки фронтенду Laravel Echo з vue-ресурсом, весь процес швидко пройде швидко.

В кінці кінця, ви повинні відкрити два браузери і побачити, чи працює чат.

Залежності, які треба встановити

Все починається з встановлення цих пакетів для вставання та запуску із подіями Laravel Echo / Broadcasting.

Можна встановити Echo через менеджер пакетів NPM. Візьмемо приклад, де ми можемо встановити пакет pushher-js; один буде використовувати телеканал Pusher:

Можна запустити npm install - зберегти laravel-echo pushher-js в терміналі.

Тепер, якщо хтось транслює події через Pusher, тоді слід встановити Pusher PHP SDK за допомогою менеджера пакунків Composer:

композитору потрібен pushher / pushher-php-сервер

Тепер, коли всі легко встановити залежність, настане час для створення акаунта pushher.com. Якщо відповідно створили обліковий запис, а потім створили додаток, на вкладці Клавіші додатків слід побачити певні ключі додатка.

Просто скопіюйте цей ключ у весь .env-файл, як це.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

І пам’ятайте, щоб побачити драйвер трансляції, щоб Laravel знав, яким драйвером захоче користуватися.

BROADCAST_DRIVER = штовхач

У файлі config / emising.php добре додати декілька параметрів для такого типу підключення

'штовхач' => [
           'driver' => 'штовхач',
           'key' => env ('PUSHER_APP_KEY'),
            'секрет' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'параметри' => [
                 'cluster' => 'ap2',
                  'зашифровано' => вірно
             ],
        ],

Тепер ми повинні спробувати створити подію, щоб побачити, чи можна натиснути деякі повідомлення прямо в акаунт Pusher.

Просто перейдіть до терміналу, а потім наберіть php artisan, зробивши подію MessagePosted.

знайдіть клас у додатку / події / ChatMessageWas Received.php, що робить його реалізацією ShouldBroadcast. Так ось так

клас ChatMessageWasReceived реалізує ShouldBroadcast
{

Тепер ми хочемо створити відповідне повідомлення в чаті, вводимо PHP artisan make: модель ChatMessage –migration. Це може створити для нас модель та міграцію та почати це чи додати власні рядки.

Схема :: create ('chat_messages', функція (Blueprint $ table) {
            $ table-> з кроком ('id');
            $ table-> string ('повідомлення');
            $ table-> integer ('user_id') -> без підпису ();
            $ table-> часові позначки ();
        });

Не забудьте додати $ fillable до моделі.

клас ChatMessage розширює Модель
{
    public $ fillable = ['user_id', 'message'];
}

Тепер спробуйте ввести користувача та повідомлення прямо до події

клас ChatMessageWasReceived реалізує ShouldBroadcast
{
    використовувати InteractsWithSockets, SerializesModels;

    публічний $ chatMessage;
    публічний користувач $;

    / **
     * Створіть новий екземпляр події.
     *
     * @param $ chatMessage
     * @param $ user
     * /
    публічна функція __construct ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ user;
    }

    / **
     * Отримайте канали, на яких повинна транслюватись подія.
     *
     * @return Channel | масив
     * /
    публічна функція мовленняOn ()
    {
        повернути новий канал ("загальнодоступний тестовий канал");
    }
}

За допомогою нашого файлу маршруту web.php ми встановимо маршрут для JavaScript для здійснення дзвінка ajax з повідомленням.

// Надіслати повідомлення Javascript.
Маршрут :: повідомлення ('повідомлення', функція (Запит $ запиту) {

    $ user = Auth :: user ();

    $ message = ChatMessage :: create ([
        'user_id' => $ user-> id,
        'message' => $ request-> input ('message')
    ]);

    подія (новий ChatMessageWasReceived ($ message, $ user));


});

Ми захоплюємо зареєстрований користувач право, щоб вставити ідентифікатор і повідомлення в дану таблицю чат-повідомлень, а також пожежу події з повідомленням та об’єктом користувача.

Все це повністю охоплює бекенд.

Налаштування Frontend

Laravel 5.4 постачається з деякими файлами javascript, які встановлюють jquery, bootstrap, vue та vue-ресурс дуже зручні для швидкого вставання та роботи.

Наступним кроком буде імпорт бібліотеки прикордонних програм Laravel Echo, а потім зробити це ресурсами / активами / js / bootstrap.js з деяким кодом, який зробив коментар.

імпорт Echo з "laravel-echo"

window.Echo = новий Ехо ({
    мовник: "штовхач",
    ключ: 'ffb166f4976941e634327c5',
    кластер: 'ap2',
    зашифровано: правда
});

Просто не забудьте додати власну кнопку натискання.

Наступним кроком буде пройти і створити файл з назвою chat.js, а потім помістити його відповідно до папки компонентів javascript і відповідно додати цей код.

module.exports = {

    дані () {
        повернути {
            дописи: [],
            newMsg: '',

        }
    },


    готовий () {
        Echo.channel ("канал загальнодоступного тестування")
            .listen ('ChatMessageWasReceived', (data) => {

                // Натисніть ата до списку публікацій.
                this.posts.push ({
                    повідомлення: data.chatMessage.message,
                    ім'я користувача: data.user.name
                });
            });
    },

    методи: {

        натисніть () {

            // Надіслати повідомлення до бекенду.
            це. $ http.post ('/ message /', {message: this.newMsg})
                .then ((відповідь) => {

                    // Очистити поле введення.
                    this.newMsg = '';
                });
        }
    }
};

Перш за все в методі Ready (), він прослухає канал public-test-каналу, який вказаний у Event ChatMessageWasRecieved

Далі він прослуховує будь-які події, які потрапляють прямо до класу подій, а потім виштовхує отримані дані в масив даних публікацій.

Відповідно метод press () надішле запит ajax направо на маршрутизацію файлів із повідомленням, набраним користувачем у переглянутому користувачеві. І останнє, що нам потрібно - це додати компонент до файлу app.js наступним чином.

Vue.component ('example', вимагає ('./ компоненти / Example.vue'));
 Vue.component ('чат', вимагаю ('./ компоненти / чат'));

Налаштування файлу перегляду

Останнім кроком буде додати поле введення для користувача, щоб почати спілкуватися. Хороше місце, щоб додати, що це у файлі home.blade.php, який постачається з Laravel за допомогою дефляту. Потім можна знайти файл у ресурсах / views / home.blade.php.

    <чат inline-template>     Ви ввійшли в систему!     
    

Напишіть щось усім користувачам

         
    

Повідомлення

    
         @ {{post.username}} говорить: @ {{post.message}}     
    

Ми додаємо вхідний fiekd разом з v-model = "newMsg" та @ keyup.enter = "натисніть" для запуску методу Vue, коли користувач натискає Enter.

У програмі людина просто прокрутить публікації користувача.

Підведенню

Таким чином, це спосіб створити простий додаток для чату з Laravel 5.3 та Vue. Спробуйте відкрити два веб-переглядачі і побачити, чи працює він.