root
/
UseStudio.12soft


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>聊天室</title>
    <!-- 这里  -->
    <script src="http://socketio.1473.cn/socket.io/socket.io.js"></script>
    <script src="http://socketio.1473.cn/socket.js"></script>
    <!-- 到这里调用socket的时候必要的 -->
    <style>
        *
        {
            padding: 0px;
            margin: 0px;
        }
        #m div
        {
            font: 18px 微软雅黑;
            height: 36px;
            line-height: 36px;
        }
        #m div:nth-child(odd)
        {
            background: #eee;
        }
    </style>
</head>
<body style="height: 100%;">
    <div id="xxx" style="width: 220px; height: 30px; background: #d6d6d6; position: absolute;
        top: 40%; left: 45%; font: 16px 微软雅黑; text-align: center; line-height: 30px;
        border: 1px solid #d6d6d6;">
        名字
        <button style="width: 20%; height: 30px; float: right;" onclick="queding();">
            确定</button>
        <input id="n" style="width: 60%; padding: 0px; border: 0px; height: 30px; float: right;" />
    </div>
    <div id="m" style="width: 100%; height: 600px; background: white; border: 1px solid #d6d6d6;
        overflow: auto;">
    </div>
    <input id="t" onkeydown="sens()" style="width: 80%; height: 40px; float: left; font: 24px 微软雅黑;" />
    <div id="b" onclick="send();" style="width: 19.7%; height: 40px; float: left; background: #2d2d2d;
        color: White; font: 24px 微软雅黑; text-align: center; line-height: 40px;">
        发送</div>
</body>
<script type="text/javascript">
    function jieshou(msg) {
        var m = document.getElementById("m");
        if (msg.type === "send") {
            m.innerHTML += "<div>" + msg.from + ":" + msg.data + "</div>";
        }
        if (msg.type === "join") {
            m.innerHTML += "<div>" + msg.from + "加入了房间!</div>";
        }
        if (msg.type === "exit") {
            m.innerHTML += "<div>" + msg.from + "退出了房间!</div>";
        }
        m.scrollTop = m.scrollHeight
    }
    function sens(e) { e = e || event; if (e.keyCode === 13) send(); }
    function send() {
        var t = document.getElementById("t");
        t = t.value;
        if (t != "") {
            document.getElementById("t").value = "";
            socket.send(t, "aa");
        }
    }
    function queding(e) {
        socket = new socket(document.getElementById("n").value);
        socket.join("aa", jieshou);
        document.body.removeChild(document.getElementById("xxx"));
        window.onbeforeunload = function () {
            socket.exit('aa');
            return false;
        }
    }

</script>
</html>