Hugging Face's logo

Spaces:
subhrajit-mohanty
/
fastapi-sse-notification
Paused

App Files Community
subhrajit-mohanty commited on
Commit
884f3b3
·
verified ·
1 Parent(s): 9be5212

Upload sse_html_page.html

Browse files
Files changed (1) hide show
  1. sse_html_page.html +196 -0
sse_html_page.html ADDED
@@ -0,0 +1,196 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Server-Sent Events Connection</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 800px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ background-color: #f5f5f5;
14
+ }
15
+ .container {
16
+ background: white;
17
+ padding: 30px;
18
+ border-radius: 10px;
19
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
20
+ }
21
+ h1 {
22
+ color: #333;
23
+ text-align: center;
24
+ }
25
+ .status {
26
+ padding: 15px;
27
+ border-radius: 5px;
28
+ margin: 20px 0;
29
+ font-weight: bold;
30
+ }
31
+ .connected {
32
+ background-color: #d4edda;
33
+ color: #155724;
34
+ border: 1px solid #c3e6cb;
35
+ }
36
+ .disconnected {
37
+ background-color: #f8d7da;
38
+ color: #721c24;
39
+ border: 1px solid #f5c6cb;
40
+ }
41
+ .messages {
42
+ background-color: #f8f9fa;
43
+ border: 1px solid #dee2e6;
44
+ border-radius: 5px;
45
+ padding: 15px;
46
+ margin: 20px 0;
47
+ max-height: 300px;
48
+ overflow-y: auto;
49
+ }
50
+ .message {
51
+ padding: 8px;
52
+ margin: 5px 0;
53
+ background-color: white;
54
+ border-left: 4px solid #007bff;
55
+ border-radius: 3px;
56
+ }
57
+ .timestamp {
58
+ color: #6c757d;
59
+ font-size: 0.9em;
60
+ }
61
+ button {
62
+ background-color: #007bff;
63
+ color: white;
64
+ border: none;
65
+ padding: 10px 20px;
66
+ border-radius: 5px;
67
+ cursor: pointer;
68
+ margin: 10px 5px;
69
+ }
70
+ button:hover {
71
+ background-color: #0056b3;
72
+ }
73
+ button:disabled {
74
+ background-color: #6c757d;
75
+ cursor: not-allowed;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body>
80
+ <div class="container">
81
+ <h1>Server-Sent Events Connection</h1>
82
+
83
+ <div id="status" class="status disconnected">
84
+ Disconnected
85
+ </div>
86
+
87
+ <div>
88
+ <button id="connectBtn" onclick="connect()">Connect</button>
89
+ <button id="disconnectBtn" onclick="disconnect()" disabled>Disconnect</button>
90
+ <button onclick="clearMessages()">Clear Messages</button>
91
+ </div>
92
+
93
+ <h3>Messages:</h3>
94
+ <div id="messages" class="messages">
95
+ <div style="color: #6c757d; font-style: italic;">No messages yet...</div>
96
+ </div>
97
+
98
+ <h3>Console Output:</h3>
99
+ <p style="color: #6c757d;">Connecting to: https://subhrajit-mohanty-fastapi-sse-notification.hf.space/sse</p>
100
+ </div>
101
+
102
+ <script>
103
+ let sse = null;
104
+
105
+ function connect() {
106
+ if (sse) {
107
+ sse.close();
108
+ }
109
+
110
+ try {
111
+ sse = new EventSource("https://subhrajit-mohanty-fastapi-sse-notification.hf.space/sse");
112
+
113
+ sse.onopen = () => {
114
+ updateStatus("Connected", true);
115
+ addMessage("Connection opened", "info");
116
+ console.log("SSE connection opened");
117
+ };
118
+
119
+ sse.onmessage = (e) => {
120
+ console.log("Message:", e.data);
121
+ addMessage(e.data, "message");
122
+ };
123
+
124
+ sse.onerror = (error) => {
125
+ console.error("SSE error:", error);
126
+ updateStatus("Connection Error", false);
127
+ addMessage("Connection error occurred", "error");
128
+ };
129
+
130
+ document.getElementById('connectBtn').disabled = true;
131
+ document.getElementById('disconnectBtn').disabled = false;
132
+
133
+ } catch (error) {
134
+ console.error("Failed to create SSE connection:", error);
135
+ addMessage("Failed to create connection: " + error.message, "error");
136
+ }
137
+ }
138
+
139
+ function disconnect() {
140
+ if (sse) {
141
+ sse.close();
142
+ sse = null;
143
+ }
144
+ updateStatus("Disconnected", false);
145
+ addMessage("Connection closed", "info");
146
+
147
+ document.getElementById('connectBtn').disabled = false;
148
+ document.getElementById('disconnectBtn').disabled = true;
149
+ }
150
+
151
+ function updateStatus(message, isConnected) {
152
+ const statusEl = document.getElementById('status');
153
+ statusEl.textContent = message;
154
+ statusEl.className = 'status ' + (isConnected ? 'connected' : 'disconnected');
155
+ }
156
+
157
+ function addMessage(data, type) {
158
+ const messagesEl = document.getElementById('messages');
159
+
160
+ // Clear the "no messages" placeholder
161
+ if (messagesEl.children.length === 1 && messagesEl.children[0].style.fontStyle === 'italic') {
162
+ messagesEl.innerHTML = '';
163
+ }
164
+
165
+ const messageEl = document.createElement('div');
166
+ messageEl.className = 'message';
167
+
168
+ const timestamp = new Date().toLocaleTimeString();
169
+ messageEl.innerHTML = `
170
+ <div class="timestamp">${timestamp} - ${type.toUpperCase()}</div>
171
+ <div>${data}</div>
172
+ `;
173
+
174
+ messagesEl.appendChild(messageEl);
175
+ messagesEl.scrollTop = messagesEl.scrollHeight;
176
+ }
177
+
178
+ function clearMessages() {
179
+ const messagesEl = document.getElementById('messages');
180
+ messagesEl.innerHTML = '<div style="color: #6c757d; font-style: italic;">No messages yet...</div>';
181
+ }
182
+
183
+ // Auto-connect on page load
184
+ window.addEventListener('load', () => {
185
+ connect();
186
+ });
187
+
188
+ // Clean up connection when page is closed
189
+ window.addEventListener('beforeunload', () => {
190
+ if (sse) {
191
+ sse.close();
192
+ }
193
+ });
194
+ </script>
195
+ </body>
196
+ </html>