<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test Socket</title>
    <!-- General META -->
    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <!-- Fav Icon -->
    <link href="img/favicon.jpg" rel="icon" type="image/png">
    <script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
    #messageBox {
        position: relative;
        height: 350px;
        width: 300px;
        border: 1px solid gray;
        overflow: auto;
        word-wrap: break-word;
        text-justify: inter-word;
        text-align: justify;
        padding: 10px
    }
    
    #chatBox {
        width: 300px;
        display: inline-block;
    }
    
    #typing {
        position: absolute;
        bottom: 5px;
        display: none
    }
    </style>
</head>

<body>
    <div id="messageBox">
        <i id="typing">đang trả lời...</i>
    </div>
    <div style="width:300px;display: inline-block">
        <form id="chatForm" autocomplete="off">
            <input type="text" id="content" style="width:240px" />
            <button type="submit" style="width:52px">Send</button>
        </form>
        <!--         <button id="connectBtn">Connect</button>
        <button id="exitBtn">Exit</button> -->
    </div>
    <script type="text/javascript">
    var user = '{{user|safe}}';
    user = JSON.parse(user);
    var store;
    var socket_path = 'localhost:8082/socket-chat-support';
    var socket = io.connect(socket_path, {
        query: "token={{token}}",
        'force new connection': true
    });

    function connect() {
        socket = io.connect(socket_path, {
            query: "token={{token}}",
            'force new connection': true
        });
    }

    var rooms = [];
    socket.on('onready', function(data) {
        if (rooms.indexOf(data.room) === -1) {
            rooms.push(data.room);
        }
        message = data.message;
        console.log(data);
    });
    socket.on('message', function(data) {
        store = data.store;
        var content = '<span><label><b>' + data.fullname +
            '</b>: </label><span>' + data.message +
            '</span><br /></span>';
        $("#messageBox").append(content);
        $("#messageBox").scrollTop($("#messageBox").prop('scrollHeight'));
    });

    socket.on('systemuser_exit', function() {
        console.log('System user has been offline !');
    });

    socket.on('user_exit', function() {
        console.log('User has been offline !');
    });

    var is_typing = false;
    socket.on('typing', function(data) {
        if (data._id !== user._id) {
            $("#typing").html('<b>' + data.fullname + '</b>' + ' đang trả lời...');
            $("#typing").show();
            setTimeout(function() {
                $("#typing").hide();
            }, 2000);
        }
    });

    $("#chatForm").submit(function(e) {
        e.preventDefault();
        var mes = $("#content").val();
        if (mes.length > 0) {
            for (var i = 0; i < rooms.length; i++) {
                socket.emit('message', {
                    message: mes,
                    room: rooms[i],
                    store: store
                });
            }
            $("#content").val('');
        }
    });

    $("#content").keypress(function() {
        is_typing = true;
        for (var i = 0; i < rooms.length; i++) {
            socket.emit('typing', {
                room: rooms[i]
            });
        }
    });

    $("#exitBtn").click(function() {
        socket.disconnect();
    });

    $("#connectBtn").click(function() {
        socket.sendBuffer.splice(0);
        socket.connect();
    });
    </script>
</body>

</html>
