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 1/2] 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>

From c2d6e0e31632f3fc5a0d6fe5611140557f42b540 Mon Sep 17 00:00:00 2001
From: wunter8 <wunter8@users.noreply.github.com>
Date: Wed, 15 Nov 2023 09:31:34 -0700
Subject: [PATCH 2/2] Include link to websocket example in docs

---
 docs/subscribe/api.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/subscribe/api.md b/docs/subscribe/api.md
index 58da9752..3f1c0e81 100644
--- a/docs/subscribe/api.md
+++ b/docs/subscribe/api.md
@@ -190,9 +190,10 @@ format. Keepalive messages are sent as empty lines.
 
 ## WebSockets
 You may also subscribe to topics via [WebSockets](https://en.wikipedia.org/wiki/WebSocket), which is also widely 
-supported in many languages. Most notably, WebSockets are natively supported in JavaScript. On the command line, 
-I recommend [websocat](https://github.com/vi/websocat), a fantastic tool similar to `socat` or `curl`, but specifically
-for WebSockets.  
+supported in many languages. Most notably, WebSockets are natively supported in JavaScript. You may also want to 
+check out the [full example on GitHub](https://github.com/binwiederhier/ntfy/tree/main/examples/web-example-websocket).
+On the command line, I recommend [websocat](https://github.com/vi/websocat), a fantastic tool similar to `socat` 
+or `curl`, but specifically for WebSockets.
 
 The WebSockets endpoint is available at `<topic>/ws` and returns messages as JSON objects similar to the 
 [JSON stream endpoint](#subscribe-as-json-stream). 
