Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Freek Van der Herten:
Building a realtime dashboard powered by Laravel, Vue, Pusher and Tailwind (20
Nov 21, 2018 @ 09:27:21

Freek Van der Herten has a tutorial posted on his site sharing the 2018 edition of how to build a dashboard powered by Laravel, Vue, Pusher and Tailwind CSS. It's based on a project they use internally to keep up to date on current work, events and even music people are listening to.

At Spatie we have a tv screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, important events in the near future, which tasks each of our team members should be working on, what music they are listening to, and so on.

[...] This dashboard is not entirely new. The initial version was published a couple of years ago. At our company, we like to tinker with new stuff. That's why we perform a big cleanup of the source code every year. We also update all the dependencies and technologies used. This year we focused on updating the design. The dashboard now uses Tailwind CSS. In this blog post, which is an update to the previous one, I like to explain how this dashboard is built.

He starts with a bit of history of the project and a look at the UI before diving into the code. The remainder of the (lengthy) tutorial is then broken down into functional pieces, each with code and explanation:

  • the creation of the markup for the grid
  • a closer look at the "internet connection" component
  • a closer look at the "statistics" component
  • the use of "dark mode" depending on the sun being up
  • displaying sites that are down

There's also a mention of the security requirements involved in the creation and use of the dashboard, the hardware used to show it on the TV and how data is saved to prevent the need for the initial "reboot" of the data.

tagged: realtime dashboard tutorial laravel vuejs pusher tailwindcss

Link: https://murze.be/building-a-realtime-dashboard-powered-by-laravel-vue-pusher-and-tailwind-2018-edition

Get Started With Pusher: Using Presence Channels
Aug 23, 2018 @ 10:53:56

The TutsPlus.com site has continued their series looking at using the Pusher real-time communication service in your PHP application with a new tutorial. In this latest article, they show the use of presence channels, a feature that makes it simpler to know which users are connected to which channels.

In this series, we've been learning about Channels from Pusher, a platform that allows you to give your users the seamless real-time experience they want.

Presence channels build on the security provided by private channels, but they add the benefit of knowing which users are subscribed and connected to that channel. The best part is how easy it is to implement and use presence channels, and it's even easier if you've already configured your app to use private channels.

As in the previous articles in the series, they've provided both a screencast of the tutorial and the text-based version. They show how to modify the server you've already created to authorize a user and send that information along with the messages back to the Pusher service. They also include the changes to the frontend client to gather and send user information.

tagged: pusher service tutorial channel presence user information realtime

Link: https://code.tutsplus.com/tutorials/get-started-with-pusher-using-presence-channels--cms-31448

Get Started With Pusher - Using Private Channels
Aug 09, 2018 @ 11:56:46

TutsPlus.com has posted the next part of their series covering the use of "channels" with Pusher, the real-time messaging service. In the previous article they introduced Pusher and its "channels" functionality to build a simple real-time chat. In this new tutorial they show how to modify this application to use private channels.

n this series, we've been learning about Channels from Pusher, a platform that allows you to give your users the seamless real-time experience they want.

Private channels provide your applications with a secure, private medium for publishing messages. The best part is how easy it is to implement and use private channels for your apps.

Much like the previous article, they've included a screencast of the entire process right along side the text version. The tutorial walks you through setting up the server (the ChannelsController), the endpoint for client authorization and the changes to make to the client itself.

tagged: pusher private channel private tutorial series part2

Link: https://code.tutsplus.com/tutorials/get-started-with-pusher-using-private-channels--cms-31253

Get Started With Pusher: Build a Chat App With Channels, PHP, and Vue.js
Aug 02, 2018 @ 14:19:09

On the TutsPlus.com site they've posted a tutorial that, making use of the Pusher service, walks you through the process of creating a multi-channel chat application using it, PHP and Vue.js.

In this post, I'll show you how to write the functional components of a very simple chat app. It's a stripped-down example, but you'll see how Channels can simplify the implementation of real-time communication in a web app.

While the post does include a screencast of the process, it also walks through it in a text format, helping you:

  • set up the server with the Pusher PHP package
  • create the client code on the backend and frontend
  • send messages between the chat windows

The Channels functionality makes it simple to subscribe and see only the messages you want (and not everything that comes down the line). The Pusher PHP library makes the integration simple too.

tagged: tutorial pusher chat application channels vuejs

Link: https://code.tutsplus.com/tutorials/get-started-with-pusher-build-a-chat-app-with-channels-php-and-vuejs--cms-31252

How Laravel Broadcasting Works
May 07, 2018 @ 11:41:41

The TutsPlus.com site has a new tutorial posted for the Laravel users out there ]introducing you to the framework's broadcast functionality](https://code.tutsplus.com/tutorials/how-laravel-broadcasting-works--cms-30500). Broadcasting in Laravel provides a simple interface to sending notification (such as emails or even real-time push messages) via a standardized interface.

Today, we are going to explore the concept of broadcasting in the Laravel web framework. It allows you to send notifications to the client side when something happens on the server side. In this article, we are going to use the third-party Pusher library to send notifications to the client side.

If you have ever wanted to send notifications from the server to the client when something happens on a server in Laravel, you're looking for the broadcasting feature.

The article walks through the scenario first and covers the basic flow of websockets and how they'd be used for messaging. From there they start in on the code, looking at the broadcast configuration and walking you through the setup of a Pusher account and the installation of the SDK. They help you configure the Laravel application for Pusher and install the Laravel Echo library for handling the messaging on the frontend. The tutorial goes through the code to create a "messages" table and hook in a "broadcast on" event. This is followed by the frontend setup including the Javascript to create the Pusher instance.

tagged: laravel broadcast pusher tutorial event websocket

Link: https://code.tutsplus.com/tutorials/how-laravel-broadcasting-works--cms-30500

SitePoint PHP Blog:
How to Add Real-Time Notifications to Laravel with Pusher
Jul 28, 2017 @ 09:21:37

The SitePoint PHP blog has posted a new tutorial showing you how you can add real-time notifications to a Laravel application with the help of the Pusher service.

The modern web user expects to be informed of everything that happens within the application. You don’t want to be that one website that doesn’t even have the notifications dropdown found not just in all social media websites, but everywhere else these days, too.

Luckily, with Laravel and Pusher, implementing this functionality is a breeze. The code we’ll write in this tutorial can be found here.

Pusher makes use of Websockets to relay messages back out to waiting clients, sending a push notification (hence the name of the service) rather than waiting for it to poll them for the latest updates. The tutorial starts off by creating a new Laravel installation based on a "blog" example. It then creates the "followers" migration and model and builds out the relationships between it and the user handling. From there they show how to create the routes for following/unfollowing users, the code to perform the action and how to use Laravel's own notifications functionality to integrate with the queue. With that in place they include code to show the current messages (last five) and output the Javascript required to push the messages out to waiting clients.

tagged: tutorial realtime notification laravel pusher websocket

Link: https://www.sitepoint.com/add-real-time-notifications-laravel-pusher/

Laravel News:
New Community Project: Laravel Notification Channels
Aug 15, 2016 @ 10:53:13

On the Laravel News site there's a new post talking about a new community effort that's been started in the Laravel ecosystem centering around notification channels. A "notification channel" is a method used to interact directly with your users - in this case using Pusher notifications via a simplified interface.

Laravel 5.3 will ship with a notification system that includes a Nexmo SMS driver, a Mail driver, and the ability to include custom drivers. Now that we have this system built-in we can use the new Pusher service from inside our Laravel applications.

All we need to do is to create a custom driver and that’s it, we’ll be able to send Push notifications to our Mobile devices right away. With the help of Freek Van der Herten and Marcel Pociot we managed to build an easy to use driver for Pusher Push Notifications.

The Pusher system not only allows sending messages to you users via the web but also push notifications to mobile devices (iOS and Android). A simple code snippet is included showing the Laravel-centric interface to the functionality and a link to more code examples on a GitHub repository. The post ends with a brief section about creating customer drivers as well.

tagged: laravel community project notification channel pusher ios android

Link: https://laravel-news.com/2016/08/new-community-project-laravel-notification-channels/

Matt Stauffer:
Introducing Laravel Echo: An In-Depth Walk-Through
Jun 17, 2016 @ 12:11:02

Matt Stauffer has a new post to his site where he's put together an in-depth look at Laravel Echo, a feature included in newer versions of the framework that makes it easy to integrate websockets into your Laravel-based application.

A few weeks ago, Taylor Otwell introduced another branded product within the Laravel line: Laravel Echo. So far, the only coverage it's gotten has been his Laracasts video intro, but I recently wrote it up for my book and wanted to share that with you. What follows is an excerpt from Laravel: Up and Running, heavily modified to make sense in a blog format.

He then gets into what Echo is and the different pieces that make it up: updates to the Laravel broadcast system and a new Javascript package. He suggests some places where using Echo makes sense and how to set up a simple broadcast event in your application (non-Echo to start). This makes use of the Pusher service for real-time event broadcasting. With that in place, he helps you install the Echo dependencies and integrating messages from both public and private channels. He also includes a bit of code at the end to exclude the message from broadcasting to the current user if you ever find a need for it.

tagged: laravel echo indepth tutorial setup configure pusher javascript

Link: https://mattstauffer.co/blog/introducing-laravel-echo

Pusher Blog:
How to Build Real-Time Laravel Apps with Pusher
Sep 23, 2015 @ 10:22:31

The Pusher blog has posted the set of tutorials they created as a part of the Laracon EU conference that shows you how to use their service to create a real-time Laravel-based application - a simple chat application.

The Laravel framework and Pusher are a great combination. Laravel helps you build elegant applications and at warp speed; Pusher helps you add real-time features to those apps in a fraction of the time it would take to build using your own infrastructure. [...] We recently wrote a set of tutorials covering How to Build Real-Time Laravel Apps with Pusher as part of a Workshop for Laracon EU. We’ve now opened up these tutorials for everybody and anybody to work through. The source has been opened up under the Commons Attribution 4.0 International License so you’re free to fork and adapt to suit your needs or even to run your own workshop.

The talk briefly about who the tutorials are targeted at and how the guide is laid out (a Gitbook). It covers some of the fundamentals of Pusher, setting it up via a Laravel bridge, debugging tips and the construction of the actual sample application.

tagged: pusher realtime application tutorial series gitbook chat laravel

Link: https://blog.pusher.com/how-to-build-real-time-laravel-apps-with-pusher/

Build a Real-Time Chat Application With Modulus and Laravel 5
Sep 02, 2015 @ 10:17:16

On NetTuts.com they've posted a tutorial showing you how to create a real-time chat system using Laravel 5, Modulus and Pusher (with a PostregSQL backend).

In this tutorial, I will show you how to implement a real-time chat application with Laravel 5, PostgreSQL, and Pusher. Then we will deploy this application to Modulus together. We will use Laravel 5 for the back-end service, HTML5 and jQuery for a simple front-end application, PostgreSQL for the database, and Pusher for real-time communication between the server and clients.

They start with the scenario they want to solve and a look at the overall architecture of the solution. Then they start setting up the software and services needed to bring it all together:

  • installing a fresh copy of Laravel (as a project)
  • setting up a new database using the ElephantSQL service
  • creating a Pusher account and the credentials you'll need for the application
  • creating an Nginx configuration for the Modulus setup

Next comes the design of the application, creating the models for message data (author, content, etc) and the simple controller to handle the requests. They show how to configure the connection to Pusher and build the routes for getting, listing and saving messages. Finally they create the view complete with Javascript to connect it to Pusher and transfer messages back and forth. All that's left then is the deployment using the modulus command line tool (installed via npm).

tagged: realtime chat tutorial application laravel5 pusher postgresql modulus

Link: http://code.tutsplus.com/tutorials/build-a-real-time-chat-application-with-modulus-and-laravel-5--cms-24284