tech4biz/chat/script.js

$(function () {

    // const server = "https://164.92.112.47:5005:5005";
    const server = "http://localhost:5005";

    let socket = io(server, {
        transports: ['websocket']
    });

    let isChatBoxOpen = false;
    let email = null;
    // let email = 'testuser@gmail.com';

    if (typeof io !== 'undefined') {
         socket.on('connect', function () {
       });

    }


    if (!email) {

        generate_message('Hi There, Whats Your Email?', 'user');

        $("#chatForm").submit(function (e) {
            e.preventDefault();
            email = $("#chat-input").val();
            if (email.trim() === '') {
                return false;
            }

            $("#chatForm")[0].reset();
            let data = {
                socket: socket.id,
                email: email
            }

            socket.emit("user__connected", data);

            // let refreshUsers = (data) => {
            //     socket.emit("refreshUsers", data);
            // }
            // refreshUsers(data);

            // let fetchUserMessages = () => {
            //     socket.emit("open__chatBox", data);
            // }
            // fetchUserMessages();


        });
    }

    var INDEX = 0;

    $("#chat-submit").click(function (e) {

        if (email) {
            e.preventDefault();
            let msg = $("#chat-input").val();
            if (msg.trim() === '') {
                return false;
            }

            let data = {
                "socket": socket.id,
                "from": email,
                "to": 'admin',
                "msg": encodeURIComponent(msg),
                "send_by": 'user',
                "date": new Date()
            }

            socket.emit("send__message", data);

        }


    });

    function generate_message(msg, type) {
        let str = "";
        str += "<div id='cm-msg-' class=\"chat-msg " + type + "\">";
        str += "          <div class=\"cm-msg-text\">";
        str += decodeURIComponent(msg);
        str += "          <\/div>";
        str += "          <p class=\"icon-time-text\">";
        str += "            <span>";
        str += "                <svg xmlns='//www.w3.org/2000/svg' width='16.662' height='19.416' viewBox='0 0 16.662 19.416'><path id='Path_1' data-name='Path 1' d='M11.554,3.388V2h5.554V3.388Zm2.083,10.344h1.388V8.41H13.637Zm.694,7.683a8,8,0,0,1-3.228-.66A8.454,8.454,0,0,1,6.66,16.313a8.23,8.23,0,0,1,0-6.456A8.454,8.454,0,0,1,11.1,5.413a8,8,0,0,1,3.228-.66,8.113,8.113,0,0,1,2.916.521,8.028,8.028,0,0,1,2.43,1.446l1.18-1.18.972.972-1.18,1.18a8.533,8.533,0,0,1,1.423,2.245,7.665,7.665,0,0,1,.59,3.147A8,8,0,0,1,22,16.313a8.454,8.454,0,0,1-4.443,4.443A8,8,0,0,1,14.331,21.416Zm0-1.388a6.914,6.914,0,0,0,6.942-6.942,6.7,6.7,0,0,0-2.025-4.918,6.7,6.7,0,0,0-4.918-2.025A6.7,6.7,0,0,0,9.413,8.167a6.7,6.7,0,0,0-2.025,4.918,6.914,6.914,0,0,0,6.942,6.942ZM14.331,13.108Z' transform='translate(-6 -2)' /></svg >";
        str += "            <\/span>";
        str += new Date().toLocaleTimeString();
        str += "          <\/p>";
        str += "        <\/div>";
        $(".chat-logs").append(str);
        $("#cm-msg").hide().fadeIn(300);
        if (type === 'self') {
            $("#chat-input").val('');
        }
        $(".chat-logs").stop().animate({ scrollTop: $(".chat-logs")[0].scrollHeight }, 1000);
    }


    $("#chat-circle").click(function () {
        isChatBoxOpen = true;
        $("#chat-circle").toggle('scale');
        $(".chat-box").toggle('scale');
        $(".chat-logs").stop().animate({ scrollTop: $(".chat-logs")[0].scrollHeight }, 1000);

    });

    $(".chat-box-toggle").click(function () {
        isChatBoxOpen = false;
        $("#chat-circle").toggle('scale');
        $(".chat-box").toggle('scale');
    });

    socket.on('user__connected', function (data) {
        generate_message(data, 'user');
    });

    socket.on('server__error', function (data) {
        generate_message(data, 'user');
    });

    socket.on('send__message', function (data) {
        generate_message(data, 'self');
    });

    socket.on('open__chatBox', function (data) {
        let msgLi = ''

        data.map(function (message) {

            if (message.send_by === 'user') {
                msgLi += `<div id='cm-msg-${message.id}' class="chat-msg self">
                             <div class="cm-msg-text">
                                ${decodeURIComponent(data.message)}
                             </div>
                          </div>
                `;
            }
            else {
                msgLi += `<div id='cm-msg-${message.id}' class="chat-msg user">
                            <div class="cm-msg-text">
                                ${decodeURIComponent(data.message)}
                            </div>
                            <p class="icon-time-text">
                                <span>
                                    <svg xmlns='http://www.w3.org/2000/svg' width='16.662' height='19.416' viewBox='0 0 16.662 19.416'><path id='Path_1' data-name='Path 1' d='M11.554,3.388V2h5.554V3.388Zm2.083,10.344h1.388V8.41H13.637Zm.694,7.683a8,8,0,0,1-3.228-.66A8.454,8.454,0,0,1,6.66,16.313a8.23,8.23,0,0,1,0-6.456A8.454,8.454,0,0,1,11.1,5.413a8,8,0,0,1,3.228-.66,8.113,8.113,0,0,1,2.916.521,8.028,8.028,0,0,1,2.43,1.446l1.18-1.18.972.972-1.18,1.18a8.533,8.533,0,0,1,1.423,2.245,7.665,7.665,0,0,1,.59,3.147A8,8,0,0,1,22,16.313a8.454,8.454,0,0,1-4.443,4.443A8,8,0,0,1,14.331,21.416Zm0-1.388a6.914,6.914,0,0,0,6.942-6.942,6.7,6.7,0,0,0-2.025-4.918,6.7,6.7,0,0,0-4.918-2.025A6.7,6.7,0,0,0,9.413,8.167a6.7,6.7,0,0,0-2.025,4.918,6.914,6.914,0,0,0,6.942,6.942ZM14.331,13.108Z' transform='translate(-6 -2)' /></svg >
                                </span>
                                ${new Date().toLocaleTimeString()}
                            </p>
                        </div>
                `;
            }
        });

        //$(".chat-logs").append(msgLi);

    });

    socket.on('receive__admin__message', (data) => {
        let msgLi = ``;
        msgLi += `<div id='cm-msg-${data.id}' class="chat-msg user">
                    <div class="cm-msg-text">
                        ${decodeURIComponent(data.msg)}
                    </div>
                    <p class="icon-time-text">
                        <span>
                            <svg xmlns='http://www.w3.org/2000/svg' width='16.662' height='19.416' viewBox='0 0 16.662 19.416'><path id='Path_1' data-name='Path 1' d='M11.554,3.388V2h5.554V3.388Zm2.083,10.344h1.388V8.41H13.637Zm.694,7.683a8,8,0,0,1-3.228-.66A8.454,8.454,0,0,1,6.66,16.313a8.23,8.23,0,0,1,0-6.456A8.454,8.454,0,0,1,11.1,5.413a8,8,0,0,1,3.228-.66,8.113,8.113,0,0,1,2.916.521,8.028,8.028,0,0,1,2.43,1.446l1.18-1.18.972.972-1.18,1.18a8.533,8.533,0,0,1,1.423,2.245,7.665,7.665,0,0,1,.59,3.147A8,8,0,0,1,22,16.313a8.454,8.454,0,0,1-4.443,4.443A8,8,0,0,1,14.331,21.416Zm0-1.388a6.914,6.914,0,0,0,6.942-6.942,6.7,6.7,0,0,0-2.025-4.918,6.7,6.7,0,0,0-4.918-2.025A6.7,6.7,0,0,0,9.413,8.167a6.7,6.7,0,0,0-2.025,4.918,6.914,6.914,0,0,0,6.942,6.942ZM14.331,13.108Z' transform='translate(-6 -2)' /></svg >
                        </span>
                        ${new Date().toLocaleTimeString()}
                    </p>
                </div>
            `;

        $(".chat-logs").append(msgLi);
        $(".chat-logs").stop().animate({ scrollTop: $(".chat-logs")[0].scrollHeight }, 1000);

    });

    //https://codepen.io/shivapandey/pen/dWdRYM

})