Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link href="/static/css/chat.css" rel="stylesheet">
    <script type="text/javascript">

    $(document).ready(function(){
        $('#login_btn').click(function(){
            $.ajax({
                url: '/login',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    id: $('input[name="login"]').val()
                },
                success: function(data){
                    if(data.success){
                        console.log(data.msg + data);
                        $("#login").css('display', 'none');
                        $("#chat").css('display', 'block');

                        pusher = new Pusher('afa60ca1440f46e0eca1');
                        my_channel = pusher.subscribe('presence-dohee');

                        my_channel.bind('pusher:subscription_succeeded', function(members){
                            console.log('subscription success!!');
                            members.each(function(member){
                                $('#chatboxbox').append('<li id="member_' + member.id + '">' + member.info.username + '</li>');
                            })
                        })

                        my_channel.bind('pusher:member_added', function(member){
                            console.log('Member added');
                            $('#chatbox').append('<p>' + member.info.username + '님이 입장하셨습니다' + '</p>');
                            $('#chatboxbox').append('<li id="member_' + member.id + '">' + member.info.username + '</li>');
                        })

                        my_channel.bind('pusher:member_removed', function(member){
                            console.log('Member added');
                            $('#chatbox').append('<p>' + member.info.username + '님이 퇴장하셨습니다' + '</p>');
                            $('#member_' + member.id).remove();
                        })

                        my_channel.bind('new_msg', function(data){
                            $('#chatbox').append('<p><strong>' + data.username + ': </strong>' + data.msg + '</p><small>' + data.time + '</small>');
                            $('#chatting').val('')
                        })

                        $('#send').click(function(){
                            $.ajax({
                                url: '/send_msg',
                                type: 'POST',
                                dataType: 'JSON',
                                data: {
                                    msg: $('input[name="chatting"]').val()
                                },
                                success: function(data) {
                                    if(data.success){
                                        console.log('send msg success!');
                                    }
                                    else{
                                        console.log('send msg fail!');
                                    }
                                },
                                error: function(data) {
                                    console.log('Server Error');
                                }
                            })
                        })
                    }
                    else{

                    }
                },
                error: function(data){}
            });
        });
    })

</script>
</head>
<body>

    <h3>미니 채팅방</h3>
    <div id="login">
        <input type="text" name="login">
        <input type="submit" id="login_btn" value="로그인">
    </div>

    <div id="chat">
        <div class="container">
            <div class="row">
                <div class="col-md-6" id="chatbox">
                </div>
                <div class="col-md-3" id="chatboxbox">접속자
                </div>
                <div class="col-md-6">
                    <input type="text" id="textbox" name="chatting">
                    <input type="submit" name="send" id="send" value="입력">
                </div>
            </div>
        </div>
    </div>
</body>
</html>