@@ -1,274 +0,0 @@
2− var FADE_TIME = 150; // ms
3− var TYPING_TIMER_LENGTH = 400; // ms
5− '#e21400', '#91580f', '#f8a700', '#f78b00',
6− '#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
7− '#3b88eb', '#3824aa', '#a700ff', '#d300e7'
10− // Initialize varibles
11− var $window = $(window);
12− var $usernameInput = $('.usernameInput'); // Input for username
13− var $messages = $('.messages'); // Messages area
14− var $inputMessage = $('.inputMessage'); // Input message input box
16− var $loginPage = $('.login.page'); // The login page
17− var $chatPage = $('.chat.page'); // The chatroom page
19− // Prompt for setting a username
21− var connected = false;
24− var $currentInput = $usernameInput.focus();
28− function addParticipantsMessage (data) {
30− if (data.numUsers === 1) {
31− message += "there's 1 participant";
33− message += "there're " + data.numUsers + " participants";
38− // Sets the client's username
39− function setUsername () {
40− username = cleanInput($usernameInput.val().trim());
42− // If the username is valid
44− $loginPage.fadeOut();
46− $loginPage.off('click');
47− $currentInput = $inputMessage.focus();
49− // Tell the server your username
50− socket.emit('add user', username);
54− // Sends a chat message
55− function sendMessage () {
56− var message = $inputMessage.val();
57− // Prevent markup from being injected into the message
58− message = cleanInput(message);
59− // if there is a non-empty message and a socket connection
60− if (message && connected) {
61− $inputMessage.val('');
66− // tell server to execute 'new message' and send along one parameter
67− socket.emit('new message', message);
72− function log (message, options) {
73− var $el = $('<li>').addClass('log').text(message);
74− addMessageElement($el, options);
77− // Adds the visual chat message to the message list
78− function addChatMessage (data, options) {
79− // Don't fade the message in if there is an 'X was typing'
80− var $typingMessages = getTypingMessages(data);
81− options = options || {};
82− if ($typingMessages.length !== 0) {
83− options.fade = false;
84− $typingMessages.remove();
87− var $usernameDiv = $('<span class="username"/>')
89− .css('color', getUsernameColor(data.username));
90− var $messageBodyDiv = $('<span class="messageBody">')
93− var typingClass = data.typing ? 'typing' : '';
94− var $messageDiv = $('<li class="message"/>')
95− .data('username', data.username)
96− .addClass(typingClass)
97− .append($usernameDiv, $messageBodyDiv);
99− addMessageElement($messageDiv, options);
102− // Adds the visual chat typing message
103− function addChatTyping (data) {
105− data.message = 'is typing';
106− addChatMessage(data);
109− // Removes the visual chat typing message
110− function removeChatTyping (data) {
111− getTypingMessages(data).fadeOut(function () {
116− // Adds a message element to the messages and scrolls to the bottom
117− // el - The element to add as a message
118− // options.fade - If the element should fade-in (default = true)
119− // options.prepend - If the element should prepend
120− // all other messages (default = false)
121− function addMessageElement (el, options) {
124− // Setup default options
128− if (typeof options.fade === 'undefined') {
129− options.fade = true;
131− if (typeof options.prepend === 'undefined') {
132− options.prepend = false;
137− $el.hide().fadeIn(FADE_TIME);
139− if (options.prepend) {
140− $messages.prepend($el);
142− $messages.append($el);
144− $messages[0].scrollTop = $messages[0].scrollHeight;
147− // Prevents input from having injected markup
148− function cleanInput (input) {
149− return $('<div/>').text(input).text();
152− // Updates the typing event
153− function updateTyping () {
157− socket.emit('typing');
159− lastTypingTime = (new Date()).getTime();
161− setTimeout(function () {
162− var typingTimer = (new Date()).getTime();
163− var timeDiff = typingTimer - lastTypingTime;
164− if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
165− socket.emit('stop typing');
168− }, TYPING_TIMER_LENGTH);
172− // Gets the 'X is typing' messages of a user
173− function getTypingMessages (data) {
174− return $('.typing.message').filter(function (i) {
175− return $(this).data('username') === data.username;
179− // Gets the color of a username through our hash function
180− function getUsernameColor (username) {
181− // Compute hash code
183− for (var i = 0; i < username.length; i++) {
184− hash = username.charCodeAt(i) + (hash << 5) - hash;
187− var index = Math.abs(hash % COLORS.length);
188− return COLORS[index];
193− $window.keydown(function (event) {
194− // Auto-focus the current input when a key is typed
195− if (!(event.ctrlKey || event.metaKey || event.altKey)) {
196− $currentInput.focus();
198− // When the client hits ENTER on their keyboard
199− if (event.which === 13) {
202− socket.emit('stop typing');
210− $inputMessage.on('input', function() {
216− // Focus input when clicking anywhere on login page
217− $loginPage.click(function () {
218− $currentInput.focus();
221− // Focus input when clicking on the message input's border
222− $inputMessage.click(function () {
223− $inputMessage.focus();
227− socket.on('connected', function (data) {
228− console.log('connected:', data);
232− socket.on('changes', function (data) {
233− console.log('changes:', data);
236− // Whenever the server emits 'login', log the login message
237− socket.on('login', function (data) {
239− // Display the welcome message
240− var message = "Welcome to Socket.IO Chat — ";
244− addParticipantsMessage(data);
247− // Whenever the server emits 'new message', update the chat body
248− socket.on('new message', function (data) {
249− addChatMessage(data);
252− // Whenever the server emits 'user joined', log it in the chat body
253− socket.on('user joined', function (data) {
254− log(data.username + ' joined');
255− addParticipantsMessage(data);
258− // Whenever the server emits 'user left', log it in the chat body
259− socket.on('user left', function (data) {
260− log(data.username + ' left');
261− addParticipantsMessage(data);
262− removeChatTyping(data);
265− // Whenever the server emits 'typing', show the typing message
266− socket.on('typing', function (data) {
267− addChatTyping(data);
270− // Whenever the server emits 'stop typing', kill the typing message
271− socket.on('stop typing', function (data) {
272− removeChatTyping(data);