Skip to content

A Laravel app that demonstrates realtime dashboards and async programming using a React PHP WebSocket server.

Notifications You must be signed in to change notification settings

dalabarge/realtime-dashboard

Repository files navigation

Real-Time Dashboard

by Daniel LaBarge

When having the critical information available in an instant, businesses look to develop real-time dashboards. In the workshop Real-Time Dashboards With Async PHP, I will demonstrate how to:

  • create an event loop
  • write some non-blocking code
  • configure a websocket server
  • communicate bi-directionally with multiple connection
  • build a reactive web application
  • bridge "offline" and realtime communications using queues
  • expand async applications with common async patterns

While an advanced topic, I will build up from the entry-level sparing no details or introducing any magic along the way (ok maybe a little abstraction of the low level stuff). At the end we will refactor to make our maintained codebase smaller and finally replace the plain-vanilla JS dashboard with Vue.js to help with the client-side heavy-lifting. The result is a synchronous and asynchronous bridge that makes frontends and backends communicate as a seamless, evented app.

Table of Contents

Need Help? If you find any issues with these instructions or need help with the workshop please submit an issue on Gitub to the main repository.

  1. Install Dependencies

1. Installing Dependencies

It is not critical that you understand how any of these dependencies work (though you are a dev and that's like your one main job), however it is important that you download all of these BEFORE the workshop day as Internet will be limited and may impact your ability to follow along. Again, please just read the docs for each.

Install Homestead

Homestead is a Vagrant-based development machine with a full stack of devops tools available. It does NOT really represent a hardened production environment nor a practical one as you rarely need all the included services. It does however provide a great standard basis for our workshop with multi-platform support. Therefore it is a pre-requisite to our training day. If you are unfamiliar with Laravel or Homestead, please read the full documentation. It might not be a bad idea to just read it again even if you are.

Pro Tip: A Ubuntu 16.04 dev box provisioned with Nginx, PHP 7+, MySQL, Beanstalkd, and Supervisord works. If you have your own kick-awesome setup then you are pro enough to debug it yourself. Or maybe just humor me and follow along...

Install Node.js

Node.js is the Javascript runtime that we will be using for some frontend development build tools. This should be installed on your host machine (your Mac), NOT in your virtual machine (Homestead) to provide optimal performance. We will be using Larvel Mix as our build tools and while it requires NPM (installed with Node.js) we will also be installing and using the more performant Yarn dependency manager. Be sure to read the Laravel Mix docs for specific installation instructions.

Install Application

The demo that will be built is built using Laravel and while you could just as easily download and install Laravel and then begin from there, I've done some of that work already and have a more plain vanilla Laravel app checked-in at github.com/dalabarge/realtime-dashboard.

Each branch of this repository will be a checkpoint for the application development and you should begin with step-1. The following commands do just that and put the code in your ~/Code/realtime-dashboard folder (a Homestead convention).

mkdir ~/Code/realtime-dashboard
cd ~/Code/realtime-dashboard
git clone https://github.com/dalabarge/realtime-dashboard.git ./
git checkout step-1
yarn install
npm run dev

DevOps Tip: Yes, I will be using basic Git the entire time because it's not actually that hard. You too should try it now and again.

The application ships with a Homestead configuration file which you can use to bring up your Homestead Vagrant box ready to build with. From the application directory simply run:

vagrant up

Need Help? You may need to manually checkout laravel/homestead into vendor/laravel/homestead to properly bring up Homestead seeing as it's a Composer dependency. I had to update Virtualbox to the latest version and had to use 2048MB of RAM though honestly only 512MB should be needed. I also had to add my /etc/hosts file entry manually. So try some of these things if it just won't come up.

Next, you'll need to SSH into the Homestead Vagrant box and run the final Composer commands and remaining configuration:

vagrant ssh
cd /vagrant
composer install
cp .env.example .env
php artisan key:generate

Now go to http://dashboard.test in your browser and if all works well then you should see "Real-time Dashboards" title card showing. Furthermore if you run npm run watch it should open localhost:3000 in your browser and any changes to JS or SASS will reload the app. If you manage to get this far then you're in good shape and we can cover the rest in the workshop.

Recommended Reading

Ok, so maybe it should be required reading but I won't make you. I could have added more but I chose just the best so please take the time to read and listen and we can cover even more ground in the actual workshop.


© 2017 Artisans Collaborative. All rights reserved.

About

A Laravel app that demonstrates realtime dashboards and async programming using a React PHP WebSocket server.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published