Update SDK Versions for Chat and Video

static/chat/index.html

@@ -19,7 +19,8 @@
     <input id="chat-input" type="text" placeholder="say anything" autofocus/>
   </section>
 
-  <script src="https://media.twiliocdn.com/sdk/js/chat/v1.0/twilio-chat.js"></script>
+  <script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
+  <script src="https://media.twiliocdn.com/sdk/js/chat/v3.0/twilio-chat.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="index.js"></script>
 </body>

static/chat/index.js

@@ -52,16 +52,18 @@ $(function() {
     + '<span class="me">' + username + '</span>', true);
 
     // Initialize the Chat client
-        chatClient = new Twilio.Chat.Client(data.token);
+    Twilio.Chat.Client.create(data.token).then(client => {
+      chatClient = client;
       chatClient.getSubscribedChannels().then(createOrJoinGeneralChannel);
     });
+  });
 
   function createOrJoinGeneralChannel() {
     // Get the general chat channel, which is where all the messages are
     // sent in this simple application
     print('Attempting to join "general" chat channel...');
-        var promise = chatClient.getChannelByUniqueName('general');
+    chatClient.getChannelByUniqueName('general')
-        promise.then(function(channel) {
+    .then(function(channel) {
       generalChannel = channel;
       console.log('Found general channel:');
       console.log(generalChannel);
@@ -77,6 +79,9 @@ $(function() {
         console.log(channel);
         generalChannel = channel;
         setupChannel();
+      }).catch(function(channel) {
+        console.log('Channel could not be created:');
+        console.log(channel);
       });
     });
   }
@@ -98,7 +103,7 @@ $(function() {
   // Send a new message to the general channel
   var $input = $('#chat-input');
   $input.on('keydown', function(e) {
-        if (e.keyCode == 13 && generalChannel) {
+    if (e.keyCode == 13) {
       generalChannel.sendMessage($input.val())
       $input.val('');
     }

static/config-check.js

@@ -1,61 +1,58 @@
 $(function() {
   $.get('/config', function(response) {
-        configureField(response, 'TWILIO_ACCOUNT_SID', 'twilioAccountSID', false);
+    Object.keys(fields).forEach(configureField(fields, response));
-        configureField(response, 'TWILIO_API_KEY', 'twilioAPIKey', false);
+    Object.keys(buttons).forEach(configureButton(buttons, response));
-        configureField(response, 'TWILIO_API_SECRET', 'twilioAPISecret', true);
-        configureField(response, 'TWILIO_NOTIFICATION_SERVICE_SID', 'twilioNotificationServiceSID', false);
-        configureField(response, 'TWILIO_CHAT_SERVICE_SID', 'twilioChatServiceSID', false);
-        configureField(response, 'TWILIO_SYNC_SERVICE_SID', 'twilioSyncServiceSID', false);
-
-        //configure individual product buttons
-        if (response.TWILIO_ACCOUNT_SID && response.TWILIO_ACCOUNT_SID != '' &&
-            response.TWILIO_API_KEY && response.TWILIO_API_KEY != '' && response.TWILIO_API_SECRET) {
-
-            $('#videoDemoButton').addClass('btn-success');
-
-            if (response.TWILIO_CHAT_SERVICE_SID && response.TWILIO_CHAT_SERVICE_SID != '') {
-                $('#chatDemoButton').addClass('btn-success');
-            } else {
-                $('#chatDemoButton').addClass('btn-danger');
-            }
-
-            if (response.TWILIO_SYNC_SERVICE_SID && response.TWILIO_SYNC_SERVICE_SID != '') {
-                $('#syncDemoButton').addClass('btn-success');
-            } else {
-                $('#syncDemoButton').addClass('btn-danger');
-            }
-
-            if (response.TWILIO_NOTIFICATION_SERVICE_SID && response.TWILIO_NOTIFICATION_SERVICE_SID != '') {
-                $('#notifyDemoButton').addClass('btn-success');
-            } else {
-                $('#notifyDemoButton').addClass('btn-danger');
-            }
-        }
-        else {
-            $('#videoDemoButton').addClass('btn-danger');
-            $('#chatDemoButton').addClass('btn-danger');
-            $('#syncDemoButton').addClass('btn-danger');
-            $('#notifyDemoButton').addClass('btn-danger');
-        }
   });
 
-    var configureField = function(response, keyName, elementId, masked) {
+  // Button Ids' and Config Keys
-        if (masked) {
+  var buttons = {
-            if (response[keyName]) {
+    videoDemoButton: 'TwilioApiSecret',
-                $('#' + elementId).html('Configured properly');
+    chatDemoButton: 'TwilioChatServiceSid',
-                $('#' + elementId).addClass('set');
+    syncDemoButton: 'TwilioSyncServiceSid',
-            } else {
+    notifyDemoButton: 'TwilioNotificationServiceSid'
-                $('#' + elementId).html('Not configured in .env');
-                $('#' + elementId).addClass('unset');
-            }
-        } else {
-            if (response[keyName] && response[keyName] != '') {
-                $('#' + elementId).html(response[keyName]);
-                $('#' + elementId).addClass('set');
-            } else {
-                $('#' + elementId).html('Not configured in .env');
-                $('#' + elementId).addClass('unset');
-            }
-        }
   };
+
+  // Field Ids' and Masked Flag
+  var fields = {
+    twilioAccountSid: false,
+    twilioApiKey: false,
+    twilioApiSecret: true,
+    twilioNotificationServiceSid: false,
+    twilioChatServiceSid: false,
+    twilioSyncServiceSid: false
+  };
+
+  var configureField = function(fields, response) {
+    var htmlContent = 'Not configured in .env';
+    var cssClass = 'unset';
+    return function(fieldId) {
+      var configKey = strToConfig(fieldId);
+      var isMasked = fields[fieldId];
+      if (!!response[configKey]) {
+        htmlContent = isMasked ? 'Configured properly' : response[configKey];
+        cssClass = 'set';
+      }
+      $('#' + fieldId).html(htmlContent).addClass(cssClass);
+    };
+  };
+
+  var configureButton = function(buttons, response) {
+    var hasBasicConfig = !!response.TWILIO_ACCOUNT_SID &&
+                         !!response.TWILIO_API_KEY &&
+                         !!response.TWILIO_API_SECRET;
+    return function(buttonId) {
+      var configKey = strToConfig(buttons[buttonId]);
+      var cssClass = hasBasicConfig && !!response[configKey]
+        ? 'btn-success'
+        : 'btn-danger';
+      $('#' + buttonId).addClass(cssClass);
+    };
+  };
+
+  var strToConfig = function(string) {
+    return string
+      .split(/(?=[A-Z])/)
+      .map(function(e) { return e.toUpperCase(); })
+      .join('_');
+  }
 });

static/index.html

@@ -3,57 +3,62 @@
 <head>
   <title>Twilio Server Starter Kit</title>
 
-        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" crossorigin="anonymous"
+    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u">
 
   <link rel="stylesheet" href="index.css">
-
 </head>
 <body>
   <div class="container">
     <h1>Twilio Server Starter Kit Environment Setup</h1>
+
     <h2>Account Information</h2>
     <table class="table table-striped">
       <tr>
         <td class="config-key">TWILIO_ACCOUNT_SID</td>
-                    <td class="config-value" id="twilioAccountSID"></td>
+        <td class="config-value" id="twilioAccountSid"></td>
       </tr>
       <tr>
         <td class="config-key">TWILIO_API_KEY</td>
-                    <td class="config-value" id="twilioAPIKey"></td>
+        <td class="config-value" id="twilioApiKey"></td>
       </tr>
       <tr>
         <td class="config-key">TWILIO_API_SECRET</td>
-                    <td class="config-value" id="twilioAPISecret"></td>
+        <td class="config-value" id="twilioApiSecret"></td>
       </tr>
     </table>
+
     <h2>Products</h2>
     <table class="table table-striped">
       <tr>
         <td class="config-product">Notify</td>
         <td class="config-key">TWILIO_NOTIFICATION_SERVICE_SID</td>
-                    <td class="config-value" id="twilioNotificationServiceSID"></td>
+        <td class="config-value" id="twilioNotificationServiceSid"></td>
       </tr>
       <tr>
         <td class="config-product">Chat</td>
         <td class="config-key">TWILIO_CHAT_SERVICE_SID</td>
-                    <td class="config-value" id="twilioChatServiceSID"></td>
+        <td class="config-value" id="twilioChatServiceSid"></td>
       </tr>
       <tr>
         <td class="config-product">Sync</td>
         <td class="config-key">TWILIO_SYNC_SERVICE_SID</td>
-                    <td class="config-value" id="twilioSyncServiceSID"></td>
+        <td class="config-value" id="twilioSyncServiceSid"></td>
       </tr>
     </table>
 
     <h1>Demos</h1>
-            <a id="videoDemoButton" class="btn btn-lg btn-success" href="/video/">Video</a>
+    <a id="videoDemoButton" class="btn btn-lg" href="/video/">Video</a>
     <a id="syncDemoButton" class="btn btn-lg"  href="/sync/">Sync</a>
     <a id="notifyDemoButton" class="btn btn-lg" href="/notify/">Notify</a>
     <a id="chatDemoButton" class="btn btn-lg" href="/chat/">Chat</a>
-    </div> <!-- container -->
+  </div>
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script crossorigin="anonymous"
-    <script src="/config-check.js"></script>
+    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
+  <script src="config-check.js"></script>
 </body>
 </script>

static/notify/facebook_messenger.html

@@ -0,0 +1,34 @@
+<body>
+    <script>
+      window.fbAsyncInit = function() {
+        FB.init({
+          appId: "<YOUR-APP-ID>",
+          xfbml: true,
+          cookie: true,
+          version: "v2.8"
+        });
+  
+        FB.Event.subscribe('send_to_messenger', function(e) {
+          console.log("Plug-in reported event: " + e.event);
+        });
+  
+      };
+  
+      (function(d, s, id){
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) { return; }
+        js = d.createElement(s); js.id = id;
+        js.src = "https://connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+      }(document, 'script', 'facebook-jssdk'));
+  
+  
+    </script>
+    <div class="fb-send-to-messenger"
+      messenger_app_id="<YOUR-APP-ID>"
+      page_id="<YOUR-PAGE-ID>"
+      color="blue"
+      size="standard">
+    </div>
+  
+  </body>

static/notify/index.html

@@ -8,10 +8,8 @@
 </head>
 <body>
   <header>
-    <a href="https://www.twilio.com/docs/api/notifications"
+    <a href="https://www.twilio.com/docs/api/notifications" target="_blank">
-       target="_blank">
+      Read the Twilio Notify guide<i class="fa fa-fw fa-external-link"></i>
-        Read the Twilio Notify guide
-        <i class="fa fa-fw fa-external-link"></i>
     </a>
   </header>
 
@@ -22,14 +20,11 @@
     <p/>
     <input type="submit" id="sendNotificationButton" value="Send Notification"/>
 
-    <div id="message">
+    <div id="message">Welcome to Notify!</div>
-        Welcome to Notify!
-    </div>
 
     <p>After you set up a notification binding, go ahead and send a notification to that identity!</p>
   </section>
 
-
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="notify.js"></script>
 </body>

static/notify/notify.js

@@ -1,9 +1,8 @@
 $(function() {
-
   $('#sendNotificationButton').on('click', function() {
     $.post('/send-notification', {
       identity: $('#identityInput').val(),
-           body: "Hello, World!"
+      body: "Hello, world!"
     }, function(response) {
       $('#identityInput').val('');
       $('#message').html(response.message);

static/sync/index.html

@@ -43,7 +43,6 @@
     <p>Open this page in a few tabs to test!</p>
   </section>
 
-
   <script src="//media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="index.js"></script>

static/sync/index.js

@@ -8,53 +8,57 @@ $(function () {
   //Our interface to the Sync service
   var syncClient;
 
-  //Get an access token for the current user, passing a device ID
+  // Every browser Sync client relies on FPA tokens to authenticate and authorize it
-  //In browser-based apps, every tab is like its own unique device
+  // for access to your Sync data.
-  //synchronizing state -- so we'll use a random UUID to identify
+  //
-  //this tab.
+  // In this quickstart, we're using our own token generator. You can generate a token
+  // in any backend language that Twilio supports, or generate a Twilio Function so
+  // Twilio can host it for you. See the docs for more details.
+  //
   $.getJSON('/token', function (tokenResponse) {
-    //Initialize the Sync client
+
+    // Once we have the token, we can initialize the Sync client and start subscribing
+    // to data. The client will initialize asynchronously while we load the rest of
+    // the user interface.
+    //
     syncClient = new Twilio.Sync.Client(tokenResponse.token, { logLevel: 'info' });
     syncClient.on('connectionStateChanged', function(state) {
       if (state != 'connected') {
         $message.html('Sync is not live (websocket connection <span style="color: red">' + state + '</span>)…');
       } else {
+        // Now that we're connected, lets light up our board and play!
+        $buttons.attr('disabled', false);
         $message.html('Sync is live!');
       }
     });
 
-    //Let's pop a message on the screen to show that Sync is ready
+    // Let's pop a message on the screen to show that Sync is working
-    $message.html('Sync initialized!');
+    $message.html('Loading board data…');
 
-    //Now that Sync is active, lets enable our game board
+    // Our game state is stored in a Sync document. Here, we'll attach to that document
-    $buttons.attr('disabled', false);
+    // (or create it, if it doesn't exist) and connect the necessary event handlers.
-
+    // 
-    //This code will create and/or open a Sync document
-    //Note the use of promises
     syncClient.document('SyncGame').then(function(syncDoc) {
-      //Initialize game board UI to current state (if it exists)
       var data = syncDoc.value;
       if (data.board) {
         updateUserInterface(data);
       }
 
-      //Let's subscribe to changes on this document, so when something
+      // Any time the board changes, we want to show the new state. The 'updated'
-      //changes on this document, we can trigger our UI to update
+      // event is for this.
       syncDoc.on('updated', function(event) {
         console.debug("Board was updated", event.isLocal? "locally." : "by the other guy.");
         updateUserInterface(event.value);
       });
 
-      //Whenever a board button is clicked, update that document.
+      // Let's make our buttons control the game state in Sync…
       $buttons.on('click', function (e) {
         // Toggle the value: X, O, or empty
         toggleCellValue($(e.target));
 
-        //Send updated document to Sync
+        // Send updated document to Sync. This will trigger "updated" events for all players.
-        //This should trigger "updated" events on other clients
         var data = readGameBoardFromUserInterface();
         syncDoc.set(data);
-
       });
     });
 
@@ -96,12 +100,10 @@ $(function () {
   function updateUserInterface(data) {
     for (var row = 0; row < 3; row++) {
       for (var col = 0; col < 3; col++) {
-        var selector = '[data-row="' + row + '"]' +
+        var this_cell = '[data-row="' + row + '"]' + '[data-col="' + col + '"]';
-          '[data-col="' + col + '"]';
         var cellValue = data.board[row][col];
-        $(selector).html(cellValue === '' ? '&nbsp;' : cellValue);
+        $(this_cell).html(cellValue === '' ? '&nbsp;' : cellValue);
       }
     }
   }
-
 });

static/video/index.html

@@ -12,17 +12,19 @@
       <div id="local-media"></div>
       <button id="button-preview">Preview My Camera</button>
     </div>
+
     <div id="room-controls">
       <p class="instructions">Room Name:</p>
       <input id="room-name" type="text" placeholder="Enter a room name" />
       <button id="button-join">Join Room</button>
       <button id="button-leave">Leave Room</button>
     </div>
+
     <div id="log"></div>
   </div>
 
   <script src="//media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
-  <script src="//media.twiliocdn.com/sdk/js/video/releases/1.0.0/twilio-video.js"></script>
+  <script src="//media.twiliocdn.com/sdk/js/video/releases/1.14.0/twilio-video.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="quickstart.js"></script>
 </body>