Laravel 8 Livewire Tutorial (Building a Simple CMS): Create a Simple Livewire Chat (part 14)
In this video, we will implement a simple chat feature using Livewire, WebSockets, and Node JS. We will add the simple chat feature by implementing a WebSocket capability to our laravel app. When working with WebSockets, you will need a WebSocket server and a WebSocket client. We will create a simple WebSocket server via Node JS and our laravel app will try to open a persistent connection to our Websocket server to enable the push notification feature to be applied. We will also need the help of livewire to easily achieve this feature!
This laravel 8 livewire tutorial series will help you build a simple CMS (Content Management System) using laravel 8.
Versions:
Laravel 8
Livewire 2
Timeline:
1:44 - Create the livewire chat component
2:00 - Create the model and migration for the Messages
2:30 - Install MySQL and UniqId node packages
3:50 - Update the Messages database migration file
4:38 - Add fillable properties for the Message model
5:15 - Start building the chat component
24:41 - Start building the chat server
27:45 - Add dispatch browser event
30:30 - Sending the initial information to the WebSocket server
Previous Video: Push Notifications without Pusher (part 13)
https://www.youtube.com/watch?v=IdlzVl3RDFg
Github Repo:
https://github.com/jackoftraits/laravel8-with-livewire
Chat CSS:
https://github.com/jackoftraits/laravel8-with-livewire/blob/master/public/css/chat.css
Socket.js File:
https://github.com/jackoftraits/laravel8-with-livewire/blob/master/public/js/socket.js
Chat Component Blade File:
https://github.com/jackoftraits/laravel8-with-livewire/blob/master/resources/views/livewire/chat-component.blade.php
Download VS Code:
https://code.visualstudio.com
Download Node JS:
https://nodejs.org/en/
Tailwind:
https://tailwindcss.com
Sound: www.bensound.com
#laravelLivewire #laravel8 #websocket
Other Videos By Sentgine
Other Statistics
Live Wire! Statistics For Sentgine
Currently, Sentgine has 272,446 views for Live Wire! across 24 videos. There's close to 7 hours worth of content for Live Wire! published on his channel, or 47.23% of the total watchable video on Sentgine's YouTube channel.