examples/websocket.html from danidee10/django-notifs

examples/websocket.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>

<html>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>

  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <script language="javascript" type="text/javascript">

      // request permission on page load
      document.addEventListener('DOMContentLoaded', function () {
        if (!Notification) {
          alert('Desktop notifications not available in your browser. Try Chromium.'); 
          return;
        }

        if (Notification.permission !== "granted")
          Notification.requestPermission();
      });

      function notifyMe(title, JSONbody) {

        if (Notification.permission !== "granted")
          Notification.requestPermission();
        else {
          var body = JSON.parse(JSONbody);

          var notification = new Notification(title, {
            icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
            body: JSONbody,
          });

          notification.onclick = function () {
            window.open(body.url);      
          };
        }
      }

    var wsUri = "ws://localhost:8080/demouser";
    var output;

    function init() {
      output = document.getElementById("output");
      testWebSocket();
    }

    function testWebSocket() {
      websocket = new WebSocket(wsUri);
      websocket.onopen = function(evt) { onOpen(evt) };
      websocket.onclose = function(evt) { onClose(evt) };
      websocket.onmessage = function(evt) { onMessage(evt) };
      websocket.onerror = function(evt) { onError(evt) };
    }

    function onOpen(evt) {
      writeToScreen('<strong style="color: green;">CONNECTED</storng>');
    }

    function onClose(evt) {
      writeToScreen('<strong style="color: red;">DISCONNECTED</strong>');

      // Reconnect back to the server
      testWebSocket();
    }

    function onMessage(evt) {
      writeToScreen(evt.data)
      notifyMe('Notification', evt.data);
    }

    function onError(evt) {
      writeToScreen('<strong style="color: red;">ERROR:</strong> ' + evt.data);
    }

    function writeToScreen(message) {
      var pre = document.createElement("p");
      pre.style.wordWrap = "break-word";
      pre.innerHTML = message;
      output.appendChild(pre);
    }

    function generateNotification() {
      var text = document.getElementById('input-text').value;

      $.ajax({
        url: 'http://localhost:8000/notifications/generate-notification/',
        data: JSON.stringify({message: text}),
        method: 'POST',
        dataType: 'json'
      })
    }

    document.addEventListener('DOMContentLoaded', init);

    </script>
  </head>

  <body>

    <h1>WebSocket Test</h1>

    <input id="input-text" type="text" />
    <button onclick="generateNotification()"> Send notification </button>

    <div id="output"></div>

  </body>
</html>