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

7
static/chat/index.html
View File

@@ -8,10 +8,10 @@
</head>
<body>
<header>
<a href="https://www.twilio.com/docs/api/chat/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>
</a>
</header>
<section>
@@ -19,7 +19,8 @@
<input id="chat-input" type="text" placeholder="say anything" autofocus/>
</section>
<script src="https://media.twiliocdn.com/sdk/js/chat/v1.0/twilio-chat.js"></script>
<script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
<script src="https://media.twiliocdn.com/sdk/js/chat/v3.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>

185
static/chat/index.js
View File

@@ -1,106 +1,111 @@
$(function() {
// Get handle to the chat div
var $chatWindow = $('#messages');
// Get handle to the chat div
var $chatWindow = $('#messages');
// Our interface to the Chat service
var chatClient;
// 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
var generalChannel;
// A handle to the "general" chat channel - the one and only channel we
// will have in this sample app
var generalChannel;
// The server will assign the client a random username - store that value
// here
var username;
// The server will assign the client a random username - store that value
// here
var username;
// Helper function to print info messages to the chat window
function print(infoMessage, asHtml) {
var $msg = $('<div class="info">');
if (asHtml) {
$msg.html(infoMessage);
} else {
$msg.text(infoMessage);
}
$chatWindow.append($msg);
// Helper function to print info messages to the chat window
function print(infoMessage, asHtml) {
var $msg = $('<div class="info">');
if (asHtml) {
$msg.html(infoMessage);
} else {
$msg.text(infoMessage);
}
$chatWindow.append($msg);
}
// Helper function to print chat message to the chat window
function printMessage(fromUser, message) {
var $user = $('<span class="username">').text(fromUser + ':');
if (fromUser === username) {
$user.addClass('me');
}
var $message = $('<span class="message">').text(message);
var $container = $('<div class="message-container">');
$container.append($user).append($message);
$chatWindow.append($container);
$chatWindow.scrollTop($chatWindow[0].scrollHeight);
// Helper function to print chat message to the chat window
function printMessage(fromUser, message) {
var $user = $('<span class="username">').text(fromUser + ':');
if (fromUser === username) {
$user.addClass('me');
}
var $message = $('<span class="message">').text(message);
var $container = $('<div class="message-container">');
$container.append($user).append($message);
$chatWindow.append($container);
$chatWindow.scrollTop($chatWindow[0].scrollHeight);
}
// Alert the user they have been assigned a random username
print('Logging in...');
// Get an access token for the current user, passing a username (identity)
// and a device ID - for browser-based apps, we'll always just use the
// value "browser"
$.getJSON('/token', {
device: 'browser'
}, function(data) {
// Alert the user they have been assigned a random username
print('Logging in...');
username = data.identity;
print('You have been assigned a random username of: '
+ '<span class="me">' + username + '</span>', true);
// Get an access token for the current user, passing a username (identity)
// and a device ID - for browser-based apps, we'll always just use the
// value "browser"
$.getJSON('/token', {
device: 'browser'
}, function(data) {
// Alert the user they have been assigned a random username
username = data.identity;
print('You have been assigned a random username of: '
+ '<span class="me">' + username + '</span>', true);
// Initialize the Chat client
Twilio.Chat.Client.create(data.token).then(client => {
chatClient = client;
chatClient.getSubscribedChannels().then(createOrJoinGeneralChannel);
});
});
// Initialize the Chat client
chatClient = new Twilio.Chat.Client(data.token);
chatClient.getSubscribedChannels().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...');
chatClient.getChannelByUniqueName('general')
.then(function(channel) {
generalChannel = channel;
console.log('Found general channel:');
console.log(generalChannel);
setupChannel();
}).catch(function() {
// If it doesn't exist, let's create it
console.log('Creating general channel');
chatClient.createChannel({
uniqueName: 'general',
friendlyName: 'General Chat Channel'
}).then(function(channel) {
console.log('Created general channel:');
console.log(channel);
generalChannel = channel;
setupChannel();
}).catch(function(channel) {
console.log('Channel could not be created:');
console.log(channel);
});
});
}
// Set up channel after it has been found
function setupChannel() {
// Join the general channel
generalChannel.join().then(function(channel) {
print('Joined channel as '
+ '<span class="me">' + username + '</span>.', true);
});
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 = chatClient.getChannelByUniqueName('general');
promise.then(function(channel) {
generalChannel = channel;
console.log('Found general channel:');
console.log(generalChannel);
setupChannel();
}).catch(function() {
// If it doesn't exist, let's create it
console.log('Creating general channel');
chatClient.createChannel({
uniqueName: 'general',
friendlyName: 'General Chat Channel'
}).then(function(channel) {
console.log('Created general channel:');
console.log(channel);
generalChannel = channel;
setupChannel();
});
});
}
// Set up channel after it has been found
function setupChannel() {
// Join the general channel
generalChannel.join().then(function(channel) {
print('Joined channel as '
+ '<span class="me">' + username + '</span>.', true);
});
// Listen for new messages sent to the channel
generalChannel.on('messageAdded', function(message) {
printMessage(message.author, message.body);
});
}
// Send a new message to the general channel
var $input = $('#chat-input');
$input.on('keydown', function(e) {
if (e.keyCode == 13 && generalChannel) {
generalChannel.sendMessage($input.val())
$input.val('');
}
// Listen for new messages sent to the channel
generalChannel.on('messageAdded', function(message) {
printMessage(message.author, message.body);
});
}
// Send a new message to the general channel
var $input = $('#chat-input');
$input.on('keydown', function(e) {
if (e.keyCode == 13) {
generalChannel.sendMessage($input.val())
$input.val('');
}
});
});