@@ -1,274 +0,0 @@
1−$(function() {
2− var FADE_TIME = 150; // ms
3− var TYPING_TIMER_LENGTH = 400; // ms
4− var COLORS = [
5− '#e21400', '#91580f', '#f8a700', '#f78b00',
6− '#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
7− '#3b88eb', '#3824aa', '#a700ff', '#d300e7'
8− ];
9−
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
15−
16− var $loginPage = $('.login.page'); // The login page
17− var $chatPage = $('.chat.page'); // The chatroom page
18−
19− // Prompt for setting a username
20− var username;
21− var connected = false;
22− var typing = false;
23− var lastTypingTime;
24− var $currentInput = $usernameInput.focus();
25−
26− var socket = io();
27−
28− function addParticipantsMessage (data) {
29− var message = '';
30− if (data.numUsers === 1) {
31− message += "there's 1 participant";
32− } else {
33− message += "there're " + data.numUsers + " participants";
34− }
35− log(message);
36− }
37−
38− // Sets the client's username
39− function setUsername () {
40− username = cleanInput($usernameInput.val().trim());
41−
42− // If the username is valid
43− if (username) {
44− $loginPage.fadeOut();
45− $chatPage.show();
46− $loginPage.off('click');
47− $currentInput = $inputMessage.focus();
48−
49− // Tell the server your username
50− socket.emit('add user', username);
51− }
52− }
53−
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('');
62− addChatMessage({
63− username: username,
64− message: message
65− });
66− // tell server to execute 'new message' and send along one parameter
67− socket.emit('new message', message);
68− }
69− }
70−
71− // Log a message
72− function log (message, options) {
73− var $el = $('<li>').addClass('log').text(message);
74− addMessageElement($el, options);
75− }
76−
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();
85− }
86−
87− var $usernameDiv = $('<span class="username"/>')
88− .text(data.username)
89− .css('color', getUsernameColor(data.username));
90− var $messageBodyDiv = $('<span class="messageBody">')
91− .text(data.message);
92−
93− var typingClass = data.typing ? 'typing' : '';
94− var $messageDiv = $('<li class="message"/>')
95− .data('username', data.username)
96− .addClass(typingClass)
97− .append($usernameDiv, $messageBodyDiv);
98−
99− addMessageElement($messageDiv, options);
100− }
101−
102− // Adds the visual chat typing message
103− function addChatTyping (data) {
104− data.typing = true;
105− data.message = 'is typing';
106− addChatMessage(data);
107− }
108−
109− // Removes the visual chat typing message
110− function removeChatTyping (data) {
111− getTypingMessages(data).fadeOut(function () {
112− $(this).remove();
113− });
114− }
115−
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) {
122− var $el = $(el);
123−
124− // Setup default options
125− if (!options) {
126− options = {};
127− }
128− if (typeof options.fade === 'undefined') {
129− options.fade = true;
130− }
131− if (typeof options.prepend === 'undefined') {
132− options.prepend = false;
133− }
134−
135− // Apply options
136− if (options.fade) {
137− $el.hide().fadeIn(FADE_TIME);
138− }
139− if (options.prepend) {
140− $messages.prepend($el);
141− } else {
142− $messages.append($el);
143− }
144− $messages[0].scrollTop = $messages[0].scrollHeight;
145− }
146−
147− // Prevents input from having injected markup
148− function cleanInput (input) {
149− return $('<div/>').text(input).text();
150− }
151−
152− // Updates the typing event
153− function updateTyping () {
154− if (connected) {
155− if (!typing) {
156− typing = true;
157− socket.emit('typing');
158− }
159− lastTypingTime = (new Date()).getTime();
160−
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');
166− typing = false;
167− }
168− }, TYPING_TIMER_LENGTH);
169− }
170− }
171−
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;
176− });
177− }
178−
179− // Gets the color of a username through our hash function
180− function getUsernameColor (username) {
181− // Compute hash code
182− var hash = 7;
183− for (var i = 0; i < username.length; i++) {
184− hash = username.charCodeAt(i) + (hash << 5) - hash;
185− }
186− // Calculate color
187− var index = Math.abs(hash % COLORS.length);
188− return COLORS[index];
189− }
190−
191− // Keyboard events
192−
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();
197− }
198− // When the client hits ENTER on their keyboard
199− if (event.which === 13) {
200− if (username) {
201− sendMessage();
202− socket.emit('stop typing');
203− typing = false;
204− } else {
205− setUsername();
206− }
207− }
208− });
209−
210− $inputMessage.on('input', function() {
211− updateTyping();
212− });
213−
214− // Click events
215−
216− // Focus input when clicking anywhere on login page
217− $loginPage.click(function () {
218− $currentInput.focus();
219− });
220−
221− // Focus input when clicking on the message input's border
222− $inputMessage.click(function () {
223− $inputMessage.focus();
224− });
225−
226− // Socket events
227− socket.on('connected', function (data) {
228− console.log('connected:', data);
229− });
230−
231− // Socket events
232− socket.on('changes', function (data) {
233− console.log('changes:', data);
234− });
235−
236− // Whenever the server emits 'login', log the login message
237− socket.on('login', function (data) {
238− connected = true;
239− // Display the welcome message
240− var message = "Welcome to Socket.IO Chat — ";
241− log(message, {
242− prepend: true
243− });
244− addParticipantsMessage(data);
245− });
246−
247− // Whenever the server emits 'new message', update the chat body
248− socket.on('new message', function (data) {
249− addChatMessage(data);
250− });
251−
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);
256− });
257−
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);
263− });
264−
265− // Whenever the server emits 'typing', show the typing message
266− socket.on('typing', function (data) {
267− addChatTyping(data);
268− });
269−
270− // Whenever the server emits 'stop typing', kill the typing message
271− socket.on('stop typing', function (data) {
272− removeChatTyping(data);
273− });
274−});