root
/
UseStudio.NodejsSocket


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #box {    overflow: auto;width: 800px; height: 300px; border: 1px solid #dcdcdc; }
        #txtInput {  width: 430px; }
        .userlogin{width:800px;height: 50px;;}
        .userlogin div{float:left;width:120px;}
        
    </style>
    <!-- <script src="http://lt.1473.cn/socket.io/socket.io.js" type="text/javascript"></script>-->
    <script src="http://127.0.0.1:888/socket.io/socket.io.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js "></script>    
    <script type="text/javascript">
        //TODO 这里是负责建立热线的代码  
        var socket = io.connect('http://127.0.0.1:888');
        //var socket = io.connect('http://lt.1473.cn');
        // TODO 这里负责接收服务端广播消息的代码
        socket.on('broadCast', function (r) {
            $("#messageArea")[0].innerHTML+="广播消息："+r.msg+'<br>';
        });
        function sendMsg() {
            var input = document.getElementById('txtInput');
            var str = input.value;//获取文本框中的值
            msgbox(str);//客户端信息追加到div
            //发送到服务端
            socket.emit('broadCast', { msg: str });//向服务端发送消息
            //console.log('[client]' + str);
            input.value = ""; 
            input.focus(); //输入框聚焦
        }
        //输出信息到div
        function msgbox(str) {
            var box = document.getElementById('messageArea');
            box.innerHTML += str + '<br>';
        }
        //用户登录，不用注册，输入任何信息均能登录
        userLogin=function(){
            var username=document.getElementById("usernameinput").value;
            //发送到服务端
            socket.emit('socketLogin', { msg: username });//向服务端发送消息
        }
        //在好友区域添加好友
        socket.on('addFriend', function (r) {
            var _fdiv=$$("div",{"innerHTML":r.msg,"style":{"cssText":"width:200px;height:25px;margin:2px;background-color:gray;"},"onclick":function(){
                    alert("123");
            }},$("#allFriends")[0]);
            //$("#allFriends")[0].innerHTML+=r.msg+'<br>';
        });
        //登录用户重复提示
        socket.on('UserNameRepeat', function (r) {
            alert("用户名重复");
            //$("#allFriends")[0].innerHTML+=r.msg+'<br>';
        });
    </script>
</head>
<body>
    <h2>Chat Client</h2>
    <div class="userlogin">
        <input id="usernameinput" type='text' >
        <input type='button' value="登录"  onclick='userLogin();'>
    </div>
	<div id='box' >
        <div id="messageArea" style="width:500px;height: 300px; border-right:1px solid #dcdcdc; ; float: left;">
             
        </div>
        <div id="allFriends" style="width:295px;height: 300px; float: left;" ></div>
    </div>
    <div>
        <div id="messageType" style="float:left;width:150px;">广播</div>
        <input type='text' id='txtInput' ><input type='button' value='发送消息' onclick='sendMsg();'>
    </div>
</body>
</html>