From 3ea1eaf4022fa0afc9bfb0dc3ec85a3fee80e7d0 Mon Sep 17 00:00:00 2001 From: Jeffrey Linwood Date: Fri, 28 Sep 2018 05:51:28 -0500 Subject: [PATCH] Update SDK Versions for Chat and Video --- static/chat/index.html | 7 +- static/chat/index.js | 185 +++++++++++++------------- static/config-check.js | 109 ++++++++------- static/index.html | 107 ++++++++------- static/notify/facebook_messenger.html | 34 +++++ static/notify/index.html | 19 +-- static/notify/notify.js | 19 ++- static/sync/index.html | 33 +++-- static/sync/index.js | 54 ++++---- static/video/index.html | 4 +- static/video/quickstart.js | 4 +- 11 files changed, 307 insertions(+), 268 deletions(-) create mode 100644 static/notify/facebook_messenger.html diff --git a/static/chat/index.html b/static/chat/index.html index fa5ac33..9acc7ba 100755 --- a/static/chat/index.html +++ b/static/chat/index.html @@ -8,10 +8,10 @@
- Read the getting started guide - +
@@ -19,7 +19,8 @@
- + + diff --git a/static/chat/index.js b/static/chat/index.js index 6e4610e..0844021 100755 --- a/static/chat/index.js +++ b/static/chat/index.js @@ -1,106 +1,111 @@ $(function() { - // Get handle to the chat div - var $chatWindow = $('#messages'); + // Get handle to the chat div + var $chatWindow = $('#messages'); - // Our interface to the Chat service - var chatClient; + // Our interface to the Chat service + var chatClient; - // A handle to the "general" chat channel - the one and only channel we - // will have in this sample app - var generalChannel; + // A handle to the "general" chat channel - the one and only channel we + // will have in this sample app + var generalChannel; - // The server will assign the client a random username - store that value - // here - var username; + // The server will assign the client a random username - store that value + // here + var username; - // Helper function to print info messages to the chat window - function print(infoMessage, asHtml) { - var $msg = $('
'); - if (asHtml) { - $msg.html(infoMessage); - } else { - $msg.text(infoMessage); - } - $chatWindow.append($msg); + // Helper function to print info messages to the chat window + function print(infoMessage, asHtml) { + var $msg = $('
'); + if (asHtml) { + $msg.html(infoMessage); + } else { + $msg.text(infoMessage); } + $chatWindow.append($msg); + } - // Helper function to print chat message to the chat window - function printMessage(fromUser, message) { - var $user = $('').text(fromUser + ':'); - if (fromUser === username) { - $user.addClass('me'); - } - var $message = $('').text(message); - var $container = $('
'); - $container.append($user).append($message); - $chatWindow.append($container); - $chatWindow.scrollTop($chatWindow[0].scrollHeight); + // Helper function to print chat message to the chat window + function printMessage(fromUser, message) { + var $user = $('').text(fromUser + ':'); + if (fromUser === username) { + $user.addClass('me'); } + var $message = $('').text(message); + var $container = $('
'); + $container.append($user).append($message); + $chatWindow.append($container); + $chatWindow.scrollTop($chatWindow[0].scrollHeight); + } + // Alert the user they have been assigned a random username + print('Logging in...'); + + // Get an access token for the current user, passing a username (identity) + // and a device ID - for browser-based apps, we'll always just use the + // value "browser" + $.getJSON('/token', { + device: 'browser' + }, function(data) { // Alert the user they have been assigned a random username - print('Logging in...'); + username = data.identity; + print('You have been assigned a random username of: ' + + '' + username + '', true); - // Get an access token for the current user, passing a username (identity) - // and a device ID - for browser-based apps, we'll always just use the - // value "browser" - $.getJSON('/token', { - device: 'browser' - }, function(data) { - // Alert the user they have been assigned a random username - username = data.identity; - print('You have been assigned a random username of: ' - + '' + username + '', true); + // Initialize the Chat client + Twilio.Chat.Client.create(data.token).then(client => { + chatClient = client; + chatClient.getSubscribedChannels().then(createOrJoinGeneralChannel); + }); + }); - // Initialize the Chat client - chatClient = new Twilio.Chat.Client(data.token); - 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...'); + chatClient.getChannelByUniqueName('general') + .then(function(channel) { + generalChannel = channel; + console.log('Found general channel:'); + console.log(generalChannel); + setupChannel(); + }).catch(function() { + // If it doesn't exist, let's create it + console.log('Creating general channel'); + chatClient.createChannel({ + uniqueName: 'general', + friendlyName: 'General Chat Channel' + }).then(function(channel) { + console.log('Created general channel:'); + console.log(channel); + generalChannel = channel; + setupChannel(); + }).catch(function(channel) { + console.log('Channel could not be created:'); + console.log(channel); + }); + }); + } + + // Set up channel after it has been found + function setupChannel() { + // Join the general channel + generalChannel.join().then(function(channel) { + print('Joined channel as ' + + '' + username + '.', true); }); - 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'); - promise.then(function(channel) { - generalChannel = channel; - console.log('Found general channel:'); - console.log(generalChannel); - setupChannel(); - }).catch(function() { - // If it doesn't exist, let's create it - console.log('Creating general channel'); - chatClient.createChannel({ - uniqueName: 'general', - friendlyName: 'General Chat Channel' - }).then(function(channel) { - console.log('Created general channel:'); - console.log(channel); - generalChannel = channel; - setupChannel(); - }); - }); - } - - // Set up channel after it has been found - function setupChannel() { - // Join the general channel - generalChannel.join().then(function(channel) { - print('Joined channel as ' - + '' + username + '.', true); - }); - - // Listen for new messages sent to the channel - generalChannel.on('messageAdded', function(message) { - printMessage(message.author, message.body); - }); - } - - // Send a new message to the general channel - var $input = $('#chat-input'); - $input.on('keydown', function(e) { - if (e.keyCode == 13 && generalChannel) { - generalChannel.sendMessage($input.val()) - $input.val(''); - } + // Listen for new messages sent to the channel + generalChannel.on('messageAdded', function(message) { + printMessage(message.author, message.body); }); + } + + // Send a new message to the general channel + var $input = $('#chat-input'); + $input.on('keydown', function(e) { + if (e.keyCode == 13) { + generalChannel.sendMessage($input.val()) + $input.val(''); + } + }); }); diff --git a/static/config-check.js b/static/config-check.js index 01a81f5..04fa045 100644 --- a/static/config-check.js +++ b/static/config-check.js @@ -1,61 +1,58 @@ $(function() { - $.get('/config', function(response) { - configureField(response, 'TWILIO_ACCOUNT_SID', 'twilioAccountSID', false); - configureField(response, 'TWILIO_API_KEY', 'twilioAPIKey', false); - 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); + $.get('/config', function(response) { + Object.keys(fields).forEach(configureField(fields, response)); + Object.keys(buttons).forEach(configureButton(buttons, response)); + }); - //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) { + // Button Ids' and Config Keys + var buttons = { + videoDemoButton: 'TwilioApiSecret', + chatDemoButton: 'TwilioChatServiceSid', + syncDemoButton: 'TwilioSyncServiceSid', + notifyDemoButton: 'TwilioNotificationServiceSid' + }; - $('#videoDemoButton').addClass('btn-success'); + // Field Ids' and Masked Flag + var fields = { + twilioAccountSid: false, + twilioApiKey: false, + twilioApiSecret: true, + twilioNotificationServiceSid: false, + twilioChatServiceSid: false, + twilioSyncServiceSid: false + }; - 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) { - if (masked) { - if (response[keyName]) { - $('#' + elementId).html('Configured properly'); - $('#' + elementId).addClass('set'); - } else { - $('#' + 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'); - } - } + 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); }; -}); \ No newline at end of file + }; + + 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('_'); + } +}); diff --git a/static/index.html b/static/index.html index 66c98d3..d46f54b 100644 --- a/static/index.html +++ b/static/index.html @@ -1,59 +1,64 @@ - - Twilio Server Starter Kit + + Twilio Server Starter Kit - + - + + + +
+

Twilio Server Starter Kit Environment Setup

- - -
-

Twilio Server Starter Kit Environment Setup

-

Account Information

- - - - - - - - - - - - - -
TWILIO_ACCOUNT_SID
TWILIO_API_KEY
TWILIO_API_SECRET
-

Products

- - - - - - - - - - - - - - - - -
NotifyTWILIO_NOTIFICATION_SERVICE_SID
ChatTWILIO_CHAT_SERVICE_SID
SyncTWILIO_SYNC_SERVICE_SID
+

Account Information

+ + + + + + + + + + + + + +
TWILIO_ACCOUNT_SID
TWILIO_API_KEY
TWILIO_API_SECRET
-

Demos

- Video - Sync - Notify - Chat -
+

Products

+ + + + + + + + + + + + + + + + +
NotifyTWILIO_NOTIFICATION_SERVICE_SID
ChatTWILIO_CHAT_SERVICE_SID
SyncTWILIO_SYNC_SERVICE_SID
- - - - +

Demos

+ Video + Sync + Notify + Chat +
+ + + + + diff --git a/static/notify/facebook_messenger.html b/static/notify/facebook_messenger.html new file mode 100644 index 0000000..7aa6d61 --- /dev/null +++ b/static/notify/facebook_messenger.html @@ -0,0 +1,34 @@ + + +
+
+ + \ No newline at end of file diff --git a/static/notify/index.html b/static/notify/index.html index bf5bdc5..bb3a42d 100644 --- a/static/notify/index.html +++ b/static/notify/index.html @@ -1,17 +1,15 @@ - Hello App! - Notify Quickstart - - - + Hello App! - Notify Quickstart + + +
- - Read the Twilio Notify guide - + + Read the Twilio Notify guide
@@ -22,14 +20,11 @@

-

- Welcome to Notify! -
+
Welcome to Notify!

After you set up a notification binding, go ahead and send a notification to that identity!

- diff --git a/static/notify/notify.js b/static/notify/notify.js index 2829b02..b548f0e 100644 --- a/static/notify/notify.js +++ b/static/notify/notify.js @@ -1,13 +1,12 @@ $(function() { - - $('#sendNotificationButton').on('click', function() { - $.post('/send-notification', { - identity: $('#identityInput').val(), - body: "Hello, World!" - }, function(response) { - $('#identityInput').val(''); - $('#message').html(response.message); - console.log(response); - }); + $('#sendNotificationButton').on('click', function() { + $.post('/send-notification', { + identity: $('#identityInput').val(), + body: "Hello, world!" + }, function(response) { + $('#identityInput').val(''); + $('#message').html(response.message); + console.log(response); }); + }); }); diff --git a/static/sync/index.html b/static/sync/index.html index 178f108..722176c 100755 --- a/static/sync/index.html +++ b/static/sync/index.html @@ -19,31 +19,30 @@

Tic-Tac-Twilio

-
- - - -
-
- - - -
-
- - - -
+
+ + + +
+
+ + + +
+
+ + + +
- Welcome! Initializing Sync... + Welcome! Initializing Sync...

Open this page in a few tabs to test!

- diff --git a/static/sync/index.js b/static/sync/index.js index d9b2034..766b9f1 100755 --- a/static/sync/index.js +++ b/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 - //In browser-based apps, every tab is like its own unique device - //synchronizing state -- so we'll use a random UUID to identify - //this tab. + // Every browser Sync client relies on FPA tokens to authenticate and authorize it + // for access to your Sync data. + // + // 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 ' + state + ')…'); } 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 - $message.html('Sync initialized!'); + // Let's pop a message on the screen to show that Sync is working + $message.html('Loading board data…'); - //Now that Sync is active, lets enable our game board - $buttons.attr('disabled', false); - - //This code will create and/or open a Sync document - //Note the use of promises + // Our game state is stored in a Sync document. Here, we'll attach to that document + // (or create it, if it doesn't exist) and connect the necessary event handlers. + // 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 - //changes on this document, we can trigger our UI to update + // Any time the board changes, we want to show the new state. The 'updated' + // 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 + // Toggle the value: X, O, or empty toggleCellValue($(e.target)); - //Send updated document to Sync - //This should trigger "updated" events on other clients + // Send updated document to Sync. This will trigger "updated" events for all players. var data = readGameBoardFromUserInterface(); syncDoc.set(data); - }); }); @@ -84,7 +88,7 @@ $(function () { for (var row = 0; row < 3; row++) { for (var col = 0; col < 3; col++) { var selector = '[data-row="' + row + '"]' + - '[data-col="' + col + '"]'; + '[data-col="' + col + '"]'; board[row][col] = $(selector).html().replace(' ', ''); } } @@ -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 + '"]' + - '[data-col="' + col + '"]'; + var this_cell = '[data-row="' + row + '"]' + '[data-col="' + col + '"]'; var cellValue = data.board[row][col]; - $(selector).html(cellValue === '' ? ' ' : cellValue); + $(this_cell).html(cellValue === '' ? ' ' : cellValue); } } } - -}); \ No newline at end of file +}); diff --git a/static/video/index.html b/static/video/index.html index 65d81c6..602e825 100755 --- a/static/video/index.html +++ b/static/video/index.html @@ -12,17 +12,19 @@
+

Room Name:

+
- + diff --git a/static/video/quickstart.js b/static/video/quickstart.js index 8fb03de..0f1acbd 100755 --- a/static/video/quickstart.js +++ b/static/video/quickstart.js @@ -124,8 +124,8 @@ function roomJoined(room) { // Local video preview document.getElementById('button-preview').onclick = function() { var localTracksPromise = previewTracks - ? Promise.resolve(previewTracks) - : Twilio.Video.createLocalTracks(); + ? Promise.resolve(previewTracks) + : Twilio.Video.createLocalTracks(); localTracksPromise.then(function(tracks) { previewTracks = tracks;