Loading...
Loading...
Error
Oops! Something went wrong
6. Send Messages in Real Time With Vue
Speed
Speed
Quality
Quality
Captions
Captions
media loading
Play
Pause
10
Seek backward
Rewind 10s
Play
Pause
Play
Play
Pause
Pause
20
Seek forward
Forward 20s
Mute
Unmute
Volume High
Volume Low
Volume Low
Mute
Mute
Unmute
0:00
0:00
Start casting
Stop casting
Chapters
Chapters
Introduction to Real-Time Messaging Example
00:00
Creating a New Laravel Event
00:29
Naming the MessageReceived Event
00:45
Implementing ShouldBroadcast Interface
01:02
Adding Message and ID Properties to Event
01:17
Importance of Unique Message ID
01:36
Broadcasting on a Public Channel
01:46
Understanding Event and Channel Naming
02:14
Using Same Channel for Related Events
02:23
Reusing Visit Count Page for Messaging
02:39
Storing Messages as a Reactive Array
02:51
Global Message Storage
03:07
Reactive Variable for Current Message Input
03:23
Displaying Messages with Unique IDs
03:32
Binding Text Area to Message Data
03:55
Creating a Form for Sending Messages
04:11
Handling Form Submission
04:30
Adding New Message to Local Array
04:52
Structuring Message Object with ID and Text
05:10
Local Message Display Test
05:27
Verifying Local Message Functionality
05:48
Server Communication via API Endpoint
06:08
Simple API Endpoint for Messaging
06:36
Sending Message Object to Server
06:42
Setting Up API Route in web.php
07:13
Inline Function for Route Handler
07:38
Validating Message and ID in Request
08:04
Dispatching MessageReceived Event
08:27
Skipping Database for Simplicity
08:40
Passing Payload to Event Constructor
08:55
Returning JSON Response
09:31
Monitoring Network Requests
09:47
Verifying API Request and Response
10:07
Listening for MessageReceived Event on Client
10:40
Adding New Message to Reactive Array
10:49
Real-Time Messaging Across Windows
11:18
Addressing Duplicate Message Issue
11:40
Preventing Duplicates by Checking ID
11:53
Conditional Message Pushing
12:05
Confirming Duplicate Fix
12:34
Identifying Message Sender
12:44
Adding 'Who' Property to Message Object
12:57
Displaying Sender Information
13:32
Integrating Authentication for User Names
13:38
Conclusion: Easy Real-Time Messaging
14:02
Enable captions
Disable captions
Enable Captions
Enable captions
Disable Captions
Disable captions
Settings
Settings
Settings
Enter fullscreen mode
Exit fullscreen mode
Fullscreen
Enter fullscreen
Exit Fullscreen
Exit fullscreen