Как использовать Laravel из Socket.IO

1656648728 kak ispolzovat laravel iz socketio

Аднан Сабанович

7aJMZ4WrmXOVbNW82Og4w-SoKbHAlPK5TvCB
Изображение взято из Code Tutorials

Веб-сокеты крутые. Они очень полезны, если вы хотите показать действия своих пользователей в реальном времени (или возможно некоторые задачи в очереди).

Теперь, если вы боитесь слова «Веб-сокеты», не будь. Я дам инструкции по поводу того, как вы можете им пользоваться, и буду рядом, чтобы ответить на ваши вопросы, если вам понадобится.

У меня была эта задача, когда мне нужно было показать список людей, которые сейчас просматривают определенный URL-адрес Laravel. Так что я начал думать. Часть меня хотела сделать скорый хак (к счастью, это не самая сильная моя сторона). В то время как другой хотел создать что-то крутое, многократное и долговечное.

Почему бы вам просто не воспользоваться Pusher?

Вот в чем дело.

Laravel поставляется с включенным Pusher. Невзирая на Толкатель кажется быстрым «Подключи и играй” решение (каким оно есть), оно имеет ограничение. Смотрите https://pusher.com/pricing

И большинство учебных пособий обманывают вас своим названием о внедрении Websockets, тогда как они просто хотят дать вам Pusher. (И моя излюбленная часть, когда говорят, что вы можете легко перейти на socket.io)

«Мы хотим иметь неограниченное количество подключений»

Мы не хотим беспокоиться об ограничениях.

Давайте начнем.

Пользуюсь бродягой/усадьбой.

Для этого нам нужно будет прочесть о трансляции событий.

Здесь следует заметить (чтобы мне не пришлось повторять вещи):

1. Интерфейс ShouldBroadcast для событий

2. Включение широковещательных маршрутов и использование routes/channels.php для аутентификации пользователей

3. Общественный канал — слушать могут все

4. Частный канал — необходимо авторизовать пользователей, прежде чем они смогут присоединиться к каналу.

5. Канал присутствия — как приватный, но вы можете передать много дополнительных метаданных в этот канал и получить список присоединившихся к каналу.broadcastOn() Метод события

Создайте свое событие

php artisan make:event MessagePushed

Вы даже можете следовать конкретному примеру в документации Event Broadcasting. (Что мы действительно должны).

Установите Redis

До этого я фактически настроил очереди с помощью Supervisor/Redis/Horizon. Horizon отличный, и вы можете найти информацию об этом здесь https://laravel.com/docs/5.6/horizon

Как только ваши очереди заработают, это событие MessagePushed потребует использования очередей.

Примечание: Чтобы все это работало, обязательно отредактируйте свой файл .env:

BROADCAST_DRIVER=redis
QUEUE_DRIVER=redis
(this is from the horizon setup actually, but we will need that for later)
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

Установите Laravel Echo Server

Так что в этой части мы устанавливаем сервер socket.io, который входит в состав laravel-echo-server. Вы можете узнать об этом здесь: https://github.com/tlaverdure/laravel-echo-server

Примечание: проверьте требования наверху!

Выполните следующее (как указано в документе)

npm install -g laravel-echo-server

Затем запустите инициализацию, чтобы получить файл laravel-echo-server.json, сгенерированный в корне программы (который нам нужно будет настроить).

laravel-echo-server init

После создания файла laravel-echo-server.json он должен выглядеть следующим образом.

{
"authHost": "http://local-website.app",
"authEndpoint": "/broadcasting/auth",
"клиенты": [
{
"appId": "my-app-id",
"key": "my-key-generated-with-init-command"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
},
"port": "6379",
"host": "127.0.0.1"
},
"devMode": false,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": ""
}

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

Запустите сервер Laravel Echo

Вы должны запустить его, чтобы запустить websockets.

laravel-echo-server start 

(в вашем корне – где размещен ваш laravel-echo-server.json)

Он должен начаться удачно. (Теперь мы захотим добавить это к супервизору на вашем сервере, чтобы он запускался автоматически и перезапускался в случае сбоя)

Внутри вашего /etc/supervisor/conf.d/laravel-echo.conf (просто создайте этот файл в своем конф.д папку) разместите следующее:

[program:laravel-echo]
directory=/var/www/my-website-folder
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=your-linux-user
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/my-website-folder/storage/logs/echo.log

После того, как вы позиционируетесь в своем корне Laravel, вы можете запускать

pwd

чтобы получить путь к вашему «каталогу» выше и префикс «stdout_logfile».

Ваш пользователь будет вашим пользователем Linux (бродяга, Ubuntu или другой)

Сохраните файл и выходите.

Если вы использовали vim laravel-echo.conf, внутри нажмите I (как Istanbul) на клавиатуре, чтобы редактировать файл с помощью VIM, а затем введите ESC после :wq! Чтобы закрыть файл и сохранить его.

Далее нам нужно выполнить следующие команды:

sudo supervisorctl stop all sudo supervisorctl reread
sudo supervisorctl reload

После этого проверьте, работает ли laravel echo

sudo supervisorctl status

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

npm install --save laravel-echo
npm install --save socket.io-client

А затем в вашем bootstrap.js (я использую Vue js) зарегистрируйте свой Echo

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',  });}

Теперь еще раз проверьте, как слушать ваши события на некоторых каналах.

Следуя документации о Laravel Broadcasting, которую мы предоставили выше, если вы установите свой broadcastOn() метод возврата a новый PresenceChannel (Я объясню конкретный случай, который я делал, но не стесняйтесь задавать вопросы, если вам понадобится реализовать что-то другое. Я считаю, что это сложнее, чем просто использование общедоступного канала, поэтому мы можем уменьшить масштаб без проблем) тогда мы хотите прослушать этот канал на стороне Javascript (интерфейс).

Вот конкретный пример:

  1. Я отправил событие на канал присутствия (я имел дело с опросами)
public function broadcastOn()
{
return new PresenceChannel('survey.' . $this->survey->id);
}

2. После того, как вы нажмете событие, оно пройдет через каналы каналов.php. Там мы хотим создать авторизацию для этого пользователя. (Не забудьте вернуть массив для авторизации канала присутствия, а не логическое значение.)

Broadcast::channel('survey.{survey_id}', function ($user, $survey_id) {
возвращение [
'id' => $user->id,
'image' => $user->image(),
'full_name' => $user->full_name
];
});

3. Затем в своем компоненте VueJs, который загружается на странице, которую я хочу отслеживать, я определяю метод, который будет инициирован методом created() при загрузке:

listenForBroadcast(survey_id) {
Echo.join('survey.' + survey_id)
.here((users) => {
this.users_viewing = users;
this.$forceUpdate();
})
.joining((user) => {
if (this.checkIfUserAlreadyViewingSurvey(user)) {
this.users_viewing.push(user);
this.$forceUpdate();
}
})
.leaving((user) => {
this.removeViewingUser(user);
this.$forceUpdate();
});
},

Очевидно, я вытащил какой-то код из контекста, но у меня есть этот массив users_viewing, чтобы сохранить моих текущих пользователей, которые присоединились к каналу.

И это было бы действительно так.

Надеюсь, вы смогли следить, поскольку я пытался быть подробным, насколько мог.

Счастливого кодирования!

Следите за мной в Twitter
Разместите меня в LinkedIn

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *