From 086eabf6b934bfadd4493d468ec315da80ea9d9c Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Wed, 2 May 2018 19:47:30 +0200 Subject: Several improvements in chat.js --- main/app/sprinkles/core/asset-bundles.json | 1 + .../sprinkles/core/assets/SiteAssets/js/chat.js | 171 ++++++++++++++++++ .../sprinkles/core/templates/pages/index.html.twig | 14 +- .../core/templates/pages/partials/chat.js.twig | 196 --------------------- 4 files changed, 185 insertions(+), 197 deletions(-) create mode 100644 main/app/sprinkles/core/assets/SiteAssets/js/chat.js delete mode 100644 main/app/sprinkles/core/templates/pages/partials/chat.js.twig (limited to 'main/app/sprinkles') diff --git a/main/app/sprinkles/core/asset-bundles.json b/main/app/sprinkles/core/asset-bundles.json index 0d714e8..fd75027 100644 --- a/main/app/sprinkles/core/asset-bundles.json +++ b/main/app/sprinkles/core/asset-bundles.json @@ -51,6 +51,7 @@ "SiteAssets/js/encryption.js", "SiteAssets/js/swiper.js", "SiteAssets/js/console.image.js", + "SiteAssets/js/chat.js", "SiteAssets/js/main.js" ], "options": { diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/chat.js b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js new file mode 100644 index 0000000..82cae93 --- /dev/null +++ b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js @@ -0,0 +1,171 @@ + /****** + GENERAL + ******/ +function InitializeChatServer() { + var ChatTextInput = $("#ChatTextInput"); + var SubscribeTextInput = $("#SubscribeTextInput"); + var ChatMessages = $("#ChatMessages"); + var TypingIndicatorAnimationElement = ""; + + var ChatSocket = new WebSocket('wss://marvinborner.ddnss.de:1337'); + ChatSocket.onerror = function () { + setTimeout(function () { + console.log("[WEBSOCKET LOGGER] Connection failed. Trying again..."); + InitializeChatServer(); + }, 5000); + }; + ChatSocket.onopen = function () { + // CONNECTION SUCCESSFUL! + console.log("[WEBSOCKET LOGGER] Chat connection established!"); + // GOT MESSAGE + ChatSocket.onmessage = function (e) { + console.log("[WEBSOCKET LOGGER] Received a message from server!"); + // DECLARATIONS + var TypingIndicatorMessage = $(".TypingIndicatorMessage").parent(); + var LastMessage = $(".MessageWrapper.Normal:last .ChatMessage"); + var MessageObject = JSON.parse(e.data); + var Message = MessageObject.Message; + var Username = MessageObject.Username; + var GroupName = MessageObject.GroupName; + var State = MessageObject.State; + var ServerMessage = MessageObject.ServerMessage; + var WasHimself = MessageObject.WasHimself; + var ServerMessageType = MessageObject.ServerMessageType; + + if (ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER + if (WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF + if (!LastMessage.hasClass("MessageSent")) { // CHECK IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE + ChatMessages.append("
" + Message + "
"); + } else if (LastMessage.hasClass("MessageSent")) { // IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN + ChatMessages.append("
" + Message + "
"); + if (LastMessage.hasClass("AloneMessage")) { + LastMessage.removeClass("AloneMessage"); + LastMessage.addClass("TopMessage"); + } else if (LastMessage.hasClass("BottomMessage")) { + LastMessage.removeClass("BottomMessage"); + LastMessage.addClass("MiddleMessage"); + } + } + } else if (WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER + if (!LastMessage.hasClass("MessageReceived")) { // CHECK IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE + ChatMessages.append("
" + Message + "
"); + } else if (LastMessage.hasClass("MessageReceived")) { // IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN + ChatMessages.append("
" + Message + "
"); + if (LastMessage.hasClass("AloneMessage")) { + LastMessage.removeClass("AloneMessage"); + LastMessage.addClass("TopMessage"); + } else if (LastMessage.hasClass("BottomMessage")) { + LastMessage.removeClass("BottomMessage"); + LastMessage.addClass("MiddleMessage"); + } + } + } + // CONVERT LINKS TO LINKS + $('.MessageReceived').linkify({ + target: "_blank" + }); + } else if (ServerMessage === true) { // SERVER MESSAGE + if (ServerMessageType === "GroupJoin") { // TYPE: USER JOINED A GROUP + if (WasHimself === true) { // HIMSELF JOINED A GROUP -> NOTIFY + ChatMessages.empty(); // -> EMPTY MESSAGES ON NEW GROUP JOIN + ChatMessages.append("
" + GroupName + "

"); + ReplaceServerMessage("YouGroupJoin"); // FOR TRANSLATION + } else if (WasHimself === false) { // OTHER USER JOINED A GROUP -> NOTIFY + ChatMessages.append("
" + Username + "

"); + ReplaceServerMessage("UserGroupJoin"); // FOR TRANSLATION + } + } else if (ServerMessageType === "UserDisconnect") { // TYPE: USER DISCONNECTED -> NOTIFY + ChatMessages.append("
" + Username + "

"); + ReplaceServerMessage("UserDisconnect"); // FOR TRANSLATION + } else if (ServerMessageType === "TypingState") { // SOMEBODY'S TYPING STATE CHANGED! + if (State === true) { // IF 'SOMEBODY' STARTED TYPING + if (WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?) + // NOTHING + } else if (WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE + ChatMessages.append("
" + TypingIndicatorAnimationElement + "
"); + console.log("[SERVER REPORT] " + Username + " STARTED TYPING"); + } + } else if (State === false) { // IF 'SOMEBODY' STOPPED TYPING + if (WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STOPS TYPING?) + // NOTHING + } else if (WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> REMOVE TYPING ANIMATION + //TypingIndicatorMessage.fadeOut("fast"); + TypingIndicatorMessage.remove(); + console.log("[SERVER REPORT] " + Username + " STOPPED TYPING"); + } + } + } + } + // SCROLL TO BOTTOM ON NEW MESSAGE OF ANY KIND + ChatMessages.animate({scrollTop: document.querySelector("#ChatMessages").scrollHeight}, "slow"); + }; + + + // TYPING RECOGNITION + var typingTimer; + var isTyping = false; + + ChatTextInput.keydown(function () { + sendStartTyping(); + clearTimeout(typingTimer); + }); + + ChatTextInput.keyup(function () { + clearTimeout(typingTimer); + typingTimer = setTimeout(function () { + sendStopTyping() + }, 2500) + }); + + function sendStartTyping() { + if (isTyping === false) { + sendTypingState(true); + isTyping = true; + } + } + + function sendStopTyping() { + if (isTyping === true) { + sendTypingState(false); + isTyping = false; + } + } + + function sendTypingState(state) { // SEND STATE TO CHAT SERVER + ChatSocket.send(JSON.stringify({ClientMessageType: "TypingState", State: state})); + } + + $(window).unload(function () { + sendStopTyping(); // USER STOPS TYPING ON PAGE CLOSE ETC + }); + + // SUBSCRIBE TO CHAT + SubscribeTextInput.keyup(function (e) { + if (e.keyCode === 13 && SubscribeTextInput.val().length > 0) { + subscribe(SubscribeTextInput.val()); + } + }); + + function subscribe(channel) { + ChatSocket.send(JSON.stringify({ClientMessageType: "Subscribe", Channel: channel})); + SubscribeTextInput.hide(); + ChatTextInput.show(); + } + + // SEND MESSAGE FROM INPUT FIELD + ChatTextInput.keyup(function (e) { + if (e.keyCode === 13 && ChatTextInput.val().length > 0) { + ChatSocket.send(JSON.stringify({ClientMessageType: "Message", Message: ChatTextInput.val()})); + ChatTextInput.val(""); + ChatTextInput.val(""); + + // USER USUALLY STOPS TYPING ON SENDING -> CHANGE STATE TO FALSE + sendTypingState(false); + isTyping = false; + clearTimeout(typingTimer); + } + }); + }; +} + +InitializeChatServer(); \ No newline at end of file diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig index 3ef8240..c395765 100644 --- a/main/app/sprinkles/core/templates/pages/index.html.twig +++ b/main/app/sprinkles/core/templates/pages/index.html.twig @@ -150,6 +150,18 @@ {% endblock %} diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig deleted file mode 100644 index d32ed5d..0000000 --- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig +++ /dev/null @@ -1,196 +0,0 @@ -{% autoescape 'js' %} - -/************ - GENERATE KEYS - ************ - if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('KeysGenerated') !== "true") { - // GENERATE -- LATER ON LOGIN! - var EncryptionPhrase = "PASSWORD 123"; // THE USERS PASSWORD -- needs to generate on login! - var RSABitLength = 1024; - var PrivateKeyString = cryptico.generateRSAKey(EncryptionPhrase, RSABitLength); - var PublicKeyString = cryptico.publicKeyString(PrivateKeyString); - // SAVE TO DATABASE - $.ajax({ - type: "POST", - url: "assets/php/SavePublicKey.php", - data: { - UserID: "1", // TEMPORARY - PublicKeyString: PublicKeyString - }, - async: true, - error: function () { - console.error("Error while saving public key to database!"); - }, - success: function () { - localStorage.setItem('KeysGenerated', "true"); - } - }); -} - - - /****** - GENERAL - ******/ -function InitializeChatServer() { - var ChatTextInput = $("#ChatTextInput"); - var SubscribeTextInput = $("#SubscribeTextInput"); - var ChatMessages = $("#ChatMessages"); - var TypingIndicatorAnimationElement = ""; - - var ChatSocket = new WebSocket('wss://marvinborner.ddnss.de:1337'); - ChatSocket.onerror = function () { - setTimeout(function () { - console.log("[WEBSOCKET LOGGER] Connection failed. Trying again..."); - InitializeChatServer(); - }, 5000); - }; - ChatSocket.onopen = function () { - console.log("[WEBSOCKET LOGGER] Chat connection established!"); - - // GOT MESSAGE - ChatSocket.onmessage = function (e) { - var TypingIndicatorMessage = $(".TypingIndicatorMessage").parent(); - var LastMessage = $(".MessageWrapper.Normal:last .ChatMessage"); - var MessageObject = JSON.parse(e.data); - if (MessageObject.ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER - if (MessageObject.WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF - if (!LastMessage.hasClass("MessageSent")) { // CHECK IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE - ChatMessages.append("
" + MessageObject.Message + "
"); - } else if (LastMessage.hasClass("MessageSent")) { // IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN - ChatMessages.append("
" + MessageObject.Message + "
"); - if (LastMessage.hasClass("AloneMessage")) { - LastMessage.removeClass("AloneMessage"); - LastMessage.addClass("TopMessage"); - } else if (LastMessage.hasClass("BottomMessage")) { - LastMessage.removeClass("BottomMessage"); - LastMessage.addClass("MiddleMessage"); - } - } - // CONVERT LINKS TO LINKS - $('.MessageSent').linkify({ - target: "_blank" - }); - } else if (MessageObject.WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER - if (!LastMessage.hasClass("MessageReceived")) { // CHECK IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE - ChatMessages.append("
" + MessageObject.Message + "
"); - } else if (LastMessage.hasClass("MessageReceived")) { // IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN - ChatMessages.append("
" + MessageObject.Message + "
"); - if (LastMessage.hasClass("AloneMessage")) { - LastMessage.removeClass("AloneMessage"); - LastMessage.addClass("TopMessage"); - } else if (LastMessage.hasClass("BottomMessage")) { - LastMessage.removeClass("BottomMessage"); - LastMessage.addClass("MiddleMessage"); - } - } - // CONVERT LINKS TO LINKS - $('.MessageReceived').linkify({ - target: "_blank" - }); - } - } else if (MessageObject.ServerMessage === true) { // SERVER MESSAGE - if (MessageObject.ServerMessageType === "GroupJoin") { // TYPE: USER JOINED A GROUP - if (MessageObject.WasHimself === true) { // HIMSELF JOINED A GROUP -> NOTIFY - ChatMessages.empty(); - var Message = "{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + MessageObject.GroupName + '"'); - } else if (MessageObject.WasHimself === false) { // OTHER USER JOINED A GROUP -> NOTIFY - var Message = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username); - } - ChatMessages.append("
" + Message + ".

"); - } else if (MessageObject.ServerMessageType === "UserDisconnect") { // TYPE: USER DISCONNECTED -> NOTIFY - var TranslatedDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username); - ChatMessages.append("
" + TranslatedDisconnectMessage + ".

"); - } else if (MessageObject.ServerMessageType === "TypingState") { // SOMEBODY'S TYPING STATE CHANGED! - if (MessageObject.State === true) { // IF 'SOMEBODY' STARTED TYPING - if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?) - // NOTHING - } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE - ChatMessages.append("
" + TypingIndicatorAnimationElement + "
"); - console.log("[SERVER REPORT] " + MessageObject.Username + " STARTED TYPING"); - } - } else if (MessageObject.State === false) { // IF 'SOMEBODY' STOPPED TYPING - if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STOPS TYPING?) - // NOTHING - } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> REMOVE TYPING ANIMATION - //TypingIndicatorMessage.fadeOut("fast"); - TypingIndicatorMessage.remove(); - console.log("[SERVER REPORT] " + MessageObject.Username + " STOPPED TYPING"); - } - } - } - } - // SCROLL TO BOTTOM ON NEW MESSAGE OF ANY KIND - ChatMessages.animate({scrollTop: document.querySelector("#ChatMessages").scrollHeight}, "slow"); - }; - - - // TYPING RECOGNITION - var typingTimer; - var isTyping = false; - - ChatTextInput.keydown(function () { - sendStartTyping(); - clearTimeout(typingTimer); - }); - - ChatTextInput.keyup(function () { - clearTimeout(typingTimer); - typingTimer = setTimeout(function () { - sendStopTyping() - }, 2500) - }) - - function sendStartTyping() { - if (isTyping === false) { - sendTypingState(true); - isTyping = true; - } - } - - function sendStopTyping() { - if (isTyping === true) { - sendTypingState(false); - isTyping = false; - } - } - - function sendTypingState(state) { // SEND STATE TO CHAT SERVER - ChatSocket.send(JSON.stringify({ClientMessageType: "TypingState", State: state})); - } - - $(window).unload(function () { - sendStopTyping(); // USER STOPS TYPING ON PAGE CLOSE ETC - }) - - // SUBSCRIBE TO CHAT - SubscribeTextInput.keyup(function (e) { - if (e.keyCode === 13 && SubscribeTextInput.val().length > 0) { - subscribe(SubscribeTextInput.val()); - } - }); - - function subscribe(channel) { - ChatSocket.send(JSON.stringify({ClientMessageType: "Subscribe", Channel: channel})); - SubscribeTextInput.hide(); - ChatTextInput.show(); - } - - // SEND MESSAGE FROM INPUT FIELD - ChatTextInput.keyup(function (e) { - if (e.keyCode === 13 && ChatTextInput.val().length > 0) { - ChatSocket.send(JSON.stringify({ClientMessageType: "Message", Message: ChatTextInput.val()})); - ChatTextInput.val(""); - ChatTextInput.val(""); - - // USER USUALLY STOPS TYPING ON SENDING -> CHANGE STATE TO FALSE - sendTypingState(false); - isTyping = false; - clearTimeout(typingTimer); - } - }); - }; -} - -InitializeChatServer(); - -{% endautoescape %} \ No newline at end of file -- cgit v1.2.3