Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Realtime dashboard (phpbenelux)
Search
Freek Van der Herten
January 27, 2017
Programming
0
92
Realtime dashboard (phpbenelux)
Freek Van der Herten
January 27, 2017
Tweet
Share
More Decks by Freek Van der Herten
See All by Freek Van der Herten
Uncharted packages (ode aan de code)
freekmurze
0
26
Uncharted packages (Laravel Live Denmark)
freekmurze
0
220
I shall define this only once
freekmurze
0
420
An Introduction to Snapshot testing
freekmurze
0
510
Event Sourcing In Laravel
freekmurze
0
260
Building a realtime dashboard with Laravel Livewire (PHPKonf)
freekmurze
0
830
A tour behind the scenes of Oh Dear (PHP Benelux)
freekmurze
2
860
A practical look at multitenancy in Laravel
freekmurze
1
360
A practical look at multitenancy in Laravel (Laracon US)
freekmurze
0
740
Other Decks in Programming
See All in Programming
理論と実務のギャップを超える
eycjur
0
180
Ktorで簡単AIアプリケーション
tsukakei
0
100
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
4.6k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
640
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.1k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
Catch Up: Go Style Guide Update
andpad
0
250
AI Agent 時代的開發者生存指南
eddie
4
2.1k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Done Done
chrislema
185
16k
Writing Fast Ruby
sferik
629
62k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Visualization
eitanlees
149
16k
Music & Morning Musume
bryan
46
6.9k
Rails Girls Zürich Keynote
gr2m
95
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Transcript
Creating a realtime dashboard using PHP and websockets
About me Freek Van der Herten Partner & developer at
SPATIE @freekmurze https://murze.be
About me phpantwerp.be Dries Vints @driesvints Frederick Vanbrabant @TheEdonian
Since 2003 Websites, applications and webshops Team 4 developers, 1
manager Specialization Laravel development
VACATURE FRONT-END DEVELOPER
OPEN SOURCE SOFTWARE
Open source software ± 90 packages on Packagist ± 1
800 000 downloads total, ±240 000 downloads a month A lot of benefits: learning, forced to write documentation and tests, showing the quality of our work, eating our own dogfood
https://spatie.be/opensource
http://github-awards.com/users?type=world&language=php Open source software
OUR OFFICE
None
None
None
None
None
https://github.com/spatie/dashboard.spatie.be
None
None
None
None
None
None
None
None
None
None
HIGH LEVEL OVERVIEW
The dashboard is a single HTML page Displayed by a
full screen browser Without full page reload Each tile wil be updated by JavaScript Each tile has it’s own update frequency In short
Technology stack Laravel Pusher Vue.js
Laravel 5.4 Render the initial page Fetch data from external
API’s (scheduled) Broadcast events when new data has arrived Laravel
spatie/laravel-twitter-streaming-api spatie/laravel-google-calendar spatie/last-fm-now-playing spatie/packagist-api graham-campbell/github Laravel
Provides full-duplex communication channels over a single TCP connection Transporting
events from server to the browser In realtime Secure Paid service Pusher
WebSockets Transporting events from server to the browser In realtime
Secure Paid service Pusher
Transporting events from server to the browser In realtime Secure
Paid service Pusher Magic
Lot of ♥ from the Laravel community Easy to learn
Each tile is a component Listen for incoming events Update the tile Vue 2 Vue.js
None
DEMO
Grid system The clock tile The Packagist tile The Twitter
tile Topics
There will be some live coding We’ll use
an internet connection
DISPLAYING ON A TV
Raspberry Pi 2
Raspberry Pi 2 Powered by the USB port from the
TV Uses Raspbian Jessie Boots into Chromium 51 in fullscreen mode Setup
TRY IT OUT YOURSELF
Source code https://github.com/spatie/dashboard.spatie.be Blog posts https://murze.be/2016/06/building-dashboard-using-laravel-vue https://murze.be/2016/06/grid-layout-dashboard/ Documentation
ROUND UP
Credits Willem Van Bockstal @willemvbockstal Looks + grid system Sebastian
De Deyne @sebdedeyne Scrutinising + JS wizardry
https://laravel.com https://pusher.com https://vuejs.com https://vuecasts.com Interesting links
https://www.geckoboard.com/ http://www.cyfe.com/ https://razorflow.com/ http://dashing.io/ Built by Shopify, Ruby. No
longer maintained, but works great Alternatives
QUESTIONS?
Thank you! https://speakerdeck.com/freekmurze/creating-a-dashboard-phpbenelux https://spatie.be/opensource https://murze.be https://murze.be/newsletter