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
создадим новый ивент:
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 раскомментируем код импорта и инициализации laravel-echo и pusher-js и настраиваем их конфиг как в документации:
// вью с нашей формой и подключенным 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
