zev/sdk-starter-python
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update SDK Versions for Chat and Video

Browse Source
This commit is contained in:
Jeffrey Linwood
2018-09-28 05:51:28 -05:00
parent afa9372657
commit 3ea1eaf402
11 changed files with 307 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/sync/index.html
View File

@@ -19,31 +19,30 @@
<h1>Tic-Tac-Twilio</h1>
<div id="board">
<div class="board-row">
<button type="button" data-row="0" data-col="0" disabled>&nbsp;</button>
<button type="button" data-row="0" data-col="1" disabled>&nbsp;</button>
<button type="button" data-row="0" data-col="2" disabled>&nbsp;</button>
</div>
<div class="board-row">
<button type="button" data-row="1" data-col="0" disabled>&nbsp;</button>
<button type="button" data-row="1" data-col="1" disabled>&nbsp;</button>
<button type="button" data-row="1" data-col="2" disabled>&nbsp;</button>
</div>
<div class="board-row">
<button type="button" data-row="2" data-col="0" disabled>&nbsp;</button>
<button type="button" data-row="2" data-col="1" disabled>&nbsp;</button>
<button type="button" data-row="2" data-col="2" disabled>&nbsp;</button>
</div>
<div class="board-row">
<button type="button" data-row="0" data-col="0" disabled>&nbsp;</button>
<button type="button" data-row="0" data-col="1" disabled>&nbsp;</button>
<button type="button" data-row="0" data-col="2" disabled>&nbsp;</button>
</div>
<div class="board-row">
<button type="button" data-row="1" data-col="0" disabled>&nbsp;</button>
<button type="button" data-row="1" data-col="1" disabled>&nbsp;</button>
<button type="button" data-row="1" data-col="2" disabled>&nbsp;</button>
</div>
<div class="board-row">
<button type="button" data-row="2" data-col="0" disabled>&nbsp;</button>
<button type="button" data-row="2" data-col="1" disabled>&nbsp;</button>
<button type="button" data-row="2" data-col="2" disabled>&nbsp;</button>
</div>
</div>
<div id="message">
Welcome! Initializing Sync...
Welcome! Initializing Sync...
</div>
<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>

54
static/sync/index.js
View File

@@ -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 <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
$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('&nbsp;', '');
}
}
@@ -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 === '' ? '&nbsp;' : cellValue);
$(this_cell).html(cellValue === '' ? '&nbsp;' : cellValue);
}
}
}
});
});