Working Demonstration of the JavaScript Library

The code examples below are the source of a working demo that shows the JSON data emitted by the three types of subscriptions.

index.html

  • <!DOCTYPE html>
  • <html>
  • <head>
    • <meta charset="utf-8">
    • <meta http-equiv="X-UA-Compatible" content="IE=edge">
    • <title>Bomgar Real-Time State API Demo</title>
    • <meta name="description" content="">
    • <meta name="viewport" content="width=device-width">
    • <link rel="stylesheet" href="styles.css">
  • </head>
  • <body>
  •  
  • <div id="container">
    • <div class="row">
      • <section id="cust">
        • <h2>Customer Messages
          • <span class="subtitle">.tableInserts('customer_client'), .tableUpdates('customer_client'), .tableDeletions('customer_client')
        • </h2>
        • <div class="messages"></div>
      • </section>
      •  
      • <section id="rep">
        • <h2>Representative Messages
          • <span class="subtitle">.changesForTable('representative')</span>
        • </h2>
        • <div class="messages"></div>
      • </section>
    • </div>
    •  
    • <div class="row">
      • <section id="all">
        • <h2>Raw Messages
          • <span class="subtitle">.subscribe(onNext, onError, onCompleted)</span>
        • </h2>
        • <div class="messages"></div>
      • </section>
    • </div>
  • </div>
  •  
  • <script src="https://[YOUR APPLIANCE HOSTNAME HERE]/api/state.js"></script>
  • <script type="text/javascript">
    • var repSection = document.getElementById('rep');
    • var custSection = document.getElementById('cust');
    • var allSection = document.getElementById('all');
    •  
    • var messages$ = bomgarState({
      • host: '[YOUR APPLIANCE HOSTNAME HERE]',
      • port: 443,
      • company: '[YOUR COMPANY NAME HERE]',
      • username: '[YOUR USERNAME HERE]',
      • password: '[YOUR PASSWORD HERE]',
      • tables: 'all' // or an array like ['customer_client', 'representative']
    • });
    •  
    • var subscription = messages$.subscribe(
      • function onNext(message) {
        • appendMessage('Message:', message, allSection);
      • },
      • function onError(error) {
        • appendMessage('An error occurred:', error, allSection, 'red');
        • console.error('An error occurred: %s', error);
      • },
      • function onCompleted() {
        • appendMessage('The End', 'Connection closed.', allSection, '#f50');
        • console.warn('Connection closed. No more messages will be received.');
      • }
    • );
    •  
    • messages$.changesForTable('representative')
      • .subscribe(function onRepChange(message) {
        • appendMessage('Change: ', message, repSection);
      • });
    •  
    • messages$.tableInserts('customer_client')
      • .subscribe(function onCustInsert(message) {
        • appendMessage('Insert: ', message, custSection, 'green');
      • });
    •  
    • messages$.tableUpdates('customer_client')
      • .subscribe(function onCustUpdate(message) {
        • appendMessage('Update: ', message, custSection, 'blue');
      • });
    •  
    • messages$.tableDeletions('customer_client')
      • .subscribe(function onCustDeletion(message) {
        • appendMessage('Deletion: ', message, custSection, 'red');
      • });
    •  
    • function appendMessage(label, message, section, color) {
      • var messages = section.querySelector('.messages');
      • var div = document.createElement('div');
      • var hr = document.createElement('hr');
      • var h4 = document.createElement('h4');
      • h4.textContent = label;
      •  
      • var p = document.createElement('p');
      • p.style.color = color || 'black';
      • p.textContent = JSON.stringify(message, null, '\t');
      •  
      • div.appendChild(h4);
      • div.appendChild(p);
      • messages.appendChild(hr);
      • messages.appendChild(div);
      • setTimeout(function() {
        • messages.scrollTop = messages.scrollHeight;
      • }, 250);
    • }
  • </script>
  • </body>
  • </html>

 

styles.css

  • * {
    • box-sizing: border-box;
  • }
  •  
  • html, body {
    • height: 100%;
    • position: relative;
    • min-height: 100%;
  • }
  •  
  • body {
    • font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    • display: flex;
    • flex-direction: column;
    • margin: 0;
    • padding: 0;
    • overflow: hidden;
  • }
  •  
  • #container {
    • display: flex;
    • flex: 1 1 100%;
    • max-height: 100%;
    • max-width: 100%;
    • flex-direction: column;
  • }
  •  
  • .row {
    • display: flex;
    • flex-direction: row;
    • flex: 1 1 1px;
    • position: relative;
    • min-height: 0;
    • max-height: 100%;
    • max-width: 100%;
    • width: 100%;
    • overflow: hidden;
  • }
  •  
  • section {
    • box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    • border: 1px solid #a0a0a0;
    • background-color: #f5f5f5;
    • padding: 19px;
    •  
    • display: flex;
    • flex-direction: column;
    • flex: 1 1 0%;
    • min-width: 0;
    • max-width: 100%;
    • position: relative;
  • }
  •  
  • section h2 {
    • margin: 0 0 19px 0;
    • text-align: right;
  • }
  •  
  • section h2 .subtitle {
    • display: block;
    • font-size: 12px;
    • color: #828282;
  • }
  •  
  • section hr {
    • border-color: #E0E0E0;
    • border-style: solid;
  • }
  •  
  • section .messages {
    • overflow: auto;
  • }
  •  
  • section .messages hr:first-of-type {
    • display: none;
  • }
  •  
  • p {
    • tab-size: 2;
    • font-family: monospace;
    • white-space: pre-wrap;
  • }