Building a Realtime Chat App with Laravel 5.4 and VueJS
Let’s build a realtime chat application using Laravel 5.4 and VueJS, and then we’ll test it with Laravel Dusk!
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!
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
Step 2: Vue Components
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
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.
Step 4: Laravel Echo
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
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.