Every web experience can be improved with Websockets. They add that sense of shock and awe to a website and this master tutorial is going to outline all of the content that DevMarketer has created on the subject in relation to using websockets with Laravel. Laravel Echo is the javascript library which is maintained by the Laravel team to help make websockets easy to master within a Laravel project. I promise that its easier than you think and I will walk you along as we learn how to master it.

I created a set of YouTube videos that you can watch on the subject. This topic was suggested by you guys, and therefore created by popular demand of my followers. Be sure to follow me on all my social networks so you can vote on the next great topic we cover.

This page will be updated as new information is updated or changed on these tutorials and as I add new tutorials on this topic. Be sure to share this page, and bookmark it and check back often as I will update information here as new tutorials are added, or if the necessary code changes so that the tutorials can stay up to date.

The project files for this tutorial can be found and maintained on Github.
GitHub Repo: https://github.com/DevMarketer/Laravel_Echo_Tutorial

Watch Video Introduction to this Series: https://youtu.be/ORga8ZavCc8

Part 0: Introduction to Websockets

Understand the terminology used when working with Websockets so you can more easily comprehend documentation and the tutorials contained on this site. You can skip this if you already understand websockets and how they work and are simply looking for how to incorporate them with Laravel. But

Read: Websockets with Laravel – Part 0: What Are Websockets?
Watch: https://youtu.be/1qlsWjajVts
Download Slides: as Google Slides, or as PDF

Part 1: Configuration and Setup

While not the most exciting, the setup is important because there are several critical steps that must be taken early-on to ensure that your project works are expected down the road.

We will walk you through how to follow along with this tutorial’s sample project but also what steps you must do with any of your own projects before you add websocket functionality to them.

I have created a checklist that also might help you when setting up your own project so you do not forget any steps.

Read: Websockets with Laravel: Part 1
Watch: https://youtu.be/tExUWmF6wNM

 

Part 2: Creating Comments with AJAX

This video is focused on creating the base commenting system. This is important because the next video we will enhance this commenting system to use Laravel Echo and websockets!

So this tutorial will cover creating an API for getting and saving new comments for our posts. We will create the API endpoints, and the logic to save the new comments in the database or to get existing comments out of the database.

After that, we will set up Vue.js to display comments on the screen and to manage our applications client-side data through Vue. This will make life easier after we integrate websockets because then all we need to do is change the value of these Vue.js Data Objects to update things on the screen.

Read: https://devmarketer.io/learn/part-2-creating-comments-ajax/
Watch: 

 

Part 3: Connecting Socket Server

Finally its time to put our socket server to work and see Laravel Echo in action. This tutorial will connect everything together and by the end of it, we will have a live commenting application that allows us to update other posts via broadcasting and Laravel Echo.

 

Read: Websockets with Laravel – Part 3: Connecting Socket Server
Watch: youtube link here