Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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!!');
- member.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){
- })
- 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){}
- });
- });
- })
- </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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement