API обновления Livewire вызывает по истечении секунд песни ⇐ Php

[Anonymous]

Привет всем!
Я создал с помощью компонентов Livewire (PHP LARAVEL) API-вызов, который возвращает мне конкретную песню. Возврат точен:

Код: Выделить всё

['song' =>[
'title'=>'....',
'artist'=>'....'.
'art'=>'....',
'seconds_elapsed'=> '....',
'seconds_total'=>'....',
]]

Все работает, я реализовал логику, в которой родительский div выполняет "

Код: Выделить всё

wire:poll.{{$remainingTime}}s="fetchSongData"

" (remainingTime — это разница между секундами_total и секундами_elapsed, чтобы получить оставшееся время песни)
Поэтому каждый раз, когда песня заканчивается, он «обновляет» компонент и меняет все фактические свойства.
Дело в том... Я хочу видеть в LIVE изменение секунд_elapsed, потому что в API они меняются каждую секунду, но поскольку я вызываю API один раз в среднем "remainingTime" в 3 минуты, секунды будут обновляться только когда я обновляю страницу.
Я пытался использовать Wire:poll.750ms и вижу на своем терминале, что он отображает новые строки:

Код: Выделить всё

"2024-04-12 16:27:10 ..................................................................... ~ -4s"

Каждые секунды, но затраченные секунды остаются статичными.
Я написал javascript, чтобы получить число секунд_elapsed один раз, и начал считать по этим секундам, которые он получит . Когда я обновляю значение, оно сохраняется, поэтому оно будет отсчитываться от того значения, которое у меня было до обновления.
Хотя это «решение», кажется, работает, подсчет не совсем соответствует времени секунд_истеканий, которое поставляется с API. . Поэтому каждый раз, когда я обновляю страницу, секунды идут немного назад или даже вперед.
Есть способ увидеть секунды в режиме LIVE с помощью некоторых свойств Livewire, метода или я не знаю? Или мне нужно использовать Javascript? Тем не менее, с Javascript он не работает должным образом и повреждает сценарий "wire:navigate" Livewire моих элементов навигации.
Это фактический код:

Код: Выделить всё

class TitleSong extends Component
{

public $songTitle;
public $songArtist;
public $songImage;
public $secondsTotal;
public $secondsElapsed;
public $elementToShow;
public $remainingTime;

public function render()
{
return view('livewire.title-song');
}

public function mount()
{
$this->fetchSongData();
}

public function fetchSongData()
{
try{
$response = Http::get('myAPI');
$data = $response->json();

$this->songArtist = $data['song']['artist'];
$this->secondsElapsed = $data['song']['seconds_elapsed'];
$this->secondsTotal = $data['song']['seconds_total'];
$this->songImage = $data['song']['art'];
$this->songTitle = $data['song']['title'];

$remainingTime = $this->secondsTotal - $this->secondsElapsed;
$this->remainingTime = $remainingTime;
} catch (\Throwable $th) {
dd($th->getMessage());
}
}

}

Мой компонент Blade.php:

Код: Выделить всё

@if ($elementToShow === 'songTitle')
{{$songTitle}}
@elseif ($elementToShow === 'songArtist')
{{$songArtist}}
@elseif ($elementToShow === 'secondsElapsed')
{{$secondsElapsed}}
@elseif ($elementToShow === 'secondsTotal')
 {{substr($secondsTotal, 0, 1) . ':' .  substr($secondsTotal, 1, 2)}}
@elseif($elementToShow === 'songImage')
[img]{{$songImage}}[/img]
 alt="">
@endif

Я удалил JS, так как он был не идеален и нуждался в некоторой доработке.
Спасибо, если вы прочитали все и смогли помочь, я был бы признателен!
Я пытался использовать Wire:poll.750ms для HTML-элемента " SecondsElapsed", я пытался использовать Javascript Vanilla для подсчета ++ значения SecondsElapsed (но, похоже, возникла ошибка при добавлении провода: перейти к навигации -link, даже между этим тегом и навигационной ссылкой нет никакой связи. Я пытался спросить даже у разработчиков Livewire, но они продолжают давать мне короткие ответы о том, как мне сделать свой код более «эффективным» или использовать Alpine, хотя я этого и не делаю. не знаю alpine.
Все еще использую Wire:poll.750ms. Я ожидал, что выходные данные будут обновляться каждую мс, но он не работает как:

Код: Выделить всё

это действительно работает. Я даже пытался запросить в другой раз тот же API, но получил только количество прошедших секунд, а затем сделал

Код: Выделить всё

но безуспешно...

Подробнее здесь: https://stackoverflow.com/questions/783 ... -of-a-song