node.js创建简单聊天室的方法介绍(2)-木庄网络博客

当前第2页返回上一页

//client.html
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js+webSocket聊天室</title>
</head>
<body>
<h1>liky聊天室</h1>
<textarea name="" id="text" ></textarea>
<button id="btn">发送</button>
 
<script src="http://wulv5.com/js/socket.io.min.js"></script>
<script>
    var socket = io.connect("/"); //连接聊天室的io服务器 io服务器的根地址
 
    var oText = document.getElementById("text");
    var oBtn = document.getElementById("btn");
 
    var myMessage = "";
 
    oBtn.onclick = function () {
        var mes = oText.value;
 
        //当消息为空时
        if(!mes){
            return;
        }
        myMessage = mes;
        socket.send(mes); //发送消息到服务器
        oText.value = ""; //清空文本框
    }
 
    //当服务器广播消息时，触发message事件，消息内容在回调函数中
    socket.on('message',function (mm) {
        var p = document.createElement('p');
        p.innerText = mm;
        if(myMessage === mm){
            p.style.cssText = "color:red;margin-left:10%";
        }
        document.body.appendChild(p);
    })
 
</script>
</body>
</html>