在前后端数据交互的时候我们经常使用的是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); //给每一个链接发送数据 }); }
有说的不对的欢迎大家吐槽，大家相互学习。