Использование Laravel с socket.io

Создание события

Создадим первое событие:
php artisan make:event TranslationEvent

И укажем, что это событие является реализацией ShouldBroadcast интерфейса

В это событие будем передавать id трансляции, и сообщение, которое добавится в трансляцию. Так же, в методе broadcastOn вернём экземпляр класса Channel, который создаёт публичный канал.

Настройка Redis

В сборке Homestead Redis уже установлен, нам нужно только указать в конфигах, что мы собираемся использовать Redis в качестве драйвера очередей и событий.
Для этого нужно в .env файла BROADCAST_DRIVER указать redis, и QUEUE_DRIVER, так же redis.

Если вы ещё не знакомы с Redis, то советую ознакомиться с этой технологией в данной статье.

Итого должно получится:

Для простоты управления и визуального отображения redis-очередей, установим Horizon. Это не обязательно, однако, это сделает процесс более очевидным и понятным.

Установка Laravel-Echo

В этом пункте устанавливаем socket.io сервер, который идёт в комплекте с Laravel Echo

Laravel Echo нужно установить глобально, выполнив:
npm install -g laravel-echo-server
Если этой командой не удалось установить эту библиотеку, то попробуйте выполнить эту команду от имени root-пользователя:
sudo npm install -g laravel-echo-server

После установки laravel-echo-server нужно запустить скрипт инициализации конфигов:
laravel-echo-server init

Просто нажимая enter на все вопросы:

После чего, в корне проекта появится laravel-echo-server.json - файл, который содержит основные настройки socket сервера.

Примите во внимание, что, в случае, если вы захотите перенести этот проект на боевой сервер, то убедитесь, что вы добавили laravel-echo-server.json в .gitignore, и сгенерируйте его заново, уже на новом сервере. А иначе, постоянно придётся изменять authHost в конфиге.

Запуск Laravel Echo сервера

Для запуска вебсокетов выполним команду:
laravel-echo-server start

И должны увидеть:

Настройка supervizor

Теперь, наши сокеты доступны, и к ним можно безпроблемно подключаться. Однако, бывают случаи, когда сокеты могут отключиться, в результате какой-то ошибки. И они так и буду отключены до тех пор, пока мы не включим их вручную.
Правда, вручную не придётся, потому как за нас это будет делать supervisor. Supervison - это программа, который следит за указанными процессами, и, если какой-то отключается, он, мгновенно пытается его включить заново.

Для того, чтобы создать задачу в supervisor-е, нужно в его папке /etc/supervisor/conf.d/ создать новый файл laravel-echo.conf

Для того, чтобы выйти из процесса запущенного websocket-a, нажмите Ctrl + C

И выполните команду:
sudo nano /etc/supervisor/conf.d/laravel-echo.conf

Которая создаст новый файл, куда поместите такое содержимое:

[program:laravel-echo]
directory=/home/vagrant/code/
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=vagrant
numprocs=1
redirect_stderr=true
stdout_logfile=/home/vagrant/code/storage/logs/echo.log

После нажнимате Ctrl + X подтвердите выбор клавищей Y и enter.

Будьте внимательны, при создании supervisor-файла. Вам нужно указать свои данные:
directory - которая указывает на папку проекта (можно узнать, выполнив команду pwd внутри проекта),
stdout_logfile - который указывает на лог-файл вашего проекта,
user - логин текущего пользователя.

Если для созданий файла вы используете vim, то, для выхода из редактирования файла нажмите Ctrl + C и потом напишите :quit

Установка и настройка horizon

Для работы и удобной отладки очереди событий удобно использовать horizon.

Для его установки нужно выполнить:
composer require laravel/horizon
А, после:
php artisan vendor:publish --provider="Laravel\Horizon\HorizonServiceProvider"

И в итоге, из консоли мы сможем выполнить команду php artisan horizon, которая запустит процесс, и будет обрабатывать все наши события. Однако, чтобы постоянно не держать консоль открытой с запущенным процессом horizon, аналогично предыдущему пункту - настроим supervizor на этот процесс:

Создадим новый конфиг:
sudo nano /etc/supervisor/conf.d/horizon.conf

С таким содержимым:

[program:horizon]
process_name=%(program_name)s
command=php /home/vagrant/code/artisan horizon
autostart=true
autorestart=true
user=vagrant
redirect_stderr=true
stdout_logfile=/home/vagrant/code/storage/logs/horizon.log

И теперь, перейдя по адресу http://yourdomain/horizon, увидим удобную панельку, показывающую информацию о всех событиях:

Запуск команд supervizor-a

Сначала нужно остановить все задачи:
sudo supervisorctl stop all
Потом перечитать все команды (найти новые):
sudo supervisorctl reread

Если всё правильно - должны получить такое сообщение:

И, осталось запустить supervizor:
sudo supervisorctl reload

После чего, чтобы удостовериться, что наш процесс работает, выполним:
sudo supervisorctl status

И если вы получили что-то похоже на это, то вы всё сделали верно:

Установка Laravel Echo и Socket.io клиента

Для установки Laravel-echo библиотеки выполним:
npm install --save laravel-echo
И для socket.io:
npm install --save socket.io-client

И теперь, смело можно регистрировать socket.io библиотеку в нашем bootstrap.js (resorces/js/bootstrap.js)

import Echo from "laravel-echo"
window.io = require('socket.io-client');
// Have this in case you stop running your laravel echo server
if (typeof io !== 'undefined') {
  window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
  });
}

Клиентский код вещания

Ранее, нами уже было создано событие TranslationEvent, которое должно транслировать сообщения в наш публичный канал.

Теперь, для облегчения отладки и тестирования - создадим консольную команду, которая будет вызывать событие, транслирующее сообщения в наш чат.
Выполним команду
artisan make:comand TranslationMessage

Которую настроем под себя

class TranslationMessage extends Command
{
    protected $signature = 'translation:messages {id} {message}';
    protected $description = 'Fire event';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        event(new TranslationEvent(
            $this->argument('id'),
            $this->argument('message'))
        );
    }
}

И, исходя из задачи, мы имеем, что у нас может существовать несколько трансляций, куда могут зайти все посетители.

Потому, первое, что нам нужно сделать - это создать соответствующий контроллер, и маршрут для него.

Создадим контроллер:
artisan make:controller TranslationController

Внутри которого нужно добавить метод:

public function index($id)
{
    return view('translation.index', ['id' => $id]);
}

И, соответсвенно, создать вид index в папке translation с содержимым:

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Translation <span class="btn btn-primary">{{ $id }}</span></div>

                    <div class="card-body">
                        <translation-component
                                :translation_id="{{ $id }}"
                        ></translation-component>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

В папке resources/assets/js/components создадим компонент под названием TranslationComponent.vue

<template>
    <div class="alert alert-warning">
        <div v-if="messages.length < 1">
            Beginning translation...
        </div>
        <div v-else>
            <ul class="list-group" v-for="message in messages">
                <li class="list-group-item">
                    {{ message.message }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['translation_id'],
        data() {
            return {
                messages: []
            }
        },

        created() {
            Echo.channel(`translation.${this.translation_id}`)
                .listen('TranslationEvent', (e) => {
                    this.messages.push(e)
                });
        }
    }
</script>

<style scoped></style>

А resources/assets/js/app.js зарегистрируем этот компонент:

Vue.component('translation-component', require('./components/TranslationComponent.vue'));

И маршрут, по которому трансляции будут доступны:

Route::get('/translation/{id}', 'TranslationController@index');

Для того, чтобы js-файлы скомпилировались, и Vue-компонент стал доступен, нужно выполнить команду npm run dev, которая соберёт все клиентские скрипты.

Проверка результата

И теперь, если перейти по нужному маршруту, http://yourdomain.test/translation/1 (или любое другое число, вместо 1), то должны получить:

И, выполнив в консоли ранее созданную команду: artisan translation:messages 1 'Hello translation'

И, ожидаемо, получим:

Что подтверждает, что всё было настроено правильно:

Резюме

Статья получилась объёмной, но, надеюсь, что интересной и полезной. В этой статье было разобрано, как подключать и работать с socket.io, затронули тему добавления и управления процессами в supervizor, и вещание laravel в публичные каналы. Так же, здесь, неявно было показано использование redis, в нашем случае - для реализации "общения" с сокетами.