Laravel Echo Tutorial Versions Save

Learn Laravel Echo and Websockets with this free tutorial from DevMarketer

Part4

6 years ago

Up to this point we have always worked with public channels in Laravel Echo. Public channels can be useful for websites with public facing frontends and with notifications like comments that don't provide sensitive or private information.

So what do you do when your channels are distributing information that is only intended for certain users (like admins or managers) or the author of a blog post, or the information being sent is more sensitive? Well that is when we use private channels, which require users to authenticate in order to subscribe to a channel.

There are three basic steps needed to convert a channel from a public channel to a private one:

  1. In your App\Events file we need to change return new Channel('post') to return new PrivateChannel('post') inside the broadcastOn() method.
  2. On the client side (which for us is on the posts.show blade file) we need to tell laravel echo that we are subscribing to a private channel now. This means changing Echo.channel() to Echo.private(). Everything else can stay the same.
  3. Lastly, in our routes/channels.php file we can define our private channel with authentication rules by ensuring that the function returns true or false to determine the user's eligibility for that private channel.

Part3

6 years ago

It is finally time to connect to our socket server and start serving broadcasting events to our users. In this tutorial part, we will be creating our event, which we will trigger server-side when we hit the new comment API point that we created in the last video.

As soon as we submit a new comment to that API endpoint, we will trigger the event after it saves, and pass the new comment's details to the socket server.

On the server side we can just use the basic Laravel event/listener system, except that we won't bother ourselves with listeners. Listeners can still be used to run scripts server-side when an event is triggered, but our primary concern is to trigger events and then broadcast those events, which will be sent to our socket server on Pusher.com.

On the client-side we will use Laravel Echo to subscribe to channels when the page loads. This will prepare our clients to accept any new events that come down the tube while we are subscribed. Then we will tell Laravel Echo what to do when we hear the NewComment event, and use Vue.js to update the newest comment into our comments array, so that it is automatically displayed in the comments feed.

In the end we will have a powerful live commenting realtime engine. It will be a great example of what can be done with websockets and Laravel echo!


Read Written Tutorial: Coming Soon Watch Tutorial Free on YouTube: https://youtu.be/UUpZlSbGs9M

Part2

6 years ago

This Episode is focused on setting up comments and the comments API. This will be useful for us to interact with and will create some structure to save our comments.

First we need to create a database migration to store our comments. This will require creating a migration, a model, and a controller for our comments.

We will make 2 API endpoints for our comments. The first is to display all comments for a specific post. The second endpoint will allow us to save a new comment via the API.

Then its time to use this API by setting up our frontend. We will create two Vue.js methods to handle this. The first is getComments() which gets all the comments for the current post, and the second is postComments() which will post a new comment for the current post.


Read Written Tutorial: https://devmarketer.io/learn/part-2-creating-comments-ajax/ Watch Tutorial Free on YouTube: https://youtu.be/xIEybma2RqM

start

6 years ago

This is where the tutorial starts. It is suggested that you start at this tag which will give you a basic blog system to begin working with for this tutorial.

Once you download this folder you will need to prepare a few things before you are ready to start. Follow these steps to get the project to a workable state.

  1. Clone this repository (or download and extract the .zip)
  2. Run composer install from inside the project directory to download PHP dependencies
  3. Run npm install or yarn to download JS dependencies
  4. Run cp .env.example .env to create your projects' .env file
  5. Run php artisan key:generate to create a new encryption key
  6. Open the project and edit the .env file to add database settings to your project. Take note of the database name, password, and username to make sure they match your system's settings. Change any other environment settings you desire, but no other setting changes are required to follow this tutorial.
  7. Back in the terminal, run php artisan migrate to migrate your database
  8. Run php artisan db:seed to seed your database

Congratulations! You should now be ready to begin working on the tutorial.


Written Tutorial: https://devmarketer.io/learn/part-1-setting-up-our-laravel-echo-project Watch Tutorial: https://youtu.be/tExUWmF6wNM