From 80e47447871529e49d8537f1b347493bfa27d00a Mon Sep 17 00:00:00 2001
From: Andres Jaan Tack <ajtack@twilio.com>
Date: Thu, 30 Nov 2017 15:37:17 +0200
Subject: [PATCH] Make connection problems visible in the UI.

---
 static/sync/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/static/sync/index.js b/static/sync/index.js
index d585191..45f28cd 100755
--- a/static/sync/index.js
+++ b/static/sync/index.js
@@ -19,6 +19,13 @@ $(function () {
   $.getJSON('/token', function (tokenResponse) {
     //Initialize the Sync client
     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 {
+        $message.html('Sync is live!');
+      }
+    });
 
     //Let's pop a message on the screen to show that Sync is ready
     $message.html('Sync initialized!');