Create index.html

bwcho75 · Apr 16, 2014 · 0fc721b · 0fc721b
1 parent 9623ac6
commit 0fc721b
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/socket_io_chatting_SendToPersonal/index.html b/socket_io_chatting_SendToPersonal/index.html
@@ -0,0 +1,53 @@
+<html>
+<head>
+
+    <title></title>
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+</head>
+<body>
+    <b>Send message</b><p>
+    Name <input type="text" id="nickname" /> <input type="button" id="changename" value="Change name"/><br>
+    To
+    <select id="to">
+        <option value="ALL">ALL</option>
+    </select>
+    Message  <input type="text" id="msgbox"/>
+    <br>
+    <span id="msgs"></span>
+
+    <script type="text/javascript">
+        var socket = io.connect('http://localhost');
+        $('#changename').click(function(){
+           socket.emit('changename',{nickname:$('#nickname').val()});
+        });
+        $("#msgbox").keyup(function(event) {
+            if (event.which == 13) {
+                socket.emit('send_msg',{to:$('#to').val(),msg:$('#msgbox').val()});
+                $('#msgbox').val('');
+            }
+        });
+        socket.on('new',function(data){
+            console.log(data.nickname);
+            $('#nickname').val(data.nickname);
+        });
+
+        // 새로운 사용자가 들어오거나, 사용자가 이름을 바꿨을때 "To" 리스트를 변경함
+        socket.on('userlist',function(data){
+           var users = data.users;
+           console.log(users);
+           console.log(data.users.length);
+           $('#to').empty().append('<option value="ALL">ALL</option>');
+           for(var i=0;i<data.users.length;i++){
+               $('#to').append('<option value="'+users[i]+'">'+users[i]+"</option>");
+           }
+        });
+
+        socket.on('broadcast_msg',function(data){
+            console.log(data.msg);
+            $('#msgs').append(data.msg+'<BR>');
+        });
+    </script>
+</body>
+</html>