Laravel websockets

Laravel websockets типа подменяет собой сервер pusher`а

Сначала убедимся что в настройках docker-compose.yml открыт порт 6001 для нашего laravel-websockets

ports:
    - "9000:9000"
    - "3000:3000" # дополнительный порт для websocket на котором будут крутиться (webpack,Vite)
    - "6001:6001" # дополнительный порт для laravel-websockets

установим пакет beyondcode/laravel-websockets и запустим публикацию конфига и миграций и саму миграцию:

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

установим пакет pusher/pusher-php-server

composer require pusher/pusher-php-server

настроим .env

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=livepost
PUSHER_APP_KEY=livepost_key
PUSHER_APP_SECRET=livepost_secret

QUEUE_CONNECTION=sync

устанавливаем настройки в options в драйвере pusher в файле broadcasting.php

config/broadcasting.php

'options' => [
    'host' => 'localhost',
    'port' => 6001,
    'scheme' => 'http',
    'encrypted' => false,
    'useTLS' => false,
],

запустим websockets и проверим подключение:

php artisan websockets:serve

и перейдём по адрессу http://localhost:8098/laravel-websockets при нажатии Connect мы должны увидить информацию про подключение:

завершаем процесс нажатием ^+c

расскоментируем App\Providers\BroadcastServiceProvider::class в нижней части app.php

создадим новый ивент:

php artisan make:event ChatMessageEvent

добавляем нашему ивенту интерфейс ShouldBroadcast

app/Events/ChatMessageEvent.php

class ChatMessageEvent implements ShouldBroadcast

и настраиваем ивент:

app/Events/ChatMessageEvent.php

private $message = null;

public function __construct(string $message){
    $this->message = $message;
}
// в какие каналы транслировать
public function broadcastOn(): array {
    return [
        new Channel('public.chat.1'),
    ];
}
// какое имя будет у ивента
public function broadcastAs(){
    return 'chat-message';
}
// какие данные передаст ивент
public function broadcastWith(){
    return ['message' => $this->message];
}

устанавливаем laravel-echo и pusher-js@7.6.0 (надо устанавливать именно 7.6.0 так как в версиях выше уже не получится закомментировать cluster)

npm install laravel-echo 
npm i pusher-js@7.6.0

resources/js/bootstrap.js

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    // cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: false,
    enabledTransports: ['ws', 'wss'],
    disableStats: true,
});

создаём представление websocket.blade.php подключаем в нём app.js и прописываем для него роут:

resources/views/websocket.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" id="form">
        <label for="input-message">Message:</label>
        <input type="text" id="input-message">
    </form>
    <ul id="list-messages"></ul>
    @vite(['resources/js/app.js'])
</body>
</html>

routes/web.php

// вью с нашей формой и подключенным app.js
Route::get('/ws', function (){
    return view('websocket');
});

// роут который принимает post запрос который мы будем слать через axios
Route::post('/chat-message', function (\Illuminate\Http\Request $request){
    event(new \App\Events\ChatMessageEvent($request->message));
});

Объявляем наши каналы и дописываем отправку post запроса через axios в resources/js/app.js

resources/js/app.js

import axios from "axios";

// отправляем содержимое формы через axios на роут /chat-message
const form = document.getElementById('form');
const inputMessage = document.getElementById('input-message');
form.addEventListener('submit', function(event){
    event.preventDefault();
    const userInput = inputMessage.value;
    axios.post('/chat-message',{
        message: userInput,
    });
});

const channel = Echo.channel('public.chat.1');
channel.subscribed(() => {
    // функиця вызовется когда мы подключемся к каналу
    console.log('subscribed!');
}).listen('.chat-message', (event) => {
    // функиця вызовется когда будет запущен ивент в канале на который мы подписаны
    console.log(event);
    const li = document.createElement('li');
    li.textContent = event.message;
    listMessages.append(li);
});

собираем все эти файлы через npm и опять запускаем websockets сервер:

npm run build
php artisan websockets:serve

переходим на http://localhost:8098/ws и видим в консоли subscribed! А при отправке формы, видим в консоли данные которые он отправил и сообщения из них добавляются в ul list-message. Оно будет доступно во всех вкладках которые подписаны на канал public.chat.1

Last updated 2 years ago

ports: - "9000:9000" - "3000:3000" # дополнительный порт для websocket на котором будут крутиться (webpack,Vite) - "6001:6001" # дополнительный порт для laravel-websockets

composer require beyondcode/laravel-websockets php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations" php artisan migrate php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

private $message = null; public function __construct(string $message){ $this->message = $message; } // в какие каналы транслировать public function broadcastOn(): array { return [ new Channel('public.chat.1'), ]; } // какое имя будет у ивента public function broadcastAs(){ return 'chat-message'; } // какие данные передаст ивент public function broadcastWith(){ return ['message' => $this->message]; }

import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; window.Pusher = Pusher; window.Echo = new Echo({ broadcaster: 'pusher', key: import.meta.env.VITE_PUSHER_APP_KEY, // cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1', wsHost: window.location.hostname, wsPort: 6001, wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443, forceTLS: false, enabledTransports: ['ws', 'wss'], disableStats: true, });

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="form"> <label for="input-message">Message:</label> <input type="text" id="input-message"> </form> <ul id="list-messages"></ul> @vite(['resources/js/app.js']) </body> </html>

// вью с нашей формой и подключенным app.js Route::get('/ws', function (){ return view('websocket'); }); // роут который принимает post запрос который мы будем слать через axios Route::post('/chat-message', function (\Illuminate\Http\Request $request){ event(new \App\Events\ChatMessageEvent($request->message)); });

import axios from "axios"; // отправляем содержимое формы через axios на роут /chat-message const form = document.getElementById('form'); const inputMessage = document.getElementById('input-message'); form.addEventListener('submit', function(event){ event.preventDefault(); const userInput = inputMessage.value; axios.post('/chat-message',{ message: userInput, }); }); const channel = Echo.channel('public.chat.1'); channel.subscribed(() => { // функиця вызовется когда мы подключемся к каналу console.log('subscribed!'); }).listen('.chat-message', (event) => { // функиця вызовется когда будет запущен ивент в канале на который мы подписаны console.log(event); const li = document.createElement('li'); li.textContent = event.message; listMessages.append(li); });