🎯 What You'll Learn
In this lesson, you'll explore advanced Socket.IO features:
- Typing indicators and real-time feedback
- Real-time notifications and alerts
- Message timestamps and delivery tracking
- Advanced event handling patterns
🔑 Advanced Features Concepts
- Typing Indicators: Show when users are typing in real-time
- Real-time Notifications: Instant alerts for various events
- Message Metadata: Timestamps, delivery status, and user info
- Event Debouncing: Optimize frequent events like typing
👤 User Registration
Register with a username to test advanced features:
⌨️ Typing Indicators
See when other users are typing in real-time
is typing
🔔 Real-time Notifications
Get instant notifications for various events
Recent Notifications
No notifications yet
💬 Advanced Chat Interface
Experience typing indicators and real-time notifications
⌨️ Typing Indicators
Learn how to implement real-time typing indicators:
// Client-side: Send typing start event
messageInput.addEventListener('input', () => {
socket.emit('typing start', { roomName: 'general' });
// Clear typing indicator after 3 seconds
clearTimeout(typingTimeout);
typingTimeout = setTimeout(() => {
socket.emit('typing stop', { roomName: 'general' });
}, 3000);
});
// Server-side: Handle typing events
socket.on('typing start', (data) => {
const { roomName } = data;
const user = users[socket.id];
if (user) {
// Send typing indicator to other users in the room
socket.to(roomName).emit('user typing', {
user: user.username,
room: roomName
});
}
});
socket.on('typing stop', (data) => {
const { roomName } = data;
const user = users[socket.id];
if (user) {
// Stop typing indicator
socket.to(roomName).emit('user stopped typing', {
user: user.username,
room: roomName
});
}
});
Typing Indicators Demo
Try these scenarios:
- Start typing in the message box
- Watch for typing indicators from other users
- Stop typing and see the indicator disappear
- Open multiple tabs to see the effect
🔔 Real-time Notifications
Understanding how to send and handle real-time notifications:
// Server-side: Send notifications for various events
socket.on('user joined', (data) => {
// Send notification to all users
io.emit('notification', {
type: 'user_joined',
message: `${data.username} joined the chat`,
timestamp: new Date().toISOString(),
user: data.username
});
});
socket.on('user left', (data) => {
// Send notification to remaining users
socket.broadcast.emit('notification', {
type: 'user_left',
message: `${data.username} left the chat`,
timestamp: new Date().toISOString(),
user: data.username
});
});
// Client-side: Handle notifications
socket.on('notification', (data) => {
const { type, message, timestamp, user } = data;
// Display notification
displayNotification(message, timestamp);
// Show browser notification if supported
if (Notification.permission === 'granted') {
new Notification('Chat Notification', {
body: message,
icon: '/favicon.ico'
});
}
});
💡 Notification Best Practices
- Permission Handling: Request notification permission from users
- Notification Types: Different styles for different event types
- Sound Alerts: Add audio feedback for important notifications
- Notification History: Keep a log of recent notifications
⏰ Message Timestamps
Learn how to add timestamps and delivery tracking:
// Server-side: Add timestamps to messages
socket.on('chat message', (data) => {
const { message } = data;
const user = users[socket.id];
if (user) {
const messageData = {
user: user.username,
message: message,
timestamp: new Date().toISOString(),
messageId: generateMessageId(),
delivered: false
};
// Send to all users
io.emit('chat message', messageData);
// Mark as delivered after a short delay
setTimeout(() => {
socket.emit('message delivered', { messageId: messageData.messageId });
}, 100);
}
});
// Client-side: Handle message delivery
socket.on('message delivered', (data) => {
const { messageId } = data;
// Update message status in UI
updateMessageStatus(messageId, 'delivered');
});
🎯 Practice Exercise
Test all the advanced features:
Advanced Features Test
Try these scenarios:
- Open multiple browser tabs and register different users
- Start typing in one tab and watch for typing indicators in others
- Send messages and observe timestamps
- Watch for real-time notifications when users join/leave
- Test notification permissions in your browser
🚀 Congratulations!
You've completed the complete Socket.IO learning journey!
🎓 What You've Mastered
- ✅ Socket.IO fundamentals and connection handling
- ✅ Broadcasting messages to multiple clients
- ✅ User management and presence tracking
- ✅ Private messaging between users
- ✅ Group chat with rooms
- ✅ Advanced features like typing indicators
- ✅ Real-time notifications and timestamps