mirrors/binwiederhier-ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-12-14 11:47:33 +00:00
Code Activity

Merge pull request #947 from wunter8/patch-4

Browse source 
Add JS WebSocket example to docs
This commit is contained in:
Philipp C. Heckel 2023-11-16 05:18:30 -05:00 committed by GitHub
commit c6b6c81c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/subscribe/api.md
View file

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

56
examples/web-example-websocket/example-ws.html Normal file
View file

@ -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>