From 5acc6ad0c48ba9a35628834e8defec0809b508d1 Mon Sep 17 00:00:00 2001
From: wunter8 <wunter8@users.noreply.github.com>
Date: Wed, 15 Nov 2023 09:28:35 -0700
Subject: [PATCH] Add JS websocket example

---
 .../web-example-websocket/example-ws.html     | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 examples/web-example-websocket/example-ws.html
diff --git a/examples/web-example-websocket/example-ws.html b/examples/web-example-websocket/example-ws.html
new file mode 100644
index 00000000..7025aa60
--- /dev/null
+++ b/examples/web-example-websocket/example-ws.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ntfy.sh: WebSocket Example</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <style>
+        body { font-size: 1.2em; line-height: 130%; }
+        #events { font-family: monospace; }
+    </style>
+</head>
+<body>
+<h1>ntfy.sh: WebSocket Example</h1>
+<p>
+    This is an example showing how to use <a href="https://ntfy.sh">ntfy.sh</a> with
+    <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket">WebSocket</a>.<br/>
+    This example doesn't need a server. You can just save the HTML page and run it from anywhere.
+</p>
+<button id="publishButton">Send test notification</button>
+<p><b>Log:</b></p>
+<div id="events"></div>
+
+<script type="text/javascript">
+    const publishURL = `https://ntfy.sh/example`;
+    const subscribeURL = `wss://ntfy.sh/example/ws`;
+    const events = document.getElementById('events');
+    const websocket = new WebSocket(subscribeURL);
+
+    // Publish button
+    document.getElementById("publishButton").onclick = () => {
+        fetch(publishURL, {
+            method: 'POST', // works with PUT as well, though that sends an OPTIONS request too!
+            body: `It is ${new Date().toString()}. This is a test.`
+        })
+    };
+
+    // Incoming events
+    websocket.onopen = () => {
+        let event = document.createElement('div');
+        event.innerHTML = `WebSocket connected to ${subscribeURL}`;
+        events.appendChild(event);
+    };
+    websocket.onerror = (e) => {
+        let event = document.createElement('div');
+        event.innerHTML = `WebSocket error: Failed to connect to ${subscribeURL}`;
+        events.appendChild(event);
+    };
+    websocket.onmessage = (e) => {
+        let event = document.createElement('div');
+        event.innerHTML = e.data;
+        events.appendChild(event);
+    };
+</script>
+
+</body>
+</html>
