Migrate from IP Messaging to Chat
This commit is contained in:
Jeffrey Linwood
90
static/chat/index.css
Executable file
90
static/chat/index.css
Executable file
@@ -0,0 +1,90 @@
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
color:#dedede;
|
||||
background-color: #849091;
|
||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
width:100%;
|
||||
position:absolute;
|
||||
text-align:center;
|
||||
bottom:20px;
|
||||
}
|
||||
|
||||
header a, header a:visited {
|
||||
font-size:18px;
|
||||
color:#dedede;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
section {
|
||||
height:70%;
|
||||
background-color:#2B2B2A;
|
||||
}
|
||||
|
||||
section input {
|
||||
display:block;
|
||||
height:52px;
|
||||
width:800px;
|
||||
margin:10px auto;
|
||||
outline:none;
|
||||
background-color:transparent;
|
||||
border:none;
|
||||
border-bottom:1px solid #2B2B2A;
|
||||
padding:0;
|
||||
font-size:42px;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
#messages {
|
||||
background-color:#232323;
|
||||
padding:10px;
|
||||
height:100%;
|
||||
width:800px;
|
||||
margin:0 auto;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
#messages p {
|
||||
margin:5px 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin:5px 0;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
margin:5px 0;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.message-container .username {
|
||||
display:inline-block;
|
||||
margin-right:5px;
|
||||
font-weight:bold;
|
||||
color:#849091;
|
||||
}
|
||||
|
||||
.me, .username.me {
|
||||
font-weight:bold;
|
||||
color:cyan;
|
||||
}
|
||||
|
||||
.message-container .username.me {
|
||||
display:inline-block;
|
||||
margin-right:5px;
|
||||
}
|
||||
26
static/chat/index.html
Executable file
26
static/chat/index.html
Executable file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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/chat/guides/quickstart-js"
|
||||
target="_blank">Read the getting started guide
|
||||
<i class="fa fa-fw fa-external-link"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<div id="messages"></div>
|
||||
<input id="chat-input" type="text" placeholder="say anything" autofocus/>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
108
static/chat/index.js
Executable file
108
static/chat/index.js
Executable file
@@ -0,0 +1,108 @@
|
||||
$(function() {
|
||||
// Get handle to the chat div
|
||||
var $chatWindow = $('#messages');
|
||||
|
||||
// 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;
|
||||
|
||||
// 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 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
|
||||
username = data.identity;
|
||||
print('You have been assigned a random username of: '
|
||||
+ '<span class="me">' + username + '</span>', true);
|
||||
|
||||
// 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 = chatClient.getChannelByUniqueName('general');
|
||||
promise.then(function(channel) {
|
||||
generalChannel = channel;
|
||||
if (!generalChannel) {
|
||||
// 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();
|
||||
});
|
||||
} else {
|
||||
console.log('Found general channel:');
|
||||
console.log(generalChannel);
|
||||
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.sendMessage($input.val())
|
||||
$input.val('');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user