Real-time Notifications with WebSockets Examples

Introduction to Real-time Notifications Using WebSockets

WebSockets provide a powerful way to create real-time communication channels between clients and servers. Unlike traditional HTTP requests, which are one-off and stateless, WebSockets maintain a persistent connection that allows for bi-directional communication. This capability is particularly useful for real-time notifications systems, where timely updates are crucial for user engagement. Below are three practical examples of how WebSockets can be utilized to implement real-time notifications across different applications.

Example 1: Live Chat Application Notifications

In a live chat application, instant notifications are essential for enhancing user experience. When a user sends a message, the other participants should receive that message in real-time without needing to refresh the page.

To implement this, the application establishes a WebSocket connection upon loading the chat interface. When a user sends a message, the message is sent to the server through the WebSocket connection, which then broadcasts it to all connected clients.

// Client-side JavaScript for live chat notification
const socket = new WebSocket('wss://yourserver.com/chat');

socket.onopen = () => {
    console.log('Connected to chat server');
};

socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    displayMessage(message);
};

function sendMessage(messageContent) {
    const message = { content: messageContent, timestamp: new Date() };
    socket.send(JSON.stringify(message));
}

In this example, once the message is sent, it is immediately displayed in the chat window for all users. This ensures that everyone is engaged and aware of ongoing conversations.

Notes:

• Consider implementing user presence indicators to show when users are online or offline.
• Use message acknowledgments to ensure messages are received successfully.

Example 2: Stock Price Alert System

Financial applications often require real-time updates on stock prices. A stock price alert system can utilize WebSockets to notify users of significant price changes or alerts based on their preferences.

In this scenario, when a user subscribes to specific stocks, the server maintains that subscription. Whenever there is a price change, the server sends a notification to all subscribed users.

// Client-side JavaScript for stock price notifications
const socket = new WebSocket('wss://yourserver.com/stocks');

socket.onopen = () => {
    console.log('Connected to stock price server');
    socket.send(JSON.stringify({ action: 'subscribe', stocks: ['AAPL', 'GOOGL'] }));
};

socket.onmessage = (event) => {
    const stockUpdate = JSON.parse(event.data);
    displayStockPrice(stockUpdate);
};

In this example, users will receive real-time notifications whenever the prices of their subscribed stocks change, allowing them to make timely decisions.

Notes:

• Implement throttling for updates to avoid overwhelming clients with too many messages in a short period.
• Consider providing options for users to set price thresholds for notifications.

Example 3: Online Gaming Notifications

In online multiplayer games, players benefit from real-time updates regarding game events, such as friend requests, game invites, or status changes. WebSockets can be used to push these notifications instantly to players.

For example, when a player receives a friend request, the server sends a notification through the WebSocket connection that immediately appears on the player’s screen.

// Client-side JavaScript for gaming notifications
const socket = new WebSocket('wss://yourserver.com/game');

socket.onopen = () => {
    console.log('Connected to game server');
};

socket.onmessage = (event) => {
    const notification = JSON.parse(event.data);
    displayNotification(notification);
};

function sendFriendRequest(playerId) {
    const request = { action: 'sendFriendRequest', playerId: playerId };
    socket.send(JSON.stringify(request));
}

This setup allows for immediate awareness of social interactions within the game, enhancing the overall gaming experience.

Notes:

• Consider using sound or visual cues for notifications to grab player attention.
• Implement user settings to customize notification preferences.