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.info.username').remove();
                        })

                        my_channel.bind('new_msg', function(data){
                            $('#chatbox').append('<p>'  + data.msg + '<p>');
                        })

                        $('#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){}
            });
        });
    })

    // $(function(){
    //  var pusher = new Pusher('afa60ca1440f46e0eca1');
    //  var channel = pusher.subscribe('test_channel');
    //  channel.bind('my_event', function(data) {
    //      $("#chatroom").append("<div>" + data.name + ":" + data.msg + " " + "<span>" + data.time + "</span>" + "</div>");
    //  });


    //  $("#send").click(function(){
    //      $.get('/send',{
    //          name_data: $("#chat_name").val(),
    //          msg_data: $("#chat_msg").val()
    //      },
    //      function(data) {
    //          // do nothing
    //          $("span").css({"font-size":"10px","font-weight":"bold"});

    //      });
    //  });
    // });
</script>
</head>
<body>
    <!-- <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div id="chatroom">

                </div>

                <div id="chat-form">
                    <input type="text" id="chat_name" placeholder="이름">
                    <input type="text" id="chat_msg" placeholder="메세지">
                    <input type="button" id="send" value="전송">
                </div>
            </div>
            <div class="col-md-6">
                <div id="user_count">
                </div>
            </div>
        </div>
    </div> -->


    <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>