在前后端数据交互的时候我们经常使用的是ajax，用的是传统的http协议，而http协议有个致命的缺点，就是请求一结束，连接就断开了， 我们为了保持这个链接的，通常会使用cookie，而自从h5出现websocket之后，妈妈再也不用担心我的请求了，可以愉快的玩耍了，websocket是TCP协议，也就是所谓的“长连接”，可以一直保持，客户端与服务端的连接，交互起来自然是so easy ,to happy,这两天利用工作之余，写了一个基于nodejs和websocket的聊天室，只为说明原理，没有做任何的样式，不喜勿喷
这是客户端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="input"/>
<input type="button" value="发送" id="btn"/>
</body>
<script>
var websocket = new WebSocket("ws://localhost:3000/"); function showMessage(type,str){
var div = document.createElement('div');
div.innerHTML = str; if(type == 'enter'){
div.style.color = 'blue';
}else if(type == 'leave'){
div.style.color = 'red';
}
document.body.appendChild(div); }
websocket.onopen = function(){ //连接成功后的回调
document.getElementById('btn').onclick = function(){
var txt = document.getElementById('input').value;
if(txt){
websocket.send(txt);
}
}
}
websocket.onclose = function(){ //关闭连接的回调 }
websocket.onmessage = function(e){ //发送消息的回掉
var msg = JSON.parse(e.data);
showMessage(msg.type,msg.data);
} </script>
</html>
这是服务端：
var ws = require("nodejs-websocket") //导入nodejs-websocket模块
var PORT = 3000;
var clientCount = 0;
// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) { //建立连接时
console.log("New connection")
clientCount++;
conn.nickname = 'user'+clientCount; //每一个用户名
var msg = {};
msg.type = "enter"; //消息的类型，
msg.data = conn.nickname + ' 进入了聊天室';
msg = JSON.stringify(msg); //数据格式化
broadcast(msg); //用于广播数据
console.log(msg);
conn.on("text", function (str) {
console.log("Received "+str)
var msg = {};
msg.type = 'message';
msg.data = conn.nickname + '：' + str;
msg = JSON.stringify(msg);
broadcast(msg);
})
conn.on("close", function (code, reason) { //链接关闭的回调，注意这个一定要写，否则在关闭页面的时候，服务会抛异常；
console.log("Connection closed")
var msg = {};
msg.type = 'leave';
msg.data = conn.nickname +'离开了';
msg = JSON.stringify(msg);
broadcast(msg);
})
conn.on("error", function (err) { //出错时候的回调；
console.log(err);
})
}).listen(PORT);
function broadcast(str){
server.connections.forEach(function(connection){ //遍历所有的链接
connection.sendText(str); //给每一个链接发送数据
});
}有说的不对的欢迎大家吐槽，大家相互学习。