Het is tijd voor live tijd.

Een live wereldklok in een webpagina laten zien.

Verre vakanties, vele verhalen, soms vreemde vogels, en vaak verzetten. Bij het verzetten, gaat het dan over de klok. Ik eens gekeken hoe we het verschil in tijdzone het beste kunnen uitleggen op een webpagina. Ik kwam op het idee een live wereldklok te maken die ook verschillen in de zomer & wintertijd bijhoudt.

Webpagina's zijn statisch en we zullen de huidige tijd aan de server moeten vragen. Gelukkig is hier een regel voor hoe dit op te vragen aan de PHP-server. In ons geval gebruiken we de Laravel variant: Date::now()->format('H:i:s'); en TADA, we krijgen de huidige tijd.

Kei bedankt en tot ziens! ...Of toch niet? Helaas is het zo dat dit de tijd was, toen de pagina geladen werd. Dus zelfs bij snelle lezers staat ie inmiddels al een aantal seconden achter. Verder is het gebonden aan de landcode server setting (Nederlands) voor de weergave.

live updaten van gegevens in een pagina.

Eerst gaan we kijken of we een manier hedden dit live bij te werken naar de huidige tijd, zonder dat de volledige pagina opnieuw ingeladen moet worden. We gaan dit doen met een Livewire component. Dit is een van de TALL-stack onderdelen die ik meer en meer toevoeg op mijn websites.

We creëren een Livewire component door in ons console het commando "php artisan make:livewire clockNow". De 2 bestanden die Livewire hiermee aanmaakt roepen we aan vanuit deze pagina.

• In het app/Livewire/ClockNow.php bestand laden we het Livewire component, eventuele funties en vinden we de verwijzing naar de view:
  • return view('livewire.clock-now');
• In het resources/views/livewire/clock-now.blade.php bestand zetten we de wire:poll.5s.visible> Date::now()->format('H:i:s');

We laden het component met wire:. Dan zorgt de poll.5s voor de automatische update elke 5 seconden. .visible zorgt er vervolgens voor dat updates alleen plaatsvinden als het component in beeld is.

Een wereldklok met verschillend live tijdzones.

Met behulp van tijdzone notatie binnen php krijgen we ook de Gambiaanse klok te zien: Date::now('Africa/Banjul')

Tijdens onze zomertijd is het in Gambia 2 uur vroeger en in onze wintertijd 1 uur. Toevoeging van de tijdzone zorgt ervoor dat de klok de daar geldende datum en tijd weergeeft. Dus niks meer aan doen! We hebben nu een live wereldklok die elke 5 seconden update: