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