Upload 2 files

src/chat.css

@@ -0,0 +1,268 @@
+body {
+      margin: 0;
+      padding: 0;
+      font-family: Arial, sans-serif;
+      background-color: #f0f0f0;
+    }
+
+    .header {
+      text-align: center;
+      padding: 20px;
+      background-color: #3498db;
+      color: #ffffff;
+    }
+
+    .app {
+      position: relative;
+      padding: 20px;
+    }
+
+    .message-container {
+      position: relative;
+    }
+
+    .message-container textarea {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ccc;
+      background-color: #ffffff;
+    }
+
+    .message-input {
+      background-color: transparent;
+      width: 100%;
+      height: 175px;
+      /*border: 1px solid #ccc;*/
+    }
+    
+
+    .message-box {
+      position: relative;
+      width: calc(33% + 100px);
+      height: auto;
+      padding: calc(4% + 20px);
+      border-radius: 5px;
+      font-size: 24pt;
+      margin: 0 0 20px 20px;
+      white-space: pre;
+      white-space: pre-line;
+      
+    }
+
+    @media (orientation: portrait) {
+        .message-box {
+            margin-bottom: 100px;
+        }
+    }
+
+    /* Styles pour le mode paysage */
+    @media (orientation: landscape) {
+        .message-box {
+            margin-bottom: 80px;
+        }
+    }
+    .message-box.sent {
+      width: calc(88% - 50px);
+      background-color: #d3d3d3;/*#20efbb; */
+      left: 0%;
+    }
+
+    .message-box.received {
+      width: 85%;
+      background-color: #fff;/*#3498db;*/
+      
+    }
+    .message-box.received a {
+        color: #2A58E2;
+        font-size: 18pt;
+    }
+
+    #message-input {
+      position: fixed;
+      bottom: 10px;
+      left: calc(10% + 40px);
+      background-color: transparent;
+      border: solid #000;
+      opacity: 85%;
+      width: calc(70% - 40px);
+      height: calc(3% + 35px);
+      border-radius: 30px;
+      font-size: 32pt;
+      z-index: 9;
+    }
+
+    #message-input:hover {
+        color: #000;
+        background: #d3d3d3;
+        border: solid #3498db;
+    }
+
+    #send-button:hover {
+        color: #fff;
+        background: #20efbb;
+    }
+
+    #send-button {
+      position: fixed;
+      bottom: 12px;
+      left: 84%;
+      background-color: transparent;
+      border: solid #20efbb;
+      width: 150px;
+      height: calc(3% + 50px);
+      border-radius: 20px;
+      font-size: 24pt;
+      z-index: 9;
+    }
+    
+      
+    #upload-files {
+      position: fixed;
+      bottom: 0px;
+      left: 1%;
+      background-color: transparent;
+      border: solid #20efbb;
+      width: 100px;
+      height: calc(3% + 50px);
+      border-radius: 20px;
+      font-size: 18pt;
+      z-index: 9;
+      overflow: hidden;
+    }
+
+    #custom-upload {
+      display: inline-block;
+      background: transparent;
+      cursor: pointer;
+      position: fixed;
+      bottom: 12px;
+      left: calc(4% - 10px);
+      background-color: transparent;
+      width: calc(100px);
+      /*height: calc(3% + 50px);*/
+      border-radius: 20px;
+      font-size: 18pt;
+      z-index: 4;
+      overflow: hidden;
+    }
+    #upload-files {
+      display: none;
+    }
+    
+    #upload-files:hover {
+        color: #fff;
+        background: #20efbb;
+    }
+
+    #user-id-input {
+      position: fixed;
+      top: 80px;
+      left: calc(10% + 40px);
+      background-color: transparent;
+      border: solid #000;
+      opacity: 5%;
+      width: calc(70% - 40px);
+      height: 50px;
+      border-radius: 30px;
+      font-size: 24pt;
+      z-index: 9;
+      display: block;
+    }
+
+    #user-id-input:hover {
+      color: #000;
+      opacity: 80%;
+      background: #d3d3d3;
+    border: solid #3498db;
+  }
+
+
+
+
+
+
+
+
+
+    #menu-button {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 50px;
+      height: 100%;
+      background-color: #3498db;
+      color: #ffffff;
+      text-align: center;
+      line-height: 50px;
+      cursor: pointer;
+      z-index: 9999;
+    }
+
+    #menu {
+      position: fixed;
+      left: -150px;
+      top: 0px;
+      width: 150px;
+      height: 100%;
+      background-color: #ffffff;
+      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+      transition: left 0.3s ease-in-out;
+      overflow-y: auto;
+      padding-top: 45px;
+	    padding-left: 20px;
+	    padding-right: 20px;
+      z-index: 9997;
+    }
+
+    .menu-item {
+      margin-bottom: 10px;
+      z-index: 9999;
+      cursor: pointer;
+    }
+
+    .menu-item a {
+        color: #0d66e3;
+    }
+
+    #add-button {
+      cursor: pointer;
+      z-index: 9999;
+    }
+
+    #input-container {
+      display: none;
+      margin-top: 10px;
+      z-index: 9998;
+    }
+	
+	 #toggle-menu-button {
+      position: fixed;
+      left: 5px;
+      top: 10px;
+      width: 30px;
+      height: 30px;
+      background-color: #3498db;
+      color: #ffffff;
+      text-align: center;
+      line-height: 30px;
+      cursor: pointer;
+      z-index: 9999;
+      font-size: 14pt;
+      border: none;
+    }
+
+    #add-button {
+      position: fixed;
+      left: 50px;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 40px;
+      background-color: #3498db;
+      color: #ffffff;
+      text-align: center;
+      line-height: 40px;
+      font-size: 20px;
+      cursor: pointer;
+      border-radius: 50%;
+      z-index: 9999;

src/chat.js

@@ -0,0 +1,351 @@
+var socket = io.connect('http://' + document.domain + ':' + location.port); // change by https:// if your use https proxy like replit
+var uid = "{{ username }}";//document.cookie;//Math.floor(Math.random() * 1000000000);
+var iid = 0;
+var roomID = $('#user-id-input').val();
+var menuVisible = false;
+var addButton = $('#add-button');
+var inputContainer = $('#input-container');
+
+function sendnew(roomid) {
+    roomID = roomid;
+    socket.emit('message', {
+        data: JSON.stringify({
+            message: 'Connected!',
+            usid: uid,
+            roomID: roomid,
+            cookies: document.cookie
+        })
+    });
+    $('#mmsg2').empty();
+    $('#user-id-input').val(roomid);
+    document.getElementById("message-input").placeholder = "Message a envoyer dans " + roomid + "...";
+    menuVisible = !menuVisible;
+    var leftValue = menuVisible ? '0' : '-150px';
+    $('#menu').css('left', leftValue);
+    if (!menuVisible) {
+        addButton.css('display', 'none');
+        $('#toggle-menu-button').css('width', '30px');
+    } else {
+        addButton.css('display', 'inline');
+        $('#toggle-menu-button').css('width', '180px');
+    }
+}
+$(document).ready(function() {
+
+    addButton.css('display', 'none');
+    $('#menu-button').on('click', function() {
+        menuVisible = !menuVisible;
+        var leftValue = menuVisible ? '0' : '-150px';
+        $('#menu').css('left', leftValue);
+    });
+
+    addButton.on('click', function() {
+        inputContainer.show();
+    });
+
+    $('#ok-button').on('click', function() {
+        var itemName = $('#item-name').val();
+        var itemId = $('#item-id').val();
+        if (itemName && itemId) {
+            var newItem = $('<div class="menu-item" onclick="sendnew(\'' + itemId + '\');">' + itemName + ' (' + itemId + ')</div>');
+            $('#menu').append(newItem);
+            inputContainer.hide();
+            $('#item-name').val('');
+            $('#item-id').val('');
+        }
+    });
+
+    $('#toggle-menu-button').on('click', function() {
+        menuVisible = !menuVisible;
+        var leftValue = menuVisible ? '0' : '-150px';
+        $('#menu').css('left', leftValue);
+        if (!menuVisible) {
+            addButton.css('display', 'none');
+            $('#toggle-menu-button').css('width', '30px');
+        } else {
+            addButton.css('display', 'inline');
+            $('#toggle-menu-button').css('width', '180px');
+        }
+    });
+});
+
+function formatMessage(message, usid) {
+    message = "<" + usid + ">: \n" + message;
+    const words = message.split(" ");
+    const container = document.createElement("div");
+    for (const word of words) {
+        const wordNode = document.createTextNode(word + " ");
+
+        if (word.startsWith("@")) {
+            const username = word.substring(1);
+            const strongNode = document.createElement("strong");
+            strongNode.textContent = "@" + username + " ";
+            container.appendChild(strongNode);
+        } else if (word.match(/^https?:\/\/[^\s/$.?#].[^\s]*$/i)) {
+            const urlNode = document.createElement("a");
+            urlNode.href = word;
+            urlNode.textContent = word + " ";
+            urlNode.target = "_blank";
+            container.appendChild(urlNode);
+        } else {
+            container.appendChild(wordNode);
+        }
+    }
+
+    return container;
+}
+document.addEventListener("keydown", KeyCheck);
+
+function KeyCheck(event) {
+    var KeyID = event.keyCode;
+    switch (KeyID) {
+        case 13:
+            var message = $('#message-input').val();
+            if (message !== '' && message.startsWith("/change-chat-room") === false) {
+                socket.emit('message', {
+                    data: JSON.stringify({
+                        message: message,
+                        usid: uid,
+                        roomID: roomID,
+                        cookies: document.cookie
+                    })
+                });
+                $('#message-input').val('');
+                window.scrollTo(0, document.body.scrollHeight);
+                $('#mmsg2').append($('<div class="message-box sent">').text('Moi : \n' + message));
+            } else if (message !== '') {
+                if (message.endsWith(';')) {
+
+                }
+            }
+            break;
+        default:
+            break;
+    }
+}
+
+$('#user-id-input').on('change', function() {
+    var userInput = $(this).val();
+    if (userInput.endsWith(';')) {
+        roomID = userInput;
+        socket.emit('message', {
+            data: JSON.stringify({
+                message: 'Connected!',
+                usid: uid,
+                roomID: roomID,
+                cookies: document.cookie
+            })
+        });
+    }
+});
+
+var userIdInput = $('#user-id-input');
+var isScrolling = false;
+var fadeTimeout;
+
+function hideUserIdInput() {
+    userIdInput.animate({
+        opacity: 0.01
+    }, 200);
+}
+
+function showUserIdInput() {
+    userIdInput.animate({
+        opacity: 0.85
+    }, 200);
+}
+
+$(window).on('scroll', function() {
+    if (!isScrolling) {
+        showUserIdInput();
+        isScrolling = true;
+    }
+
+    clearTimeout(fadeTimeout);
+
+    fadeTimeout = setTimeout(function() {
+        hideUserIdInput();
+        isScrolling = false;
+    }, 300);
+});
+$('#user-id-input').on('click', function() {
+    showUserIdInput();
+    fadeTimeout = setTimeout(function() {
+        hideUserIdInput();
+    }, 1000);
+});
+
+$('#user-id-input').on('over', function() {
+    showUserIdInput();
+    fadeTimeout = setTimeout(function() {
+        hideUserIdInput();
+    }, 200);
+});
+
+$(document).ready(function() {
+
+    socket.on('connect', function() {
+        socket.emit('message', {
+            data: JSON.stringify({
+                message: 'Connected!',
+                usid: uid,
+                roomID: roomID,
+                cookies: document.cookie
+            })
+        });
+    });
+
+    socket.on('message', function(data) {
+        var message = data.data;
+        var msg = JSON.parse(message)['message'];
+        try {
+            if (JSON.parse(message)['message'] != 'Connected!' && JSON.parse(message)['usid'] != uid && JSON.parse(message)['message'].toString() != 'undefined') {
+                
+                var usid = JSON.parse(message)['usid'];
+                if(usid === JSON.parse(message)['message']) {
+                    usid = uid;
+                }
+                const messageContainer = formatMessage(msg, usid);
+                const messageBox = $('<div class="message-box received">');
+                messageBox.html('<p>').append(messageContainer);
+                $('#mmsg2').append(messageBox);
+                if(JSON.parse(message)['stat'] != 'restoreHistory') {
+                    socket.emit('save', {
+                    data: JSON.stringify({
+                        message: usid + ": \n" + msg,
+                        donotsend: 'true',
+                        usid: uid,
+                        cookies: document.cookie.toString(),
+                        roomID: roomID
+                    })
+                });
+                }
+                
+
+                iid++;
+
+            }
+        } catch {
+
+        }
+
+        
+        const imageExtensions = [
+            'jpg',
+            'jpeg',
+            'png',
+            'gif',
+            'bmp',
+            'webp',
+            'svg',
+            'apng',
+            'JPG',
+            'JPEG',
+            'PNG',
+            'GIF',
+            'BMP',
+            'WEBP',
+            'SVG',
+            'APNG'
+        ];
+        var usid = JSON.parse(message)['usid'].split(" ")[0].replace("username=", "");
+        
+        if (imageExtensions.includes(JSON.parse(message)['ext']) && usid != uid && JSON.parse(message)['file'].toString() != 'undefined') {
+            console.log(usid);
+            $('#mmsg2').append($('<div class="message-box received">').html('' + usid + ' : \n<img src="data:image/' + JSON.parse(message)['ext'] + ';base64,' + JSON.parse(message)['file'] + '" width="90%">'));
+        }
+        var messageContainer = document.getElementById('mmsg2');
+        messageContainer.scrollTop = messageContainer.scrollHeight;
+        window.scrollTo(0, document.body.scrollHeight);
+    });
+
+    $('#send-button').click(function() {
+        var message = $('#message-input').val();
+        if (message !== '') {
+            socket.emit('message', {
+                data: JSON.stringify({
+                    message: message,
+                    usid: uid,
+                    roomID: roomID,
+                    cookies: document.cookie
+                })
+            });
+            $('#message-input').val('');
+            window.scrollTo(0, document.body.scrollHeight);
+            $('#mmsg2').append($('<div class="message-box sent">').text('Moi: \n' + message));
+        }
+    });
+
+
+    $('#upload-files').on('change', function() {
+        var selectedFile = this.files[0];
+        while (this.files[0].toString() === 'undefined') {
+            setTimeout(function() {
+                console.log('Fin');
+            }, 2000);
+        }
+        if (selectedFile) {
+            var reader = new FileReader();
+            reader.onload = function(event) {
+                var fileContent = event.target.result.split(',')[1];
+                var fileExtension = selectedFile.name.split('.').pop();
+                var bufs = 1000;
+                var mille = fileContent.slice(0, bufs);
+                var pos = bufs;
+                while (fileContent.length != pos) {
+                    socket.emit('image', {
+                        data: JSON.stringify({
+                            buf: mille,
+                            ext: fileExtension,
+                            usid: uid,
+                            endded: 'false',
+                            roomID: roomID,
+                            cookies: document.cookie
+                        })
+                    });
+                    mille = fileContent.slice(pos, pos + bufs);
+                    pos += mille.length;
+
+
+                }
+                socket.emit('image', {
+                    data: JSON.stringify({
+                        buf: mille,
+                        ext: fileExtension,
+                        usid: uid,
+                        endded: 'false',
+                        roomID: roomID,
+                        cookies: document.cookie
+                    })
+                });
+                pos = fileContent.length;
+                if (fileContent != 'undefined') {
+                    try {
+                        $('#mmsg2').append($('<div class="message-box sent">').html('Moi: ' + '<img src="data:image/' + fileExtension + ';base64,' + fileContent + '" width="90%">'));
+                        var messageContainer = document.getElementById('mmsg2');
+                        messageContainer.scrollTop = messageContainer.scrollHeight;
+                        window.scrollTo(0, document.body.scrollHeight);
+                    } catch (error) {
+                        console.log(error);
+                    }
+
+                }
+                socket.emit('image', {
+                    data: JSON.stringify({
+                        buf: '',
+                        ext: fileExtension,
+                        usid: uid,
+                        endded: 'true',
+                        type: fileExtension,
+                        roomID: roomID,
+                        cookies: document.cookie
+                    })
+                });
+                $('#upload-files').val('');
+                window.scrollTo(0, document.body.scrollHeight);
+            };
+            reader.readAsDataURL(selectedFile);
+            $('#mmsg2').append($('<div class="message-box sent">').text("Fichier en cours d'envoie..."));
+        }
+    });
+});