<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="MyApp">

  <div ng-controller="MyController">
    <h2>Chrome Desktop Notification Example</h2>
  
    <p>Everyone that is subscribed to the `com.example.notification.desktop` topic will get this message.  Please do not abuse this!</p>
    <textarea rows="4" cols="50" ng-model="message"></textarea>
    <button ng-click="sendMessage()">Send Message</button>
    
  </div>


</body>

</html>
var myApp = angular.module("MyApp", []);

myApp.controller("MyController", function($scope) {

  $scope.message = "Test Message From Plunker";

  var connection = new autobahn.Connection({
    url: 'ws://demo.thruway.ws:9090/',
    realm: 'com.example.notification'
  });

  connection.onopen = function(session) {

    $scope.sendMessage = function(){
        connection.session.publish('com.example.notification.desktop', [$scope.message], {}, {acknowledge: true}).then(
          function(res) {
            console.log("Result:", res);
          },
          function(error) {
            console.log('error', error);
          });
    }

  };

  connection.onclose = function(reason, details) {
    console.log('connection closed', reason, details);
  };

  connection.open();

});



/* Styles go here */