Migrate from IP Messaging to Chat

This commit is contained in:
Jeffrey Linwood
2016-12-02 12:42:38 -06:00
parent 19d1b4ec9b
commit ec8bae371e
8 changed files with 36 additions and 37 deletions

View File

@@ -1,14 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Twilio IP Messaging Quickstart</title>
<title>Twilio Chat Quickstart</title>
<link rel="shortcut icon" href="//www.twilio.com/marketing/bundles/marketing/img/favicons/favicon.ico">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<a href="https://www.twilio.com/docs/api/ip-messaging/guides/quickstart-js"
<a href="https://www.twilio.com/docs/api/chat/guides/quickstart-js"
target="_blank">Read the getting started guide
<i class="fa fa-fw fa-external-link"></i>
</a>
@@ -19,8 +19,7 @@
<input id="chat-input" type="text" placeholder="say anything" autofocus/>
</section>
<script src="//media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
<script src="//media.twiliocdn.com/sdk/js/ip-messaging/v0.10/twilio-ip-messaging.min.js"></script>
<script src="///media.twiliocdn.com/sdk/js/chat/releases/0.11.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>

View File

@@ -2,11 +2,8 @@ $(function() {
// Get handle to the chat div
var $chatWindow = $('#messages');
// Manages the state of our access token we got from the server
var accessManager;
// Our interface to the IP Messaging service
var messagingClient;
// 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
@@ -54,19 +51,22 @@ $(function() {
print('You have been assigned a random username of: '
+ '<span class="me">' + username + '</span>', true);
// Initialize the IP messaging client
accessManager = new Twilio.AccessManager(data.token);
messagingClient = new Twilio.IPMessaging.Client(accessManager);
// Initialize the Chat client
chatClient = new Twilio.Chat.Client(data.token);
chatClient.getUserChannels().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 = messagingClient.getChannelByUniqueName('general');
var promise = chatClient.getChannelByUniqueName('general');
promise.then(function(channel) {
generalChannel = channel;
if (!generalChannel) {
// If it doesn't exist, let's create it
messagingClient.createChannel({
console.log('Creating general channel');
chatClient.createChannel({
uniqueName: 'general',
friendlyName: 'General Chat Channel'
}).then(function(channel) {
@@ -81,7 +81,7 @@ $(function() {
setupChannel();
}
});
});
}
// Set up channel after it has been found
function setupChannel() {

View File

@@ -7,7 +7,7 @@ $(function() {
configureField(response, 'TWILIO_NOTIFICATION_SERVICE_SID','twilioNotificationServiceSID',false);
configureField(response, 'TWILIO_APN_CREDENTIAL_SID','twilioAPNCredentialSID',false);
configureField(response, 'TWILIO_GCM_CREDENTIAL_SID','twilioGCMCredentialSID',false);
configureField(response, 'TWILIO_IPM_SERVICE_SID','twilioIPMServiceSID',false);
configureField(response, 'TWILIO_CHAT_SERVICE_SID','twilioChatServiceSID',false);
configureField(response, 'TWILIO_SYNC_SERVICE_SID','twilioSyncServiceSID',false);
//configure individual product buttons
@@ -20,10 +20,10 @@ $(function() {
$('#videoDemoButton').addClass('btn-danger');
}
if (response.TWILIO_IPM_SERVICE_SID && response.TWILIO_IPM_SERVICE_SID != '') {
$('#ipmDemoButton').addClass('btn-success');
if (response.TWILIO_CHAT_SERVICE_SID && response.TWILIO_CHAT_SERVICE_SID != '') {
$('#chatDemoButton').addClass('btn-success');
} else {
$('#ipmDemoButton').addClass('btn-danger');
$('#chatDemoButton').addClass('btn-danger');
}
if (response.TWILIO_SYNC_SERVICE_SID && response.TWILIO_SYNC_SERVICE_SID != '') {
@@ -40,7 +40,7 @@ $(function() {
}
else {
$('#videoDemoButton').addClass('btn-danger');
$('#ipmDemoButton').addClass('btn-danger');
$('#chatDemoButton').addClass('btn-danger');
$('#syncDemoButton').addClass('btn-danger');
$('#notifyDemoButton').addClass('btn-danger');
}

View File

@@ -49,9 +49,9 @@
<td class="config-value" id="twilioGCMCredentialSID"></td>
</tr>
<tr>
<td class="config-product">IP Messaging</td>
<td class="config-key">TWILIO_IPM_SERVICE_SID</td>
<td class="config-value" id="twilioIPMServiceSID"></td>
<td class="config-product">Chat</td>
<td class="config-key">TWILIO_CHAT_SERVICE_SID</td>
<td class="config-value" id="twilioChatServiceSID"></td>
</tr>
<tr>
<td class="config-product">Sync</td>
@@ -64,7 +64,7 @@
<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="ipmDemoButton" class="btn btn-lg" href="/ipmessaging/">IP Messaging</a>
<a id="chatDemoButton" class="btn btn-lg" href="/chat/">Chat</a>
</div> <!-- container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>