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
'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
class ChatMessageEvent implements ShouldBroadcast
и настраиваем ивент:
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 раскомментируем код импорта и инициализации laravel-echo и pusher-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
и прописываем для него роут:
<!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));
});
Объявляем наши каналы и дописываем отправку post запроса через axios в 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