Summer sale! Save 50% on access to our entire library of courses.Join here →

Build a Realtime Chat with Laravel, Vue and Pinia

21 episodes1 hr 41 mins

Overview

Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.

We’ll cover:

  • Using the Intersection Observer API to automatically load previous chat messages
  • State management with Pinia
  • Using presence channels to show online users for each room
  • Client-to client communication to show who’s typing
  • Using flexbox tricks to keep messages scrolled into view as they roll in
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Related courses

Laravel
Livewire
Build a Multi-room Realtime Chat with Livewire and Reverb

Join a room and start chatting! This course covers building a multi-room text chat app with Livewire using Laravel Reverb for real-time updates. Using presence channels and client-to-client whispering, we’ll also show who’s online, and who’s currently typing.

14 episodes
1 hr 23 mins
Laravel
Realtime with Laravel Reverb

New to realtime broadcasting in Laravel? This course covers the essentials with plenty of examples along the way, leaving you ready to start adding realtime functionality to any of your Laravel applications. Broken up into channel types, we’ll cover: - The basics of installing, configuring and running a Reverb server - Broadcasting events - Private channels - Presence channels - Client-to-client broadcasting by whispering

18 episodes
1 hr 19 mins
Laravel
Deploying Reverb with Forge

So you’ve built a realtime application. Now it’s time to deploy it. Laravel Forge makes it incredibly easy to toggle Reverb, which configures your server for you and sets up (nearly) everything you need to broadcast and listen for events. In this course, we’ll cover every step needed to get an local example application deployed to a production server, with a separate subdomain reserved for your Reverb connections.

7 episodes
16 mins