Migrate from IP Messaging to Chat
This commit is contained in:
@@ -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>
|
||||
@@ -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() {
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user