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?
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.
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.
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