Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

node.js chating client sample 본문

TIS_2017/응용sw_2기

node.js chating client sample

moozi 2017. 9. 7. 14:46

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- viewport 사용 --------------------------------->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat client</title>
    <!-- jQuery Mobile CDN ---------------------------------->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   
    <!-- socket.io.js 사용 ------------------------------->
    <script src="/socket.io/socket.io.js"></script>
   
    <style>
        #msg{
            margin-bottom:5px;
        }
        #msg span{
            display: inline-block;
            border-radius: 5px;
            padding:5px;
            line-height: 0.5px;
            background-color: deepskyblue;
            text-shadow: none;
        }
        #content div:nth-child(2n){text-align: right;}
        #content div:nth-child(2n+1){text-align: left;}
       
        .left{
            text-align: left;
            background-color: orange;
        }
       
       
    </style>
    <script>
        $(document).ready(function(){
            var socket=io.connect();//연결
           
            //message처리
            socket.on('message',function(data){
                var output="";
                output+="<div id='msg'>"
                output+="<span>"
                output+="   <h3>"+data.name+"</h3>";
                output+="   <p>"+data.message+"</p>";
                output+="   <p>"+data.date+"</p>";
                output+="</span>"
                output+="</div>";
               
                // id가 content인 ul태그 안에 추가
                $(output).appendTo("#content");
                //스크롤 이동
                $("body").scrollTop($(document).height());


//                $("#content").listview('refresh');//목록 새로 고침
               
            });
           
            //버튼클릭시 메시지 전송
            $("button").click(function(){
                socket.emit("message",{
                    name:$("#name").val(),
                    message:$("#message").val(),
                    date:new Date().toLocaleTimeString()
                });
            });
           
           
        });
    </script>
</head>
<body>
   <div data-role="page" id="page1">
       <div data-role="header">
           멀티 채팅
       </div>
       <div data-role="cotent">
            <h1>이름</h1>
            <input type="text" id="name">
            <a data-role="button" href="#page2">시작</a>
       </div>
     
      
   </div>
   <div data-role="page" id="page2">
       <div data-role="header">
           멀티 채팅
       </div>
       <div data-role="content">
           <div id="content">
              
              
           </div>
           <input type="text" id="message">
           <button>전송</button>
       </div>
   </div>
   
</body>
</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

node.js 미니프로젝트 참고  (0) 2017.09.08
node.js board.js express 4.x  (0) 2017.09.07
node.js socket개념 정리  (0) 2017.09.07
9/7 product.html  (0) 2017.09.07
nodejs연습문제01  (0) 2017.09.06
'TIS_2017/응용sw_2기' Related Articles more
Comments