|
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | 6 | <title>Example App</title> |
7 | 7 | <style> |
8 | | - #output { |
9 | | - margin-top: 20px; |
| 8 | + h2 { |
| 9 | + padding: 0; |
| 10 | + margin: 30px 0 5px; |
| 11 | + } |
| 12 | + |
| 13 | + .output { |
| 14 | + margin-top: 10px; |
10 | 15 | height: 200px; |
11 | 16 | width: 600px; |
12 | 17 | border: 1px solid black; |
|
15 | 20 | } |
16 | 21 | </style> |
17 | 22 | <script> |
18 | | - let eventSource; |
19 | | - |
20 | | - const stopEvents = () => { |
21 | | - if (eventSource && eventSource.readyState !== EventSource.CLOSED) { |
22 | | - eventSource.close(); |
23 | | - } |
24 | | - } |
25 | | - |
26 | | - const runExample = (endpoint) => { |
27 | | - eventSource = new EventSource(endpoint); |
28 | | - const output = document.getElementById('output'); |
| 23 | + const runFanoutExample = () => { |
| 24 | + const eventSource = new EventSource('/fanout-events'); |
| 25 | + const output = document.getElementById('fanout-example-output'); |
29 | 26 |
|
30 | 27 | output.innerHTML = ''; |
31 | 28 |
|
|
40 | 37 | }; |
41 | 38 |
|
42 | 39 | eventSource.onerror = function(error) { |
43 | | - console.error('EventSource failed:', error); |
| 40 | + console.error('Fanout Example EventSource failed:', error); |
44 | 41 | }; |
| 42 | + }; |
| 43 | + |
| 44 | + let subscriptionES; |
| 45 | + |
| 46 | + const startFanoutSubscribeExample = () => { |
| 47 | + subscriptionES = new EventSource('/fanout-subscribe-events'); |
| 48 | + const output = document.getElementById('fanout-subscribe-output'); |
| 49 | + |
| 50 | + output.innerHTML = ''; |
| 51 | + |
| 52 | + subscriptionES.onmessage = function(event) { |
| 53 | + const el = document.createElement('div'); |
| 54 | + el.textContent = event.data; |
| 55 | + output.appendChild(el); |
| 56 | + |
| 57 | + if (event.data === "finished") { |
| 58 | + subscriptionES.close(); |
| 59 | + } |
| 60 | + }; |
| 61 | + |
| 62 | + subscriptionES.onerror = function(error) { |
| 63 | + console.error('Fanout Subscribe Example EventSource failed:', error); |
| 64 | + }; |
| 65 | + } |
| 66 | + |
| 67 | + const stopFanoutSubscribeExample = () => { |
| 68 | + if (subscriptionES && subscriptionES.readyState !== EventSource.CLOSED) { |
| 69 | + subscriptionES.close(); |
| 70 | + } |
45 | 71 | } |
46 | | - </script> |
| 72 | +</script> |
47 | 73 | </head> |
48 | 74 | <body> |
49 | 75 | <h1>Example App</h1> |
50 | | - <button type="button" onclick="runExample('/fanout-events')">Start Fanout Example</button> |
51 | | - <button type="button" onclick="runExample('/fanout-subscribe-events')">Start Fanout Subscribe Example</button> |
52 | | - <button type="button" onclick="stopEvents()">Stop</button> |
53 | | - <div id="output"></div> |
| 76 | + <h2>Fanout Example:</h2> |
| 77 | + <button type="button" onclick="runFanoutExample()">Run</button> |
| 78 | + <div id="fanout-example-output" class="output"></div> |
| 79 | + <h2>Fanout Subscribe Example:</h2> |
| 80 | + <button type="button" onclick="startFanoutSubscribeExample()">Start</button> |
| 81 | + <button type="button" onclick="stopFanoutSubscribeExample()">Stop</button> |
| 82 | + <div id="fanout-subscribe-output" class="output"></div> |
54 | 83 | </body> |
55 | 84 | </html> |
0 commit comments