Skip to content

Instantly share code, notes, and snippets.

@erfg12

erfg12/gotify_web_sample.html

Last active September 20, 2022 20:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save erfg12/2a98610e83e9358f23d828f66d1bef69 to your computer and use it in GitHub Desktop.
Save erfg12/2a98610e83e9358f23d828f66d1bef69 to your computer and use it in GitHub Desktop.
Download ZIP
Gotify web app sample code for send and receive.
Raw
gotify_web_sample.html
<html>
<header>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// VARIABLES, PLEASE CHANGE
var APP_TOKEN = "AhCGJ-BEC3z.g8Q";
var CLIENT_TOKEN = "C25iT7U7E1xlzSk";
var GOTIFY_SERVER = "localhost:80";
// SEND INFO TO MSG SERVER
function SendMsg() {
var title = document.getElementById("title").value;
var message = document.getElementById("message").value;
var data = {
title: title,
message: message,
priority: "5"
};
$.ajax({
type: "POST",
url: "http://" + GOTIFY_SERVER + "/message?token=" + APP_TOKEN,
data: data,
dataType: "json"
}).done(function() {
console.log("Data sent Title:[" + title + "] Message:[" + message + "] to server.");
document.getElementById("title").value = "";
document.getElementById("message").value = "";
}).fail( function(xhr, textStatus, errorThrown) {
alert(xhr.responseText);
});
}
// LISTEN FOR NEW MSG AND DISPLAY
var today, dateTime;
var source = new WebSocket("ws://" + GOTIFY_SERVER + "/stream?token=" + CLIENT_TOKEN);
function UpdateDateTime() {
today = new Date();
dateTime = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
}
source.onmessage = function(event) {
UpdateDateTime();
var obj = JSON.parse(event.data);
$("#receiving").prepend("<li>" + obj.title + " - " + obj.message + " <sup style=\"background-color:grey;color:white;\"> Received:" + dateTime + " </sup></li>");
};
source.onerror = function(e) {
alert("RECEIVING ERROR");
}
// DISPLAY ALL MESSAGES
fetch("http://" + GOTIFY_SERVER + "/message?token=" + CLIENT_TOKEN)
.then(response => response.json())
.then(data => {
var i = 0;
console.log(data);
for (var k in data["messages"]){
$("#archive").prepend("<li>" + data["messages"][i]["title"] + " - " + data["messages"][i]["message"] + "</li>");
i += 1;
}
})
.catch(function() {
alert("Archive fetch failed.");
});
</script>
</header>
<body style="font-family: Arial, Helvetica, sans-serif;">
<h1><a href="https://gotify.net/" target="_BLANK">Gotify</a> Web App Sample Code. Reference <a href="https://gotify.net/api-docs" target="_BLANK">API-Docs</a> For More Info.</h1>
<h3>SEND (Post)</h3>
<input id="title" placeholder="title"><br>
<input id="message" placeholder="message"><br>
<button onclick="SendMsg()">SEND MSG</button>
<h3>RECEIVE (WebSocket)</h3>
<div id="receiving"></div>
<h3>ARCHIVE (Get)</h3>
<div id="archive"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment