Laravel websockets типа подменяет собой сервер pusher`а
Сначала убедимся что в настройках docker-compose.yml открыт порт 6001 для нашего laravel-websockets
ports: - "9000:9000" - "3000:3000"# дополнительный порт для websocket на котором будут крутиться (webpack,Vite) - "6001:6001"# дополнительный порт для laravel-websockets
установим пакет beyondcode/laravel-websockets и запустим публикацию конфига и миграций и саму миграцию:
и перейдём по адрессу http://localhost:8098/laravel-websockets при нажатии Connect мы должны увидить информацию про подключение:
завершаем процесс нажатием ^+c
расскоментируем App\Providers\BroadcastServiceProvider::class в нижней части app.php
создадим новый ивент:
phpartisanmake:eventChatMessageEvent
добавляем нашему ивенту интерфейс ShouldBroadcast
app/Events/ChatMessageEvent.php
classChatMessageEventimplementsShouldBroadcast
и настраиваем ивент:
app/Events/ChatMessageEvent.php
private $message =null;publicfunction__construct(string $message){$this->message = $message;}// в какие каналы транслироватьpublicfunctionbroadcastOn():array {return [newChannel('public.chat.1'), ];}// какое имя будет у ивентаpublicfunctionbroadcastAs(){return'chat-message';}// какие данные передаст ивентpublicfunctionbroadcastWith(){return ['message'=>$this->message];}
устанавливаем laravel-echo и pusher-js@7.6.0 (надо устанавливать именно 7.6.0 так как в версиях выше уже не получится закомментировать cluster)
npminstalllaravel-echonpmipusher-js@7.6.0
в resources/js/bootstrap.js раскомментируем код импорта и инициализации laravel-echo и pusher-js и настраиваем их конфиг как в документации:
// вью с нашей формой и подключенным app.jsRoute::get('/ws',function (){returnview('websocket');});// роут который принимает post запрос который мы будем слать через axiosRoute::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-messageconstform=document.getElementById('form');constinputMessage=document.getElementById('input-message');form.addEventListener('submit',function(event){event.preventDefault();constuserInput=inputMessage.value;axios.post('/chat-message',{ message: userInput, });});constchannel=Echo.channel('public.chat.1');channel.subscribed(() => {// функиця вызовется когда мы подключемся к каналуconsole.log('subscribed!');}).listen('.chat-message', (event) => {// функиця вызовется когда будет запущен ивент в канале на который мы подписаныconsole.log(event);constli=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