Merge pull request #32 from ajtack/update-to-sync-0.7

Update to Sync SDK v0.7
This commit is contained in:
Wellington Mendoza
2017-11-30 09:48:06 -05:00
committed by GitHub
2 changed files with 18 additions and 25 deletions

View File

@@ -44,7 +44,7 @@
</section> </section>
<script src="//media.twiliocdn.com/sdk/js/sync/v0.5/twilio-sync.min.js"></script> <script src="//media.twiliocdn.com/sdk/js/sync/v0.7/twilio-sync.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

View File

@@ -8,10 +8,6 @@ $(function () {
//Our interface to the Sync service //Our interface to the Sync service
var syncClient; var syncClient;
//We're going to use a single Sync document, our simplest
//synchronisation primitive, for this demo
var syncDoc;
//Get an access token for the current user, passing a device ID //Get an access token for the current user, passing a device ID
//In browser-based apps, every tab is like its own unique device //In browser-based apps, every tab is like its own unique device
//synchronizing state -- so we'll use a random UUID to identify //synchronizing state -- so we'll use a random UUID to identify
@@ -28,37 +24,34 @@ $(function () {
//This code will create and/or open a Sync document //This code will create and/or open a Sync document
//Note the use of promises //Note the use of promises
syncClient.document('SyncGame').then(function(doc) { syncClient.document('SyncGame').then(function(syncDoc) {
//Lets store it in our global variable
syncDoc = doc;
//Initialize game board UI to current state (if it exists) //Initialize game board UI to current state (if it exists)
var data = syncDoc.get(); var data = syncDoc.value;
if (data.board) { if (data.board) {
updateUserInterface(data); updateUserInterface(data);
} }
//Let's subscribe to changes on this document, so when something //Let's subscribe to changes on this document, so when something
//changes on this document, we can trigger our UI to update //changes on this document, we can trigger our UI to update
syncDoc.on('updated', updateUserInterface); 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.
//Whenever a board button is clicked:
$buttons.on('click', function (e) { $buttons.on('click', function (e) {
//Toggle the value: X, O, or empty //Toggle the value: X, O, or empty
toggleCellValue($(e.target)); toggleCellValue($(e.target));
//Update the document
var data = readGameBoardFromUserInterface();
//Send updated document to Sync //Send updated document to Sync
//This should trigger "updated" events on other clients //This should trigger "updated" events on other clients
var data = readGameBoardFromUserInterface();
syncDoc.set(data); syncDoc.set(data);
}); });
});
});
//Toggle the value: X, O, or empty (&nbsp; for UI) //Toggle the value: X, O, or empty (&nbsp; for UI)
function toggleCellValue($cell) { function toggleCellValue($cell) {