Оригинал статьи https://devdojo.com/tnylea/livewire-events
Laravel Livewire сильно упрощает разработку вашего приложения Laravel. Livewire позволяет легко отправлять данные с клиента на сервер и с сервера обратно на клиент.
Это похоже на то, как Ajax и Laravel подключились к созданию Livewire. Это как если бы фронтэнд и бэкэнд создали ребенка с суперспособностями XHR.
В этом кратком руководстве я покажу вам, как легко отправлять данные между клиентом и сервером.
Клиент сервер
Отправка событий от клиента к серверу может быть легко выполнена с помощью события wire:click:
<button wire:click="functionName">Click Me</button>Это описано в документации Livewire Actions, но что делать, если мы хотим вызвать функцию PHP из vanilla javascript?
Достаточно просто, мы можем использовать события Livewire, например:
<script>
window.livewire.emit('say-hello');
</script>Затем, внутри нашего PHP-кода, вам нужно будет зарегистрировать слушатель событий, который сопоставляется с функцией:
protected $listeners = ['say-hello' => 'sayHello'];
public function sayHello()
{
// your code here
}
Это самый простой способ для вашего фронтенда поговорить с вашим бекендом. Далее мы посмотрим, как можно отправить событие из бэкэнда во фронтэнд.
Сервер клиент
Отправка событий с сервера на клиент может быть выполнена с помощью функции dispatchBrowserEvent, например:
public function sayGoodbye()
{
$this->dispatchBrowserEvent('say-goodbye', []);
}Затем мы можем зарегистрировать слушатель в javascript, чтобы поймать это событие:
<script>
window.addEventListener('say-goodbye', event => {
alert('Radical!');
});
</script>И это все 🙌
Ваш фронтэнд и ваш бэкэнд разговаривают друг с другом, как лучшие друзья средней школы!
Наконец, вы можете захотеть узнать, как отправлять данные между ними. Давайте рассмотрим это.
Отправка данных на сервер
Используя наш предыдущий пример кода, мы можем легко передавать данные на сервер с помощью следующего кода javascript:
<script>
window.livewire.emit('say-hello', { name : 'John' );
</script>И мы можем получить доступ к этим данным из первого аргумента нашей функции:
protected $listeners = ['say-hello' => 'sayHello'];
public function sayHello($payload)
{
$name = $payload['name'];
// your code here
}
Довольно круто, правда? Далее, нам также понадобится способ передачи данных с нашего сервера на наш клиент.
Отправка данных клиенту
Мы можем легко отправлять данные из нашего PHP-кода на наш фронтенд, отправляя их в массиве функции dispatchBrowserEvent:
public function sayGoodbye()
{
$this->dispatchBrowserEvent('say-goodbye', ['name' => 'John']);
}
И мы можем захватить эти данные в javascript, выбрав переменную event.detail.
<script>
window.addEventListener('say-goodbye', event => {
alert( event.detail.name );
});
</script>Не может быть проще 👌
Простая Отладка
Помните, что если вам когда-нибудь понадобится отладить свой код, вы всегда можете вызвать функцию dd из своего PHP-кода:
public function sayHello($payload)
{
dd($payload);
// your code here
}Это отобразит приятное всплывающее окно на стороне клиента, которое выводит ваши данные.
Вывод
Livewire может сделать создание приложений в реальном времени проще, чем когда-либо прежде. Используя события, мы можем легко передавать данные между нашим клиентом и нашим сервером.
Обязательно ознакомьтесь с документацией Livewire, чтобы узнать больше о Livewire.
