github.com/philippseith/signalr@v0.6.3/chatsample/public/index.html (about)

     1  <html>
     2  
     3  <body>
     4      <input type="text" id="message" />
     5      <input type="button" value="Broadcast" id="broadcast" />
     6      <input type="button" value="Echo" id="echo" />
     7      <input type="button" value="Panic" id="panic" />
     8      <input type="button" value="RequestTuple" id="requesttuple" />
     9      <input type="button" value="RequestAsync" id="requestasync" />
    10      <input type="button" value="Stream" id="stream" />
    11      <input type="button" value="Stop Stream" id="stopstream" />
    12      <input type="button" value="Upstream" id="upstream" />
    13      <input type="button" value="Stop/Start Client Connection" id="stop" />
    14      <input type="button" value="Abort Server Connection" id="abort" />
    15      <ul id="messages">
    16      </ul>
    17  
    18      <script src="js/signalr.js"></script>
    19      <script>
    20          (async function () {
    21              var subscription;
    22              var connection = new signalR.HubConnectionBuilder()
    23                  .withUrl('/chat')
    24                  .build();
    25  
    26              document.getElementById('broadcast').addEventListener('click', () => {
    27                  var val = document.getElementById('message').value;
    28                  if (val) {
    29                      connection.invoke('broadcast', val);
    30                  }
    31              });
    32              document.getElementById('echo').addEventListener('click', () => {
    33                  var val = document.getElementById('message').value;
    34                  if (val) {
    35                      connection.invoke('echo', val);
    36                  }
    37              });
    38              document.getElementById('panic').addEventListener('click', () => {
    39                  connection.invoke('panic').catch((err) =>{
    40                      var li = document.createElement('li');
    41                      li.innerText = err;
    42                      document.getElementById('messages').appendChild(li);
    43                  });
    44              });
    45  
    46              document.getElementById('requestasync').addEventListener('click', () => {
    47                  var val = document.getElementById('message').value;
    48                  if (val) {
    49                      connection.invoke('requestasync', val).then(val => {
    50                          var li = document.createElement('li');
    51                          li.innerText = 'received finally ' + JSON.stringify(val);
    52                          document.getElementById('messages').appendChild(li);
    53                      })
    54                  }
    55              });
    56  
    57              document.getElementById('requesttuple').addEventListener('click', () => {
    58                  var val = document.getElementById('message').value;
    59                  if (val) {
    60                      connection.invoke('requesttuple', val).then(val => {
    61                          var li = document.createElement('li');
    62                          li.innerText = 'received ' + JSON.stringify(val);
    63                          document.getElementById('messages').appendChild(li);
    64                      })
    65                  }
    66              });
    67              document.getElementById('stream').addEventListener('click', () => {
    68                  subscription = connection.stream('datestream').subscribe({
    69                      next: (item) => {
    70                          var li = document.createElement('li');
    71                          li.innerText = 'item ' + item;
    72                          document.getElementById('messages').appendChild(li);
    73                      },
    74                      complete: () => {
    75                          var li = document.createElement('li');
    76                          li.innerText = 'complete';
    77                          document.getElementById('messages').appendChild(li);
    78                      }
    79                  })
    80              });
    81              document.getElementById('stopstream').addEventListener('click', () => {
    82                  if (subscription) {
    83                      subscription.dispose()
    84                  }
    85              });
    86              document.getElementById('upstream').addEventListener('click', () => {
    87                  const subject1 = new signalR.Subject();
    88                  const subject2 = new signalR.Subject();
    89                  connection.send("uploadstream", subject1, 3, subject2);
    90                  var iteration1 = 0;
    91                  const intervalHandle1 = setInterval(() => {
    92                      iteration1++;
    93                      subject1.next(iteration1);
    94                      if (iteration1 === 5) {
    95                          clearInterval(intervalHandle1);
    96                          subject1.complete();
    97                      }
    98                  }, 500);
    99                  var iteration2 = 0;
   100                  const intervalHandle2 = setInterval(() => {
   101                      iteration2++;
   102                      subject2.next(iteration2);
   103                      if (iteration2 === 10) {
   104                          clearInterval(intervalHandle2);
   105                          subject2.complete();
   106                      }
   107                  }, 100);
   108              });
   109              document.getElementById('stop').addEventListener('click', () => {
   110                  connection.stop().then(() => {
   111                      connection.start();
   112                  });
   113              });
   114              document.getElementById('abort').addEventListener('click', () => {
   115                  connection.send('abort')
   116              });
   117              connection.on('receive', message => {
   118                  var li = document.createElement('li');
   119                  li.innerText = 'sent ' + message;
   120                  document.getElementById('messages').appendChild(li);
   121              });
   122  
   123              connection.start();
   124          })();
   125      </script>
   126  </body>
   127  
   128  </html>