Building a Realtime Chat App with Laravel 5.4 and VueJS

With the announcement of Laravel Dusk, a browser automation and testing API tool, I noticed a cool chunk of demo code. It represents a realtime app that features user interacting using WebSockets:

This inspired me to build an app for which I could use that same exact snippet of code. It ended up involving quite a few steps, but Laravel made it easy!

See the code for this tutorial on Github

Note: I’ve since updated the master branch of the code on Github which fixed some breaking changes to how Laravel Mix is compiled. They are not updated in the individual steps below.

Step 1: Setup

https://www.youtube.com/watch?v=rL-dJcxC8X8

In this video, I get the dev version of Laravel installed, get the new Laravel Mix up and running, and render and example Vue component.

Code for Step 1

Step 2: Vue Components

https://www.youtube.com/watch?v=pTVCW5k4piU

Now I can start developing several Vue Components to create an interactive chat application. None of the data is persisted to the server yet, but it looks real!

Step 3: Laravel Backend

https://www.youtube.com/watch?v=8aTfMHg3V1Q

Now I am POSTing chat messages to the server and start loading messages from the server. It’s basic Laravel models and routes in this video.

Code for Step 3

Step 4: Laravel Echo

https://www.youtube.com/watch?v=iiBcOKYxd0Q

I have a functional chat app connected to the server, but I have to refresh to see new messages from other people. This step involves setting up Event Broadcasting within Laravel and implementing Laravel Echo on the front end using Pusher.

Step 5: Laravel Dusk

https://www.youtube.com/watch?v=wrF3cw0y95s

I’m finally to the point where I’m ready to test my realtime chat application. I install Laravel Dusk, write a couple example tests, and talk about the benefits of this sort of testing environment.

That's all that I have! Let me know if you have had similar experiences with Laravel and what sort of things you've done with Laravel Dusk. Follow @jplhomer