";
352 | socketInfoHTML += "
Action: " + action.type ; 386 | if (action.detail) { 387 | str += "
Detail: " + action.detail; 388 | } 389 | 390 | $actionDiv.html(str); 391 | $actionDiv.addClass('socketchatbox-userdetail-actions-each'); 392 | 393 | $actionHistoryDiv.append($actionDiv); 394 | } 395 | 396 | 397 | 398 | 399 | syncHightlightGUI(); 400 | 401 | } 402 | 403 | $(document).on('click', '.username-info-viewmore', function() { 404 | var $this = $(this); 405 | var userID = $this.data('id'); 406 | var user = userDict[userID]; 407 | 408 | // already opened, close now 409 | if (openedUserID === userID) { 410 | 411 | $('.socketchatbox-admin-userdetail-pop').hide(); 412 | $this.text('[ ↓ ]'); 413 | $this.removeClass('blue'); 414 | openedUserID = ''; 415 | 416 | }else{ 417 | 418 | if (openedUserID in userDict) { 419 | var preOpenedUser = userDict[openedUserID]; 420 | preOpenedUser.arrowSpan.text('[ ↓ ]'); 421 | preOpenedUser.arrowSpan.removeClass('blue'); 422 | 423 | } 424 | 425 | $this.text('[ ↑ ]'); 426 | $this.addClass('blue'); 427 | 428 | openedUserID = userID; 429 | user.arrowSpan = $this; 430 | // Populate data into popup 431 | loadUserDetail(user); 432 | 433 | // TODO: show full browse history 434 | // url ----------- how long stay on page ------ etc. learn from GA dashboard 435 | 436 | // show 437 | if (!$('.socketchatbox-admin-userdetail-pop').is(":visible")) 438 | $('.socketchatbox-admin-userdetail-pop').slideFadeToggle(); 439 | } 440 | 441 | }); 442 | 443 | 444 | function getTimeElapsed(startTime, fromTime) { 445 | 446 | // time difference in ms 447 | var timeDiff = startTime - fromTime; 448 | if (fromTime!==0) 449 | timeDiff = (new Date()).getTime() - startTime; 450 | // strip the ms 451 | timeDiff /= 1000; 452 | var seconds = Math.round(timeDiff % 60); 453 | timeDiff = Math.floor(timeDiff / 60); 454 | var minutes = Math.round(timeDiff % 60); 455 | timeDiff = Math.floor(timeDiff / 60); 456 | var hours = Math.round(timeDiff % 24); 457 | timeDiff = Math.floor(timeDiff / 24); 458 | var days = timeDiff ; 459 | var timeStr = ""; 460 | if(days) 461 | timeStr += days + " d "; 462 | if(hours) 463 | timeStr += hours + " hr "; 464 | if(minutes) 465 | timeStr += minutes + " min "; 466 | 467 | timeStr += seconds + " sec"; 468 | return timeStr; 469 | } 470 | 471 | 472 | 473 | 474 | $.fn.slideFadeToggle = function(easing, callback) { 475 | return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 476 | }; 477 | 478 | 479 | var $tokenStatus = $('#socketchatbox-tokenStatus'); 480 | // Only admin should receive this message 481 | socket.on('listUsers', function (data) { 482 | 483 | 484 | // clear online user display 485 | $('#socketchatbox-online-users').html(''); 486 | 487 | 488 | if (!data.success) { 489 | console.log('bad token: '+ token); 490 | $('#socketchatbox-online-users').html('Invalid Token!'); 491 | $tokenStatus.html('Invalid Token!'); 492 | $tokenStatus.addClass('error'); 493 | $tokenStatus.removeClass('green'); 494 | //$('.socketchatbox-admin-server').hide(); 495 | 496 | } else { 497 | 498 | //$('.socketchatbox-admin-server').show(); 499 | $tokenStatus.html('Valid Token'); 500 | $tokenStatus.removeClass('error'); 501 | $tokenStatus.addClass('green'); 502 | 503 | if (!verified){ 504 | verified = true; 505 | getServerStat(); 506 | } 507 | 508 | // load new data about users and their sockets 509 | userDict = data.userdict; 510 | var newSelectedUsers = []; 511 | var newSelectedSockets = []; 512 | var newOpenedUserID; 513 | socketDict = {}; 514 | partiallyselectedUsers = {}; 515 | 516 | // add selectedSocketCount to user 517 | // link socket to user, put socket in socketDict 518 | // link user with its jqueryObj 519 | // link socket with its jqueryObj 520 | // display online user 521 | // update user detail window if opened 522 | for (var key in userDict) { 523 | 524 | var user = userDict[key]; 525 | 526 | var isSelectedUser = false; 527 | var isPartiallySelectedUser = false; 528 | 529 | 530 | user.selectedSocketCount = 0; // for socket/user selection purpose 531 | 532 | if(user.id in selectedUsers) { 533 | isSelectedUser = true; 534 | newSelectedUsers[user.id] = user; 535 | user.selectedSocketCount = user.count; // all sockets selected 536 | } 537 | 538 | 539 | for (var i = 0; i < user.socketList.length; i++) { 540 | 541 | var s = user.socketList[i]; 542 | s.user = user; 543 | socketDict[s.id] = s; 544 | 545 | if(!isSelectedUser && s.id in selectedSockets) { 546 | 547 | user.selectedSocketCount++; 548 | if(user.selectedSocketCount === user.count) { 549 | 550 | isSelectedUser = true; 551 | newSelectedUsers[user.id] = user; 552 | 553 | 554 | }else{ 555 | 556 | isPartiallySelectedUser = true; 557 | partiallyselectedUsers[s.id] = s; 558 | 559 | } 560 | } 561 | 562 | } 563 | 564 | // display online user 565 | 566 | var nameWithCount = user.username; 567 | 568 | // show number of connections of this user if more than one 569 | if(user.count > 1){ 570 | nameWithCount += "("+user.count+")"; 571 | } 572 | 573 | var $usernameSpan = $(""); 574 | $usernameSpan.text(nameWithCount); 575 | $usernameSpan.prop('title', 'Join Time: '+ getTimeElapsed(user.joinTime)); // better info to show? 576 | $usernameSpan.addClass("username-info"); 577 | $usernameSpan.data('id', user.id); 578 | 579 | // add [ ↓ ] after the user's name 580 | var $downArrowSpan = $(""); 581 | if (user.id === openedUserID){ 582 | $downArrowSpan.text('[ ↑ ]'); 583 | $downArrowSpan.prop('title', 'Close User Detail'); 584 | 585 | $downArrowSpan.addClass('blue'); 586 | user.arrowSpan = $downArrowSpan; 587 | 588 | } else { 589 | $downArrowSpan.text('[ ↓ ]'); 590 | $downArrowSpan.prop('title', 'Open User Detail'); 591 | 592 | } 593 | 594 | $downArrowSpan.addClass("username-info-viewmore"); 595 | $downArrowSpan.data('id', user.id); 596 | 597 | 598 | // also link user with his jquery object 599 | user.jqueryObj = $usernameSpan; 600 | 601 | $('#socketchatbox-online-users').append($usernameSpan); 602 | $('#socketchatbox-online-users').append($downArrowSpan); 603 | 604 | // reload user detail if this is the user selected 605 | if(user.id === openedUserID) { 606 | loadUserDetail(user); 607 | newOpenedUserID = user.id; 608 | } 609 | } 610 | 611 | // data transfer done, update local stored data 612 | openedUserID = newOpenedUserID; 613 | selectedUsers = newSelectedUsers; 614 | selectedSocket = newSelectedSockets; 615 | 616 | // update view 617 | syncHightlightGUI(); 618 | } 619 | 620 | }); 621 | socket.on('server stat', function (data) { 622 | var $serverStatMsg = $(''); 623 | $serverStatMsg.html("=0)
714 | $inputScriptMessage.val(scriptHist[scriptPointer]);
715 |
716 | });
717 |
718 | $('#socketchatbox-updateToken').click(function() {
719 | updateToken($('#socketchatbox-token').val());
720 | });
721 | });
722 |
--------------------------------------------------------------------------------
/wordpress/client.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 |
3 | var chatboxname = 'Chatbox';
4 | // change this to your port
5 | var port = 4321;
6 | var hostname = location.hostname;
7 | //hostname="lifeislikeaboat.com";
8 | var domain = location.protocol + "//" + hostname + ":" + port;
9 | var socket;
10 |
11 | var wordpress_cookie = 'comment_author_fb594a9f9824f4e2bfe1ef5fb8f628ad';
12 |
13 | var FADE_TIME = 150; // ms
14 | var TYPING_TIMER_LENGTH = 400; // ms
15 | var COLORS = [
16 | 'black'
17 | ];
18 |
19 | // Initialize variables
20 | var d = new Date();
21 | var $window = $(window);
22 | var $username = $('#socketchatbox-username');
23 | var $messages = $('.socketchatbox-messages'); // Messages area
24 | var $inputMessage = $('.socketchatbox-inputMessage'); // Input message input box
25 | var $chatBox = $('.socketchatbox-page');
26 | var $topbar = $('#socketchatbox-top');
27 | var $chatBody = $('#socketchatbox-body');
28 | var sendingFile = false;
29 | var newMsgSound;
30 | var newUserSound;
31 |
32 | var initialize = 0;
33 | var typing = false;
34 | var lastTypingTime;
35 | var username = 'visitor#'+ d.getMinutes()+ d.getSeconds();
36 | var comment_author = '';
37 | var totalUser = 0;
38 | // This uuid is unique for each browser but not unique for each connection
39 | // because one browser can have multiple tabs each with connections to the chatbox server.
40 | // And this uuid should always be passed on login, it's used to identify/combine user,
41 | // multiple connections from same browser are regarded as same user.
42 | var uuid = "uuid not set!";
43 |
44 | // New Message Received Notification
45 | // 1 -- Change Page Title Once (when the webpage state is not visible)
46 | // 2 -- Flash Page Title (when the webpage state is not visible)
47 | // 3 -- Change Page Title Once (always, just notify in 3 seconds)
48 | // Other -- Do Not Change Page Title
49 | var changeTitleMode = 2;
50 | var changeTitle = {
51 | time: 0,
52 | originTitle: document.title,
53 | timer: null,
54 | done: 0,
55 | change: function() {
56 | document.title = "~New Message Received~ " + changeTitle.originTitle;
57 | changeTitle.done = 1;
58 | },
59 | notify: function() {
60 | if(document.title.indexOf("~New Message Received~")) clearTimeout(changeTitle.timer);
61 | document.title = "~New Message Received~ " + changeTitle.originTitle;
62 | changeTitle.timer = setTimeout(function(){changeTitle.reset();},3000);
63 | changeTitle.done = 0; //Always be 0
64 | },
65 | flash: function() {
66 | changeTitle.timer = setTimeout(function () {
67 | changeTitle.time++;
68 | changeTitle.flash();
69 | if (changeTitle.time % 2 === 0) {
70 | document.title = "~ ~ " + changeTitle.originTitle;
71 | }else{
72 | document.title = "~New Message Received~ " + changeTitle.originTitle;
73 | }
74 | }, 500);
75 | changeTitle.done = 1;
76 | },
77 | reset: function() {
78 | clearTimeout(changeTitle.timer);
79 | document.title = changeTitle.originTitle;
80 | changeTitle.done = 0;
81 | }
82 | };
83 |
84 | function getCookie(cname) {
85 | var name = cname + "=";
86 | var ca = document.cookie.split(';');
87 | for(var i=0; i').addClass('socketchatbox-log').text(message);
318 | addMessageElement($el, options);
319 | }
320 |
321 | // Process message before displaying
322 | function processChatMessage (data, options) {
323 |
324 | //avoid empty name
325 | if (typeof data.username === 'undefined' || data.username==='')
326 | data.username = "empty name";
327 |
328 | // Don't fade the message in if there is an 'X was typing'
329 | var $typingMessages = getTypingMessages(data);
330 | options = options || {};
331 | if ($typingMessages.length !== 0) {
332 | options.fade = false;
333 | $typingMessages.remove();
334 | }
335 |
336 | var d = new Date();
337 | var posttime = '';
338 | if (!options.loadFromCookie) {
339 | posttime += "";
342 | }
343 |
344 | var $usernameDiv = $('')
345 | .html($("
ID: " + s.id + "
"; 353 | socketInfoHTML += "URL: " + s.url + "
"; 354 | if (s.referrer) 355 | socketInfoHTML += "Referrer: " + s.referrer + "
"; 356 | socketInfoHTML += "IP: " + s.ip + "
"; 357 | socketInfoHTML += "Total Messages: " + s.msgCount + "
"; 358 | 359 | if (s.lastMsg) 360 | socketInfoHTML += "Last Message: \"" + s.lastMsg + "\"
"; 361 | 362 | socketInfoHTML += "Idle Time: " + getTimeElapsed(s.lastActive) + "
"; 363 | socketInfoHTML += "Connection Time: " + getTimeElapsed(s.joinTime) + "
"; 364 | 365 | $socketInfo.html(socketInfoHTML); 366 | $socketInfo.addClass('socketchatbox-socketdetail-each'); 367 | 368 | $socketInfo.data('id', s.id); 369 | // link jquery object with socket object 370 | s.jqueryObj = $socketInfo; 371 | $('.socketchatbox-userdetail-sockets').append($socketInfo); 372 | } 373 | 374 | // action history 375 | var $actionHistoryDiv = $('.socketchatbox-userdetail-actions'); 376 | $actionHistoryDiv.html(''); 377 | 378 | for (var i = 0; i < user.actionList.length; i++) { 379 | var action = user.actionList[i]; 380 | var $actionDiv = $(''); 381 | //new Date(Number(action.time)) // full time format 382 | var d = new Date(Number(action.time)); 383 | var str = ('0' + d.getHours()).slice(-2) + ":" + ('0' + d.getMinutes()).slice(-2) + ":" + ('0' + d.getSeconds()).slice(-2); 384 | str += "" + action.url + ""; 385 | str += "Action: " + action.type ; 386 | if (action.detail) { 387 | str += "
Detail: " + action.detail; 388 | } 389 | 390 | $actionDiv.html(str); 391 | $actionDiv.addClass('socketchatbox-userdetail-actions-each'); 392 | 393 | $actionHistoryDiv.append($actionDiv); 394 | } 395 | 396 | 397 | 398 | 399 | syncHightlightGUI(); 400 | 401 | } 402 | 403 | $(document).on('click', '.username-info-viewmore', function() { 404 | var $this = $(this); 405 | var userID = $this.data('id'); 406 | var user = userDict[userID]; 407 | 408 | // already opened, close now 409 | if (openedUserID === userID) { 410 | 411 | $('.socketchatbox-admin-userdetail-pop').hide(); 412 | $this.text('[ ↓ ]'); 413 | $this.removeClass('blue'); 414 | openedUserID = ''; 415 | 416 | }else{ 417 | 418 | if (openedUserID in userDict) { 419 | var preOpenedUser = userDict[openedUserID]; 420 | preOpenedUser.arrowSpan.text('[ ↓ ]'); 421 | preOpenedUser.arrowSpan.removeClass('blue'); 422 | 423 | } 424 | 425 | $this.text('[ ↑ ]'); 426 | $this.addClass('blue'); 427 | 428 | openedUserID = userID; 429 | user.arrowSpan = $this; 430 | // Populate data into popup 431 | loadUserDetail(user); 432 | 433 | // TODO: show full browse history 434 | // url ----------- how long stay on page ------ etc. learn from GA dashboard 435 | 436 | // show 437 | if (!$('.socketchatbox-admin-userdetail-pop').is(":visible")) 438 | $('.socketchatbox-admin-userdetail-pop').slideFadeToggle(); 439 | } 440 | 441 | }); 442 | 443 | 444 | function getTimeElapsed(startTime, fromTime) { 445 | 446 | // time difference in ms 447 | var timeDiff = startTime - fromTime; 448 | if (fromTime!==0) 449 | timeDiff = (new Date()).getTime() - startTime; 450 | // strip the ms 451 | timeDiff /= 1000; 452 | var seconds = Math.round(timeDiff % 60); 453 | timeDiff = Math.floor(timeDiff / 60); 454 | var minutes = Math.round(timeDiff % 60); 455 | timeDiff = Math.floor(timeDiff / 60); 456 | var hours = Math.round(timeDiff % 24); 457 | timeDiff = Math.floor(timeDiff / 24); 458 | var days = timeDiff ; 459 | var timeStr = ""; 460 | if(days) 461 | timeStr += days + " d "; 462 | if(hours) 463 | timeStr += hours + " hr "; 464 | if(minutes) 465 | timeStr += minutes + " min "; 466 | 467 | timeStr += seconds + " sec"; 468 | return timeStr; 469 | } 470 | 471 | 472 | 473 | 474 | $.fn.slideFadeToggle = function(easing, callback) { 475 | return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 476 | }; 477 | 478 | 479 | var $tokenStatus = $('#socketchatbox-tokenStatus'); 480 | // Only admin should receive this message 481 | socket.on('listUsers', function (data) { 482 | 483 | 484 | // clear online user display 485 | $('#socketchatbox-online-users').html(''); 486 | 487 | 488 | if (!data.success) { 489 | console.log('bad token: '+ token); 490 | $('#socketchatbox-online-users').html('Invalid Token!'); 491 | $tokenStatus.html('Invalid Token!'); 492 | $tokenStatus.addClass('error'); 493 | $tokenStatus.removeClass('green'); 494 | //$('.socketchatbox-admin-server').hide(); 495 | 496 | } else { 497 | 498 | //$('.socketchatbox-admin-server').show(); 499 | $tokenStatus.html('Valid Token'); 500 | $tokenStatus.removeClass('error'); 501 | $tokenStatus.addClass('green'); 502 | 503 | if (!verified){ 504 | verified = true; 505 | getServerStat(); 506 | } 507 | 508 | // load new data about users and their sockets 509 | userDict = data.userdict; 510 | var newSelectedUsers = []; 511 | var newSelectedSockets = []; 512 | var newOpenedUserID; 513 | socketDict = {}; 514 | partiallyselectedUsers = {}; 515 | 516 | // add selectedSocketCount to user 517 | // link socket to user, put socket in socketDict 518 | // link user with its jqueryObj 519 | // link socket with its jqueryObj 520 | // display online user 521 | // update user detail window if opened 522 | for (var key in userDict) { 523 | 524 | var user = userDict[key]; 525 | 526 | var isSelectedUser = false; 527 | var isPartiallySelectedUser = false; 528 | 529 | 530 | user.selectedSocketCount = 0; // for socket/user selection purpose 531 | 532 | if(user.id in selectedUsers) { 533 | isSelectedUser = true; 534 | newSelectedUsers[user.id] = user; 535 | user.selectedSocketCount = user.count; // all sockets selected 536 | } 537 | 538 | 539 | for (var i = 0; i < user.socketList.length; i++) { 540 | 541 | var s = user.socketList[i]; 542 | s.user = user; 543 | socketDict[s.id] = s; 544 | 545 | if(!isSelectedUser && s.id in selectedSockets) { 546 | 547 | user.selectedSocketCount++; 548 | if(user.selectedSocketCount === user.count) { 549 | 550 | isSelectedUser = true; 551 | newSelectedUsers[user.id] = user; 552 | 553 | 554 | }else{ 555 | 556 | isPartiallySelectedUser = true; 557 | partiallyselectedUsers[s.id] = s; 558 | 559 | } 560 | } 561 | 562 | } 563 | 564 | // display online user 565 | 566 | var nameWithCount = user.username; 567 | 568 | // show number of connections of this user if more than one 569 | if(user.count > 1){ 570 | nameWithCount += "("+user.count+")"; 571 | } 572 | 573 | var $usernameSpan = $(""); 574 | $usernameSpan.text(nameWithCount); 575 | $usernameSpan.prop('title', 'Join Time: '+ getTimeElapsed(user.joinTime)); // better info to show? 576 | $usernameSpan.addClass("username-info"); 577 | $usernameSpan.data('id', user.id); 578 | 579 | // add [ ↓ ] after the user's name 580 | var $downArrowSpan = $(""); 581 | if (user.id === openedUserID){ 582 | $downArrowSpan.text('[ ↑ ]'); 583 | $downArrowSpan.prop('title', 'Close User Detail'); 584 | 585 | $downArrowSpan.addClass('blue'); 586 | user.arrowSpan = $downArrowSpan; 587 | 588 | } else { 589 | $downArrowSpan.text('[ ↓ ]'); 590 | $downArrowSpan.prop('title', 'Open User Detail'); 591 | 592 | } 593 | 594 | $downArrowSpan.addClass("username-info-viewmore"); 595 | $downArrowSpan.data('id', user.id); 596 | 597 | 598 | // also link user with his jquery object 599 | user.jqueryObj = $usernameSpan; 600 | 601 | $('#socketchatbox-online-users').append($usernameSpan); 602 | $('#socketchatbox-online-users').append($downArrowSpan); 603 | 604 | // reload user detail if this is the user selected 605 | if(user.id === openedUserID) { 606 | loadUserDetail(user); 607 | newOpenedUserID = user.id; 608 | } 609 | } 610 | 611 | // data transfer done, update local stored data 612 | openedUserID = newOpenedUserID; 613 | selectedUsers = newSelectedUsers; 614 | selectedSocket = newSelectedSockets; 615 | 616 | // update view 617 | syncHightlightGUI(); 618 | } 619 | 620 | }); 621 | socket.on('server stat', function (data) { 622 | var $serverStatMsg = $(''); 623 | $serverStatMsg.html("
Welcome, Admin!
The Chatbox was started on "+data.chatboxUpTime + 624 | ".
There have been "+data.totalUsers + 625 | " users, " + data.totalSockets+" sockets and " + data.totalMsg + " messages.
"); 626 | $serverStatMsg.addClass('server-log-message'); 627 | 628 | $('.socketchatbox-admin-server').append($serverStatMsg); 629 | }); 630 | 631 | socket.on('server log', function (data) { 632 | var $serverLogMsg = $(''); 633 | var d = new Date(); 634 | var $timeStr = $('0){ 699 | scriptPointer--; 700 | setHistoryScript(); 701 | } 702 | 703 | }); 704 | 705 | $('.nextScript').click(function() { 706 | if(scriptPointer").text(data.username).html()+posttime)
346 | .css('color', getUsernameColor(data.username));
347 | $usernameDiv.addClass('socketchatbox-username');
348 | var $messageBodyDiv = $('');
349 | if (data.username === username) {
350 | $messageBodyDiv.addClass('socketchatbox-messageBody-me');
351 | } else {
352 | $messageBodyDiv.addClass('socketchatbox-messageBody-others');
353 | }
354 | var messageToSaveIntoCookie = "";
355 |
356 | // receiving image file in base64
357 | if (options.file) {
358 | var mediaType = "img";
359 | if (data.file.substring(0,10)==='data:video')
360 | mediaType = "video controls";
361 |
362 | if (data.file.substring(0,10)==='data:image' || data.file.substring(0,10)==='data:video') {
363 | $messageBodyDiv.html("<"+mediaType+" class='chatbox-image' src='"+data.file+"'>");
364 | }else{
365 | $messageBodyDiv.html(""+data.fileName+"");
366 | }
367 |
368 | messageToSaveIntoCookie = data.fileName+"(File)";
369 |
370 | }else{
371 |
372 | messageToSaveIntoCookie = data.message;
373 |
374 | if (checkImageUrl(data.message)) {
375 | //receiving image url
376 | $messageBodyDiv.html("![](" + data.message + ")
");
377 | }else {
378 | //receiving plain text
379 | $messageBodyDiv.text(data.message);
380 | }
381 | }
382 |
383 | // receiving new message
384 | if (!options.loadFromCookie && !options.typing) {
385 |
386 | // play new msg sound and change chatbox color to notify users
387 | if (data.username !== username) {
388 | newMsgBeep();
389 | if(document.hidden && changeTitleMode === 1 && changeTitle.done === 0) changeTitle.change();
390 | if(document.hidden && changeTitleMode === 2 && changeTitle.done === 0) changeTitle.flash();
391 | if(document.hidden && changeTitleMode === 3 && changeTitle.done === 0) changeTitle.notify();
392 | if(!document.hidden) socket.emit('reset2origintitle', {});
393 | }
394 |
395 | writeChatHistoryIntoCookie(data.username, messageToSaveIntoCookie);
396 | }
397 |
398 |
399 | var typingClass = options.typing ? 'socketchatbox-typing' : '';
400 | var $messageWrapper = $("");
401 | var $messageDiv = $("")
402 | .data('username', data.username)
403 | .addClass(typingClass)
404 | .append($usernameDiv, $messageBodyDiv);
405 | $messageWrapper.append($messageDiv);
406 | if (data.username === username) {
407 | $messageDiv.addClass('socketchatbox-message-me');
408 | } else {
409 | $messageDiv.addClass('socketchatbox-message-others');
410 | }
411 |
412 | addMessageElement($messageWrapper, options);
413 | }
414 |
415 |
416 |
417 |
418 | // Adds a message element to the messages and scrolls to the bottom
419 | // el - The element to add as a message
420 | // options.fade - If the element should fade-in (default = true)
421 | // options.prepend - If the element should prepend
422 | // all other messages (default = false)
423 | function addMessageElement (el, options) {
424 |
425 | var $el = $(el);
426 |
427 | // Setup default options
428 | options = options || {};
429 |
430 | if (typeof options.fade === 'undefined') {
431 | options.fade = true;
432 | }
433 | if (typeof options.prepend === 'undefined') {
434 | options.prepend = false;
435 | }
436 |
437 | // Apply options
438 | if (options.fade) {
439 | $el.hide().fadeIn(FADE_TIME);
440 | }
441 | if (options.prepend) {
442 | $messages.prepend($el);
443 | } else {
444 | $messages.append($el);
445 | }
446 |
447 | //loading media takes time so we delay the scroll down
448 | setTimeout(function(){
449 | $messages[0].scrollTop = $messages[0].scrollHeight;
450 | },50);
451 | }
452 |
453 | // Prevents input from having injected markup
454 | function cleanInput (input) {
455 | return $('').text(input).text();
456 | }
457 |
458 |
459 | function addParticipantsMessage (numUsers) {
460 | var message = '';
461 | if (numUsers === 1) {
462 | message += "You are the only user online";
463 | }else if (totalUser === 0) {
464 | message += "There are " + numUsers + " users online";
465 | }
466 | log(message);
467 |
468 | totalUser = numUsers;
469 | }
470 |
471 | // Adds the visual chat typing message
472 | function addChatTyping (data) {
473 | data.message = 'is typing';
474 | options={};
475 | options.typing = true;
476 | processChatMessage(data, options);
477 | }
478 |
479 | // Removes the visual chat typing message
480 | function removeChatTyping (data) {
481 | getTypingMessages(data).fadeOut(function() {
482 | $(this).remove();
483 | });
484 | }
485 |
486 |
487 | // Updates the typing event
488 | function updateTyping() {
489 |
490 | if (!typing) {
491 | typing = true;
492 | socket.emit('typing', {name:username});
493 | }
494 | lastTypingTime = (new Date()).getTime();
495 |
496 | setTimeout(function() {
497 | var typingTimer = (new Date()).getTime();
498 | var timeDiff = typingTimer - lastTypingTime;
499 | if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
500 | socket.emit('stop typing', {name:username});
501 | typing = false;
502 | }
503 | }, TYPING_TIMER_LENGTH);
504 |
505 | }
506 |
507 | // Gets the 'X is typing' messages of a user
508 | function getTypingMessages (data) {
509 | return $('.socketchatbox-typing.socketchatbox-message').filter(function (i) {
510 | return $(this).data('username') === data.username;
511 | });
512 | }
513 |
514 | // Gets the color of a username through our hash function
515 | function getUsernameColor (username) {
516 | // Compute hash code
517 | var hash = 7;
518 | for (var i = 0; i < username.length; i++) {
519 | hash = username.charCodeAt(i) + (hash << 5) - hash;
520 | }
521 | // Calculate color
522 | var index = Math.abs(hash % COLORS.length);
523 | return COLORS[index];
524 | }
525 |
526 | function clearNewMessageNotification() {
527 | changeTitle.reset();
528 | socket.emit('reset2origintitle', {});
529 | }
530 |
531 | // Tell server that user want to change username
532 | function askServerToChangeName (newName) {
533 | socket.emit('user edits name', {newName: newName});
534 | if(getCookie('chatboxOpen')==='1')
535 | $username.text('Changing your name...');
536 | }
537 |
538 |
539 | // Change local username value and update local cookie
540 | function changeLocalUsername(name) {
541 | if(name) {
542 | username = name;
543 | addCookie('chatname', name);
544 | if(getCookie('chatboxOpen')==='1')
545 | $username.text(username);
546 | }
547 | }
548 |
549 |
550 | function newMsgBeep() {
551 | if (typeof newMsgSound === 'undefined')
552 | newMsgSound = new Audio("data:audio/wav;base64,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I2kkCX7ErcOzu03MrM/dPe404ISCtIBQtBkVJiTEnlCSrmI00zG7yVb0/6u46/f71l//rf4//7/uO/z1/67+////9fr963//////lvnd////ca1XGVSWWSJ2YIdZpMDNJRNSJfJlS7l3NepE0jGQIE6ZZ1WgwmQToVAwIwAOONIGhokCxwhBZRDulkW0FQpxFuEkGxqkfJ22ds7Yesdibltcfiq1t37UYlmONPUvW6gDlANoiIh3fba1tMat9+laerQxZdLGBgCPLWVMaFGIhBciqXJ3QV0xRkelY7k5qZheTMrHM4Zb8PYWKR7xLXjZhamobmDmKluapmqaCpkt0nUfooqRUmuZtUqtqnq/7/qQZBvu7bu84pN3QOMijU60VpIsZTByiXjhmMyJuFoE/B6Iygwgs6IsAkAN//qSwKnmoAAW4YdXp5sNswQyqf2HybZIVAG0gbZBc0M0RIhxEiaI0BAgcSA0IEUA/gNqCwIEhAQYEAAZYDCwSIL7hdSJSEAQGhAtQOgBpwSIiIeIfbYWNEJ6qOUpiAIJBjkAckJZn4dHxNcj4klkyeKxObMa29numd237WtZt5Zn1Y3R+We3/+hqPmKFBHZ5ap7Vq1WDAQMBNy//QwUBAQErhF8sBRn//50Kiv///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////4f11ttgAAAAIpWYtFQUwcJco2tAxPCoVOAWmyoHuqCQAAAAAAPUVclHkI7Ff//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6ksDpbqmAGGUZTeewS7Bvg2f1h5hW//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////x/gAAAKAAAAPKnQ6laFSj//rgPDaTaCQHJZEzIjsoGC7O0U///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+pLAuHP/gC74ETvHpEBoTAGltYeYBP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8JJBAAOJY1jav////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////qSwLRB/4AwSAseh6QgICMA49AggAT////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6ksBYY/+AMWABLgAAACAAACXAAAAE////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+pLAWGP/gDFgAS4AAAAgAAAlwAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
553 | newMsgSound.play();
554 | }
555 |
556 | function writeChatHistoryIntoCookie(username, msg) {
557 | var chatHistory = [];
558 | try{
559 | chatHistory = JSON.parse(getCookie('chathistory'));
560 | }catch(e){}
561 |
562 | if (chatHistory.length===0||
563 | // avoid same message being saved when user open multiple tabs
564 | chatHistory[chatHistory.length-1].username!==username||
565 | chatHistory[chatHistory.length-1].message!==msg){
566 |
567 | var dataToSaveIntoCookie = {};
568 | dataToSaveIntoCookie.username = username;
569 | dataToSaveIntoCookie.message = msg;
570 | chatHistory.push(dataToSaveIntoCookie);
571 | // keep most recent 20 messages only
572 | chatHistory = chatHistory.slice(Math.max(chatHistory.length - 20, 0));
573 | addCookie('chathistory',JSON.stringify(chatHistory));
574 | }
575 | }
576 |
577 | function loadHistoryChatFromCookie() {
578 | var chatHistory = [];
579 | try{
580 | chatHistory = JSON.parse(getCookie('chathistory'));
581 | }catch(e){}
582 | if(chatHistory.length){
583 | log("----Chat History----");
584 | options = {};
585 | options.loadFromCookie = true;
586 | for(var i=0; i 1) {
617 | host = strAry[strAry.length - 2] + "." + strAry[strAry.length - 1];
618 | }
619 | }
620 | return '.' + host;
621 | }
622 |
623 |
624 |
625 |
626 |
627 | function doNothing(e){
628 | e.preventDefault();
629 | e.stopPropagation();
630 | }
631 |
632 | function fileTooBig(data){
633 |
634 | var fileSize = data.size/1024/1024; //MB
635 | var File_Size_Limit = 5;
636 | if (fileSize > File_Size_Limit){
637 |
638 | alert("Don't upload file larger than "+File_Size_Limit+" MB!");
639 | return true;
640 | }
641 |
642 | return false;
643 |
644 | }
645 |
646 | function readThenSendFile(data){
647 |
648 | if(sendingFile){
649 | alert('Still sending last file!');
650 | return;
651 | }
652 |
653 | if(fileTooBig(data))
654 | return;
655 |
656 |
657 | var reader = new FileReader();
658 | reader.onload = function(evt){
659 | var msg ={};
660 | msg.username = username;
661 | msg.file = evt.target.result;
662 | msg.fileName = data.name;
663 | socket.emit('base64 file', msg);
664 | $inputMessage.val('Sending file...');
665 | sendingFile = true;
666 | $inputMessage.prop('disabled', true);
667 | };
668 | reader.readAsDataURL(data);
669 | }
670 |
671 |
672 | $window.keydown(function (event) {
673 |
674 | // When the client hits ENTER on their keyboard
675 | if (event.which === 13) {
676 | if (username && $inputMessage.is(":focus")) {
677 | sendMessage();
678 | socket.emit('stop typing', {name:username});
679 | typing = false;
680 | }
681 | }
682 |
683 | });
684 |
685 | $inputMessage.on('input', function() {
686 | updateTyping();
687 | });
688 |
689 |
690 | // Focus input when clicking on the message input's border
691 | $inputMessage.click(function() {
692 | $inputMessage.focus();
693 | });
694 |
695 | $('#socketchatbox-closeChatbox').click(function() {
696 | $chatBox.hide();
697 | });
698 |
699 |
700 |
701 | // Prepare file drop box.
702 | $chatBox.on('dragenter', doNothing);
703 | $chatBox.on('dragover', doNothing);
704 | $chatBox.on('drop', function(e){
705 | e.originalEvent.preventDefault();
706 | var data = e.originalEvent.dataTransfer.files[0];
707 | readThenSendFile(data);
708 | });
709 |
710 | $('#socketchatbox-imagefile').bind('change', function(e) {
711 | var data = e.originalEvent.target.files[0];
712 | readThenSendFile(data);
713 | });
714 |
715 | $topbar.click(function() {
716 |
717 | if($chatBody.is(":visible")){
718 |
719 | hide();
720 | addCookie('chatboxOpen',0);
721 | }else {
722 | show();
723 | addCookie('chatboxOpen',1);
724 | }
725 | });
726 |
727 | document.addEventListener('visibilitychange', function() {
728 | if(!document.hidden) clearNewMessageNotification();
729 | if(getCookie('chatboxOpen')==='1') {
730 | show();
731 | }else{
732 | hide();
733 | }
734 | });
735 |
736 |
737 |
738 | //resize
739 |
740 | var prev_x = -1;
741 | var prev_y = -1;
742 | var dir = null;
743 | $(".socketchatbox-resize").mousedown(function(e){
744 | prev_x = e.clientX;
745 | prev_y = e.clientY;
746 | dir = $(this).attr('id');
747 | e.preventDefault();
748 | e.stopPropagation();
749 | });
750 |
751 | $(document).mousemove(function(e){
752 |
753 | if (prev_x == -1)
754 | return;
755 |
756 | var boxW = $(".socketchatbox-chatArea").outerWidth();
757 | var boxH = $(".socketchatbox-chatArea").outerHeight();
758 | var dx = e.clientX - prev_x;
759 | var dy = e.clientY - prev_y;
760 |
761 | //Check directions
762 | if (dir.indexOf('n') > -1) //north
763 | {
764 | boxH -= dy;
765 | }
766 |
767 | if (dir.indexOf('w') > -1) //west
768 | {
769 | boxW -= dx;
770 | }
771 | if (dir.indexOf('e') > -1) //east
772 | {
773 | boxW += dx;
774 | }
775 |
776 | //console.log('boxW '+boxW);
777 | //console.log('boxH '+boxH);
778 | if(boxW<210) boxW = 210;
779 | if(boxH<30) boxH = 30;
780 |
781 | $(".socketchatbox-chatArea").css({
782 | "width":(boxW)+"px",
783 | "height":(boxH)+"px",
784 | });
785 |
786 | prev_x = e.clientX;
787 | prev_y = e.clientY;
788 | });
789 |
790 | $(document).mouseup(function(){
791 | prev_x = -1;
792 | prev_y = -1;
793 | });
794 |
795 |
796 | // The functions below are for admin to use, user himself can't really call them
797 |
798 |
799 | function say(str) {
800 | sendMessageToServer(str);
801 | }
802 |
803 | function report(str) {
804 | if(str)
805 | reportToServer(str);
806 |
807 | else if($inputMessage.val()){
808 | // if no input, report whatever in user's input field
809 | report($inputMessage.val());
810 | $inputMessage.val('');
811 |
812 | }
813 | }
814 |
815 | function type(str) {
816 | show();
817 | var oldVal = $inputMessage.val();
818 | $inputMessage.focus().val(oldVal+str.charAt(0));
819 | if(str.length>1){
820 | var time = 150;
821 | if(str.charAt(1)===' ')
822 | time = 500;
823 | setTimeout(function(){type(str.substring(1));},time);
824 | }
825 | }
826 |
827 | function send() {
828 | report($inputMessage.val());
829 | $inputMessage.val('');
830 | }
831 |
832 | function show(){
833 | $('#socketchatbox-showHideChatbox').text("↓");
834 | $username.text(username);
835 | $chatBody.show();
836 | if (initialize === -1) {
837 | initialize = 1;
838 | log();
839 | }
840 |
841 | //show resize cursor
842 | $('.socketchatbox-resize').css('z-index', 99999);
843 |
844 | }
845 | function hide(){
846 | $('#socketchatbox-showHideChatbox').text("↑");
847 | $username.text(chatboxname);
848 | $chatBody.hide();
849 |
850 | //hide resize cursor
851 | $('.socketchatbox-resize').css('z-index', -999);
852 | }
853 | function color(c){
854 | $('html').css('background-color', c);
855 | }
856 | function black(){
857 | $('html').css('background-color', 'black');
858 | }
859 | function white(){
860 | $('html').css('background-color', 'white');
861 | }
862 |
863 | });
864 |
--------------------------------------------------------------------------------
/public/client.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 |
3 | var chatboxname = 'Chatbox';
4 | // change this to your port
5 | var port = 4321;
6 | var hostname = location.hostname;
7 | //hostname="lifeislikeaboat.com";
8 | var domain = location.protocol + "//" + hostname + ":" + port;
9 | var socket;
10 | var FADE_TIME = 150; // ms
11 | var TYPING_TIMER_LENGTH = 400; // ms
12 | var COLORS = [
13 | 'black'
14 | ];
15 |
16 | // Initialize variables
17 | var d = new Date();
18 | var $window = $(window);
19 | var $username = $('#socketchatbox-username');
20 | var $usernameInput = $('.socketchatbox-usernameInput'); // Input for username
21 | var $messages = $('.socketchatbox-messages'); // Messages area
22 | var $inputMessage = $('.socketchatbox-inputMessage'); // Input message input box
23 | var $chatBox = $('.socketchatbox-page');
24 | var $topbar = $('#socketchatbox-top');
25 | var $chatBody = $('#socketchatbox-body');
26 | var sendingFile = false;
27 | var grayChatBoxTimer;
28 | var newMsgSound;
29 | var newUserSound;
30 |
31 | var initialize = 0;
32 | var typing = false;
33 | var lastTypingTime;
34 | var username = 'visitor#'+ d.getMinutes()+ d.getSeconds();
35 | var comment_author = '';
36 | var totalUser = 0;
37 | // This uuid is unique for each browser but not unique for each connection
38 | // because one browser can have multiple tabs each with connections to the chatbox server.
39 | // And this uuid should always be passed on login, it's used to identify/combine user,
40 | // multiple connections from same browser are regarded as same user.
41 | var uuid = "uuid not set!";
42 |
43 | // New Message Received Notification
44 | // 1 -- Change Page Title Once (when the webpage state is not visible)
45 | // 2 -- Flash Page Title (when the webpage state is not visible)
46 | // 3 -- Change Page Title Once (always, just notify in 3 seconds)
47 | // Other -- Do Not Change Page Title
48 | var changeTitleMode = 2;
49 | var changeTitle = {
50 | time: 0,
51 | originTitle: document.title,
52 | timer: null,
53 | done: 0,
54 | change: function() {
55 | document.title = "~New Message Received~ " + changeTitle.originTitle;
56 | changeTitle.done = 1;
57 | },
58 | notify: function() {
59 | if(document.title.indexOf("~New Message Received~")) clearTimeout(changeTitle.timer);
60 | document.title = "~New Message Received~ " + changeTitle.originTitle;
61 | changeTitle.timer = setTimeout(function(){changeTitle.reset();},3000);
62 | changeTitle.done = 0; //Always be 0
63 | },
64 | flash: function() {
65 | changeTitle.timer = setTimeout(function () {
66 | changeTitle.time++;
67 | changeTitle.flash();
68 | if (changeTitle.time % 2 === 0) {
69 | document.title = "~ ~ " + changeTitle.originTitle;
70 | }else{
71 | document.title = "~New Message Received~ " + changeTitle.originTitle;
72 | }
73 | }, 500);
74 | changeTitle.done = 1;
75 | },
76 | reset: function() {
77 | clearTimeout(changeTitle.timer);
78 | document.title = changeTitle.originTitle;
79 | changeTitle.done = 0;
80 | }
81 | };
82 |
83 | function getCookie(cname) {
84 | var name = cname + "=";
85 | var ca = document.cookie.split(';');
86 | for(var i=0; i').addClass('socketchatbox-log').text(message);
297 | addMessageElement($el, options);
298 | }
299 |
300 | // Process message before displaying
301 | function processChatMessage (data, options) {
302 |
303 | //avoid empty name
304 | if (typeof data.username === 'undefined' || data.username==='')
305 | data.username = "empty name";
306 |
307 | // Don't fade the message in if there is an 'X was typing'
308 | var $typingMessages = getTypingMessages(data);
309 | options = options || {};
310 | if ($typingMessages.length !== 0) {
311 | options.fade = false;
312 | $typingMessages.remove();
313 | }
314 |
315 | var d = new Date();
316 | var posttime = '';
317 | if (!options.loadFromCookie) {
318 | posttime += "";
321 | }
322 |
323 | var $usernameDiv = $('')
324 | .html($("
").text(data.username).html()+posttime)
325 | .css('color', getUsernameColor(data.username));
326 | $usernameDiv.addClass('socketchatbox-username');
327 | var $messageBodyDiv = $('');
328 | if (data.username === username) {
329 | $messageBodyDiv.addClass('socketchatbox-messageBody-me');
330 | } else {
331 | $messageBodyDiv.addClass('socketchatbox-messageBody-others');
332 | }
333 | var messageToSaveIntoCookie = "";
334 |
335 | // receiving image file in base64
336 | if (options.file) {
337 | var mediaType = "img";
338 | if (data.file.substring(0,10)==='data:video')
339 | mediaType = "video controls";
340 |
341 | if (data.file.substring(0,10)==='data:image' || data.file.substring(0,10)==='data:video') {
342 | $messageBodyDiv.html("<"+mediaType+" class='chatbox-image' src='"+data.file+"'>");
343 | }else{
344 | $messageBodyDiv.html(""+data.fileName+"");
345 | }
346 |
347 | messageToSaveIntoCookie = data.fileName+"(File)";
348 |
349 | }else{
350 |
351 | messageToSaveIntoCookie = data.message;
352 |
353 | if (checkImageUrl(data.message)) {
354 | //receiving image url
355 | $messageBodyDiv.html("");
356 | }else {
357 | //receiving plain text
358 | $messageBodyDiv.text(data.message);
359 | }
360 | }
361 |
362 | // receiving new message
363 | if (!options.loadFromCookie && !options.typing) {
364 |
365 | // play new msg sound and change chatbox color to notify users
366 | if (data.username !== username) {
367 | newMsgBeep();
368 | if(document.hidden && changeTitleMode === 1 && changeTitle.done === 0) changeTitle.change();
369 | if(document.hidden && changeTitleMode === 2 && changeTitle.done === 0) changeTitle.flash();
370 | if(document.hidden && changeTitleMode === 3 && changeTitle.done === 0) changeTitle.notify();
371 | if(!document.hidden) socket.emit('reset2origintitle', {});
372 | $('#chat-top').css('background','yellowgreen');
373 | clearTimeout(grayChatBoxTimer);
374 | grayChatBoxTimer = setTimeout(function(){
375 | $('#chat-top').css('background','lightgray');
376 | },60*1000);
377 | }
378 |
379 | writeChatHistoryIntoCookie(data.username, messageToSaveIntoCookie);
380 | }
381 |
382 |
383 | var typingClass = options.typing ? 'socketchatbox-typing' : '';
384 | var $messageWrapper = $("");
385 | var $messageDiv = $("")
386 | .data('username', data.username)
387 | .addClass(typingClass)
388 | .append($usernameDiv, $messageBodyDiv);
389 | $messageWrapper.append($messageDiv);
390 | if (data.username === username) {
391 | $messageDiv.addClass('socketchatbox-message-me');
392 | } else {
393 | $messageDiv.addClass('socketchatbox-message-others');
394 | }
395 |
396 | addMessageElement($messageWrapper, options);
397 | }
398 |
399 |
400 |
401 |
402 | // Adds a message element to the messages and scrolls to the bottom
403 | // el - The element to add as a message
404 | // options.fade - If the element should fade-in (default = true)
405 | // options.prepend - If the element should prepend
406 | // all other messages (default = false)
407 | function addMessageElement (el, options) {
408 |
409 | var $el = $(el);
410 |
411 | // Setup default options
412 | options = options || {};
413 |
414 | if (typeof options.fade === 'undefined') {
415 | options.fade = true;
416 | }
417 | if (typeof options.prepend === 'undefined') {
418 | options.prepend = false;
419 | }
420 |
421 | // Apply options
422 | if (options.fade) {
423 | $el.hide().fadeIn(FADE_TIME);
424 | }
425 | if (options.prepend) {
426 | $messages.prepend($el);
427 | } else {
428 | $messages.append($el);
429 | }
430 |
431 | //loading media takes time so we delay the scroll down
432 | setTimeout(function(){
433 | $messages[0].scrollTop = $messages[0].scrollHeight;
434 | },50);
435 | }
436 |
437 | // Prevents input from having injected markup
438 | function cleanInput (input) {
439 | return $('').text(input).text();
440 | }
441 |
442 |
443 | function addParticipantsMessage (numUsers) {
444 | var message = '';
445 | if (numUsers === 1) {
446 | message += "You are the only user online";
447 | }else if (totalUser === 0) {
448 | message += "There are " + numUsers + " users online";
449 | }
450 | log(message);
451 |
452 | totalUser = numUsers;
453 | }
454 |
455 | // Adds the visual chat typing message
456 | function addChatTyping (data) {
457 | data.message = 'is typing';
458 | options={};
459 | options.typing = true;
460 | processChatMessage(data, options);
461 | }
462 |
463 | // Removes the visual chat typing message
464 | function removeChatTyping (data) {
465 | getTypingMessages(data).fadeOut(function() {
466 | $(this).remove();
467 | });
468 | }
469 |
470 |
471 | // Updates the typing event
472 | function updateTyping() {
473 |
474 | if (!typing) {
475 | typing = true;
476 | socket.emit('typing', {name:username});
477 | }
478 | lastTypingTime = (new Date()).getTime();
479 |
480 | setTimeout(function() {
481 | var typingTimer = (new Date()).getTime();
482 | var timeDiff = typingTimer - lastTypingTime;
483 | if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
484 | socket.emit('stop typing', {name:username});
485 | typing = false;
486 | }
487 | }, TYPING_TIMER_LENGTH);
488 |
489 | }
490 |
491 | // Gets the 'X is typing' messages of a user
492 | function getTypingMessages (data) {
493 | return $('.socketchatbox-typing.socketchatbox-message').filter(function (i) {
494 | return $(this).data('username') === data.username;
495 | });
496 | }
497 |
498 | // Gets the color of a username through our hash function
499 | function getUsernameColor (username) {
500 | // Compute hash code
501 | var hash = 7;
502 | for (var i = 0; i < username.length; i++) {
503 | hash = username.charCodeAt(i) + (hash << 5) - hash;
504 | }
505 | // Calculate color
506 | var index = Math.abs(hash % COLORS.length);
507 | return COLORS[index];
508 | }
509 |
510 | function clearNewMessageNotification() {
511 | changeTitle.reset();
512 | socket.emit('reset2origintitle', {});
513 | }
514 |
515 | // When user change his username by editing though GUI, go through server to get permission
516 | // since we may have rules about what names are forbidden in the future
517 | function changeNameByEdit() {
518 | var name = $('#socketchatbox-txt_fullname').val();
519 | name = $.trim(name);
520 | if (name === username || name === "") {
521 | $username.text(username);
522 | } else if (!sendingFile) {
523 | askServerToChangeName(name);
524 | }
525 | }
526 | // Tell server that user want to change username
527 | function askServerToChangeName (newName) {
528 | socket.emit('user edits name', {newName: newName});
529 | if(getCookie('chatboxOpen')==='1')
530 | $username.text('Changing your name...');
531 | }
532 |
533 |
534 | // Change local username value and update local cookie
535 | function changeLocalUsername(name) {
536 | if(name) {
537 | username = name;
538 | addCookie('chatname', name);
539 | if(getCookie('chatboxOpen')==='1')
540 | $username.text(username);
541 | }
542 | }
543 |
544 |
545 | function newMsgBeep() {
546 | if (typeof newMsgSound === 'undefined')
547 | newMsgSound = new Audio("data:audio/wav;base64,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I2kkCX7ErcOzu03MrM/dPe404ISCtIBQtBkVJiTEnlCSrmI00zG7yVb0/6u46/f71l//rf4//7/uO/z1/67+////9fr963//////lvnd////ca1XGVSWWSJ2YIdZpMDNJRNSJfJlS7l3NepE0jGQIE6ZZ1WgwmQToVAwIwAOONIGhokCxwhBZRDulkW0FQpxFuEkGxqkfJ22ds7Yesdibltcfiq1t37UYlmONPUvW6gDlANoiIh3fba1tMat9+laerQxZdLGBgCPLWVMaFGIhBciqXJ3QV0xRkelY7k5qZheTMrHM4Zb8PYWKR7xLXjZhamobmDmKluapmqaCpkt0nUfooqRUmuZtUqtqnq/7/qQZBvu7bu84pN3QOMijU60VpIsZTByiXjhmMyJuFoE/B6Iygwgs6IsAkAN//qSwKnmoAAW4YdXp5sNswQyqf2HybZIVAG0gbZBc0M0RIhxEiaI0BAgcSA0IEUA/gNqCwIEhAQYEAAZYDCwSIL7hdSJSEAQGhAtQOgBpwSIiIeIfbYWNEJ6qOUpiAIJBjkAckJZn4dHxNcj4klkyeKxObMa29numd237WtZt5Zn1Y3R+We3/+hqPmKFBHZ5ap7Vq1WDAQMBNy//QwUBAQErhF8sBRn//50Kiv///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////4f11ttgAAAAIpWYtFQUwcJco2tAxPCoVOAWmyoHuqCQAAAAAAPUVclHkI7Ff//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6ksDpbqmAGGUZTeewS7Bvg2f1h5hW//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////x/gAAAKAAAAPKnQ6laFSj//rgPDaTaCQHJZEzIjsoGC7O0U///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+pLAuHP/gC74ETvHpEBoTAGltYeYBP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8JJBAAOJY1jav////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////qSwLRB/4AwSAseh6QgICMA49AggAT////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6ksBYY/+AMWABLgAAACAAACXAAAAE////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+pLAWGP/gDFgAS4AAAAgAAAlwAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
548 | newMsgSound.play();
549 | }
550 |
551 | function beep() {
552 | if (typeof newUserSound === 'undefined')
553 | newUserSound = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
554 | newUserSound.play();
555 | }
556 |
557 | function writeChatHistoryIntoCookie(username, msg) {
558 | var chatHistory = [];
559 | try{
560 | chatHistory = JSON.parse(getCookie('chathistory'));
561 | }catch(e){}
562 |
563 | if (chatHistory.length===0||
564 | // avoid same message being saved when user open multiple tabs
565 | chatHistory[chatHistory.length-1].username!==username||
566 | chatHistory[chatHistory.length-1].message!==msg){
567 |
568 | var dataToSaveIntoCookie = {};
569 | dataToSaveIntoCookie.username = username;
570 | dataToSaveIntoCookie.message = msg;
571 | chatHistory.push(dataToSaveIntoCookie);
572 | // keep most recent 20 messages only
573 | chatHistory = chatHistory.slice(Math.max(chatHistory.length - 20, 0));
574 | addCookie('chathistory',JSON.stringify(chatHistory));
575 | }
576 | }
577 |
578 | function loadHistoryChatFromCookie() {
579 | var chatHistory = [];
580 | try{
581 | chatHistory = JSON.parse(getCookie('chathistory'));
582 | }catch(e){}
583 | if(chatHistory.length){
584 | log("----Chat History----");
585 | options = {};
586 | options.loadFromCookie = true;
587 | for(var i=0; i 1) {
618 | host = strAry[strAry.length - 2] + "." + strAry[strAry.length - 1];
619 | }
620 | }
621 | return '.' + host;
622 | }
623 |
624 |
625 |
626 |
627 |
628 | function doNothing(e){
629 | e.preventDefault();
630 | e.stopPropagation();
631 | }
632 |
633 | function fileTooBig(data){
634 |
635 | var fileSize = data.size/1024/1024; //MB
636 | var File_Size_Limit = 5;
637 | if (fileSize > File_Size_Limit){
638 |
639 | alert("Don't upload file larger than "+File_Size_Limit+" MB!");
640 | return true;
641 | }
642 |
643 | return false;
644 |
645 | }
646 |
647 | function readThenSendFile(data){
648 |
649 | if(sendingFile){
650 | alert('Still sending last file!');
651 | return;
652 | }
653 |
654 | if(fileTooBig(data))
655 | return;
656 |
657 |
658 | var reader = new FileReader();
659 | reader.onload = function(evt){
660 | var msg ={};
661 | msg.username = username;
662 | msg.file = evt.target.result;
663 | msg.fileName = data.name;
664 | socket.emit('base64 file', msg);
665 | $inputMessage.val('Sending file...');
666 | sendingFile = true;
667 | $inputMessage.prop('disabled', true);
668 | };
669 | reader.readAsDataURL(data);
670 | }
671 |
672 |
673 | $window.keydown(function (event) {
674 |
675 | // When the client hits ENTER on their keyboard
676 | if (event.which === 13) {
677 |
678 | if ($('#socketchatbox-txt_fullname').is(":focus")) {
679 | changeNameByEdit();
680 | $inputMessage.focus();
681 | return;
682 | }
683 |
684 | if (username && $inputMessage.is(":focus")) {
685 | sendMessage();
686 | socket.emit('stop typing', {name:username});
687 | typing = false;
688 | }
689 | }
690 |
691 | // When the client hits ESC on their keyboard
692 | if (event.which === 27) {
693 | if ($('#socketchatbox-txt_fullname').is(":focus")) {
694 | $username.text(username);
695 | $inputMessage.focus();
696 | return;
697 | }
698 | }
699 |
700 | });
701 |
702 | $inputMessage.on('input', function() {
703 | updateTyping();
704 | });
705 |
706 |
707 | // Focus input when clicking on the message input's border
708 | $inputMessage.click(function() {
709 | $inputMessage.focus();
710 | });
711 |
712 | $('#socketchatbox-closeChatbox').click(function() {
713 | $chatBox.hide();
714 | });
715 |
716 |
717 |
718 | // Prepare file drop box.
719 | $chatBox.on('dragenter', doNothing);
720 | $chatBox.on('dragover', doNothing);
721 | $chatBox.on('drop', function(e){
722 | e.originalEvent.preventDefault();
723 | var data = e.originalEvent.dataTransfer.files[0];
724 | readThenSendFile(data);
725 | });
726 |
727 | $('#socketchatbox-imagefile').bind('change', function(e) {
728 | var data = e.originalEvent.target.files[0];
729 | readThenSendFile(data);
730 | });
731 |
732 | $topbar.click(function() {
733 |
734 | if($chatBody.is(":visible")){
735 |
736 | hide();
737 | addCookie('chatboxOpen',0);
738 | }else {
739 | show();
740 | addCookie('chatboxOpen',1);
741 | }
742 | });
743 |
744 | // user edit username
745 | $username.click(function(e) {
746 | if(getCookie('chatboxOpen')!=='1') return;
747 | if(sendingFile) return;
748 | e.stopPropagation();
749 | if($('#socketchatbox-txt_fullname').length > 0) return;
750 | //if($('#socketchatbox-txt_fullname').is(":focus")) return;
751 |
752 | var name = $(this).text();
753 | $(this).html('');
754 | $('')
755 | .attr({
756 | 'type': 'text',
757 | 'name': 'fname',
758 | 'id': 'socketchatbox-txt_fullname',
759 | 'size': '10',
760 | 'value': name
761 | })
762 | .appendTo('#socketchatbox-username');
763 | $('#socketchatbox-txt_fullname').focus();
764 | });
765 |
766 | document.addEventListener('visibilitychange', function() {
767 | if(!document.hidden) clearNewMessageNotification();
768 | if(getCookie('chatboxOpen')==='1') {
769 | show();
770 | }else{
771 | hide();
772 | }
773 | });
774 |
775 |
776 |
777 | //resize
778 |
779 | var prev_x = -1;
780 | var prev_y = -1;
781 | var dir = null;
782 | $(".socketchatbox-resize").mousedown(function(e){
783 | prev_x = e.clientX;
784 | prev_y = e.clientY;
785 | dir = $(this).attr('id');
786 | e.preventDefault();
787 | e.stopPropagation();
788 | });
789 |
790 | $(document).mousemove(function(e){
791 |
792 | if (prev_x == -1)
793 | return;
794 |
795 | var boxW = $(".socketchatbox-chatArea").outerWidth();
796 | var boxH = $(".socketchatbox-chatArea").outerHeight();
797 | var dx = e.clientX - prev_x;
798 | var dy = e.clientY - prev_y;
799 |
800 | //Check directions
801 | if (dir.indexOf('n') > -1) //north
802 | {
803 | boxH -= dy;
804 | }
805 |
806 | if (dir.indexOf('w') > -1) //west
807 | {
808 | boxW -= dx;
809 | }
810 | if (dir.indexOf('e') > -1) //east
811 | {
812 | boxW += dx;
813 | }
814 |
815 | //console.log('boxW '+boxW);
816 | //console.log('boxH '+boxH);
817 | if(boxW<210) boxW = 210;
818 | if(boxH<30) boxH = 30;
819 |
820 | $(".socketchatbox-chatArea").css({
821 | "width":(boxW)+"px",
822 | "height":(boxH)+"px",
823 | });
824 |
825 | prev_x = e.clientX;
826 | prev_y = e.clientY;
827 | });
828 |
829 | $(document).mouseup(function(){
830 | prev_x = -1;
831 | prev_y = -1;
832 | });
833 |
834 |
835 | // The functions below are for admin to use, user himself can't really call them
836 |
837 |
838 | function say(str) {
839 | sendMessageToServer(str);
840 | }
841 |
842 | function report(str) {
843 | if(str)
844 | reportToServer(str);
845 |
846 | else if($inputMessage.val()){
847 | // if no input, report whatever in user's input field
848 | report($inputMessage.val());
849 | $inputMessage.val('');
850 |
851 | }
852 | }
853 |
854 | function type(str) {
855 | show();
856 | var oldVal = $inputMessage.val();
857 | $inputMessage.focus().val(oldVal+str.charAt(0));
858 | if(str.length>1){
859 | var time = 150;
860 | if(str.charAt(1)===' ')
861 | time = 500;
862 | setTimeout(function(){type(str.substring(1));},time);
863 | }
864 | }
865 |
866 | function send() {
867 | report($inputMessage.val());
868 | $inputMessage.val('');
869 | }
870 |
871 | function show(){
872 | $('#socketchatbox-showHideChatbox').text("↓");
873 | $username.text(username);
874 | $chatBody.show();
875 | if (initialize === -1) {
876 | initialize = 1;
877 | log();
878 | }
879 |
880 | //show resize cursor
881 | $('.socketchatbox-resize').css('z-index', 99999);
882 |
883 | }
884 | function hide(){
885 | $('#socketchatbox-showHideChatbox').text("↑");
886 | $username.text(chatboxname);
887 | $chatBody.hide();
888 |
889 | //hide resize cursor
890 | $('.socketchatbox-resize').css('z-index', -999);
891 | }
892 | function color(c){
893 | $('html').css('background-color', c);
894 | }
895 | function black(){
896 | $('html').css('background-color', 'black');
897 | }
898 | function white(){
899 | $('html').css('background-color', 'white');
900 | }
901 |
902 | });
903 |
--------------------------------------------------------------------------------