@@ -0,0 +1,274 @@
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+});