mirror of
https://github.com/fastapi-practices/fastapi-best-architecture.git
synced 2026-09-21 13:12:24 +00:00
92 lines
2.9 KiB
HTML
92 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Socket.IO Task Notifications</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
#notifications {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.notification {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.notification.new {
|
|
background-color: #d3f9d8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Task Notifications</h1>
|
|
<p>Waiting for task notifications...</p>
|
|
|
|
<div id="notifications"></div>
|
|
|
|
<!-- Load Socket.IO client -->
|
|
<script src="https://cdn.socket.io/4.5.1/socket.io.min.js"></script>
|
|
<script>
|
|
// Establish a connection to the server
|
|
const socket = io('http://127.0.0.1:8000', {
|
|
autoConnect: true,
|
|
path: '/ws/socket.io',
|
|
reconnection: true,
|
|
reconnectionAttempts: 3,
|
|
reconnectionDelay: 1000,
|
|
transports: ['websocket'],
|
|
auth: {
|
|
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzE2OTM1NzIsInN1YiI6IjEifQ.8rARu8C3Yx2bh5-jQQAJLgDiMJViVrO-R9NaZbJBKd0'
|
|
}
|
|
});
|
|
|
|
// Handle 'task_notification' event
|
|
socket.on('task_notification', (data) => {
|
|
// Get the notifications container
|
|
const notificationsContainer = document.getElementById('notifications');
|
|
|
|
// Create a new div for the notification
|
|
const notificationDiv = document.createElement('div');
|
|
notificationDiv.classList.add('notification', 'new');
|
|
notificationDiv.innerHTML = `
|
|
<strong>Task Notification:</strong>
|
|
<p>${data.msg}</p>
|
|
<small>Received at: ${new Date().toLocaleTimeString()}</small>
|
|
`;
|
|
|
|
// Append the new notification to the container
|
|
notificationsContainer.appendChild(notificationDiv);
|
|
|
|
// Scroll to the bottom to show the latest notification
|
|
notificationsContainer.scrollTop = notificationsContainer.scrollHeight;
|
|
});
|
|
|
|
// Handle connection errors
|
|
socket.on('connect_error', (error) => {
|
|
console.error('Connection error:', error);
|
|
alert('Unable to connect to the server. Please check your connection.');
|
|
});
|
|
|
|
socket.on('connect', () => {
|
|
console.log('Connected to server');
|
|
});
|
|
|
|
socket.on('disconnect', () => {
|
|
console.log('Disconnected from server');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|