tech4biz/admin/assets/js/chat.js

$(function () {

    moment().format();

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

    let current_user = '';
    let current_user_id = 0

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

    if (typeof io !== 'undefined') {

    }
    $(".list").empty();
    $("#chat__page").empty();
    $("#chat__page").html(`<div class="container d-flex align-items-center justify-content-center">
                            <h2>Click to Open Conversation</h2>
                            </div>`);

    const format_format = "YYYY-MM-DD HH:mm:ss"
    let today = new Date();

    socket.on('connect', () => {
        console.log('Socket Server Connected On Admin Side');
        console.log(socket.id);
        let data = {
            socket: socket.id,
            email: 'admin'
        }
        $(".list").empty();
        socket.emit("user__connected", data);
        socket.emit("fetch__users", data);
    });


    socket.on('fetch__users', function (data) {
        console.log(data)
        $(".list").empty();
        data.map(function (user) {
            let li = `<li class="clearfix openChatBox" data-email="${user.email}" style="cursor: pointer;">
                            <img class="rounded-circle user-image" src="https://ui-avatars.com/api/?background=random&name=${user.email}" alt="${user.email}" />
                            <div class="status-circle away"></div>
                            <div class="about">
                                <div class="name">${user.email}</div>
                                <div class="status" id="last_message">${decodeURIComponent(user.last_msg)}</div>
                            </div>
                        </li>`;
            $(".list").append(li);
        });

        $('.openChatBox').click(function () {

            let email = $(this).attr('data-email');
            let data = {
                socket: socket.id,
                email: email
            }
            socket.emit("open__chatBox", data);
        });

    });

    socket.on('open__chatBox', function (data) {


        current_user = data.data.email;
        current_user_id = data.user_id;

        let chatContainer = `<div class="chat">
                                            <!-- chat-header start-->
                            <div class="chat-header clearfix">
                                <img class="rounded-circle" src="./assets/images/user/8.jpg" alt="">
                                <div class="about">
                                    <div class="name" id="currentUser">${data.data.email || null}</div>
                                </div>
                                
                            </div>
                            <!-- chat-header end-->
                            <div class="chat-history chat-msg-box custom-scrollbar">
                                <ul id="messages__list__${current_user_id}" class="message__list__${current_user_id}">
                                                                
                                </ul>
                            </div>
                            <!-- end chat-history-->
                            <div class="chat-message clearfix">
                                <div class="row">
                                    <div class="col-xl-12 d-flex">
                                        <div class="input-group text-box">
                                           <textarea class="form-control input-txt-bx" style="overflow:hidden !important;"  id="chat-input" type="text" name="message-to-send" placeholder="Type a message......"></textarea>
                                            <button class="input-group-text btn btn-primary chat-submit" id="chat-submit"  type="button" data-bs-original-title="" title="">
                                                SEND
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end chat-message-->
                            <!-- chat end-->
                            <!-- Chat right side ends-->
                        </div>`;
        $("#chat__page").empty();
        $("#chat__page").html(chatContainer);

        $("#messages__list__" + current_user_id).empty()

        let msgLi = '';
        data.msg.map(function (msg) {
            if (msg.send_by === 'admin') {
                let shortTime = moment(msg.created_at).format('hh:mm: A');
                msgLi += `<li class="clearfix">
                            <div class="message other-message pull-right">
                                <div class="message-data ">
                                    <span class="message-data-time">${shortTime}</span></div>
                                ${decodeURIComponent(msg.message)}
                            </div>
                          </li>`;
            } else {
                let shortTime = moment(msg.created_at).format('hh:mm: A');
                msgLi += `<li>
                            <div class="message my-message">
                                <div class="message-data text-end"><span class="message-data-time">${shortTime}</span>
                                </div>
                                ${decodeURIComponent(msg.message)}
                            </div>
                          </li>`;
            }

            $("#messages__list__" + current_user_id).html(msgLi);

        });

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


        // $('#chat-input').keydown(function (e) {
        //     if (e.keyCode === 13 && e.ctrlKey) {
        //         $(this).val(function(i,val){
        //             //console.log( val + "\n");
        //             return val + "\n";
        //         });
        //     }
        // }).keypress(function(e){
        //     if (e.keyCode === 13 && !e.ctrlKey) {
        //
        //         return false;
        //     }
        // });

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

            let msg = $("#chat-input").val();

            if (msg) {

                e.preventDefault();
                if (msg.trim() === '') {
                    return false;
                }

                let data = {
                    "socket": socket.id,
                    "from": 'admin',
                    "to": current_user,
                    "msg": encodeURIComponent(msg),
                    "send_by": 'admin'
                }

                const send__message__toAdmin = (data) => {
                    socket.emit("send__message__toAdmin", data);
                }

                send__message__toAdmin(data);

            }

            $("#chat-input").val('');
        });

    });

    socket.on('receive__user__message', (data) => {
        console.log('receive__user__message');
        console.log(data)
        let msgLi = ``;
        msgLi += `<li>
                    <div class="message my-message">
                        <div class="message-data text-end">
                            <span class="message-data-time">${moment().format('hh:mm: A')}</span></div>
                        ${decodeURIComponent(data.msg)}
                    </div>
                  </li>`;

        $("#messages__list__" + data.user_id).append(msgLi);
        if (("#messages__list").length > 0) {
            $(".chat-history").stop().animate({ scrollTop: $(".chat-history")[0].scrollHeight }, 1000);
        }


    });


    socket.on('send__message__toAdmin', (data) => {
        console.log(data);
        let msgLi = ``;
        msgLi += `<li class="clearfix"> 
                    <div class="message other-message pull-right">
                        <div class="message-data text-end">
                            <span class="message-data-time">${moment().format('hh:mm: A')}</span></div>
                        ${decodeURIComponent(data)}
                    </div>
                  </li>`;

        //$("#messages__list").append(msgLi);
        $("#messages__list__" + current_user_id).append(msgLi);
        $(".chat-history").stop().animate({ scrollTop: $(".chat-history")[0].scrollHeight }, 1000);

    });

    socket.on('refreshUsers', (data) => {
        console.log(data);
        let li = `<li class="clearfix openChatBox" data-email="${data.email}" style="cursor: pointer;">
                            <img class="rounded-circle user-image" src="./assets/images/user/1.jpg" alt="">
                            <div class="status-circle away"></div>
                            <div class="about">
                                <div class="name">${data.email}</div>
                                <div class="status">${data.email}</div>
                            </div>
                        </li>`;
        //$(".list").append(li);
    });


});