websocket

该应用需求很简单，就是在web选项卡中打开两个网页，模拟两个web客户端实现聊天功能。

首先是客户端如下：

var oUl=document.getElementById('content');
var oConnect=document.getElementById('connect');
var oSend=document.getElementById('send');
var oInput=document.getElementById('message');
var ws=null;
oConnect.onclick=function(){
ws=new WebSocket('ws://localhost:5000');
ws.onopen=function(){
oUl.innerHTML+="

客户端已连接

";
}
ws.onmessage=function(evt){
oUl.innerHTML+="

"+evt.data+"

";
}
ws.onclose=function(){
oUl.innerHTML+="

客户端已断开连接

";
};
ws.onerror=function(evt){
oUl.innerHTML+="

"+evt.data+"

";
};
};
oSend.onclick=function(){
if(ws){
ws.send(oInput.value);
}
}

这里使用的是w3c规范中关于HTML5 websocket API的原生API，这些api很简单，就是利用new WebSocket创建一个指定连接服务端地址的ws实例，然后为该实例注册onopen(连接服务端),onmessage(接受服务端数据)，onclose(关闭连接)以及ws.send(建立连接后)发送请求。上面说了那么多，事实上可以看到html5 websocket API本身是很简单的一个对象和它的几个方法而已。

服务端采用nodejs，这里需要基于一个nodejs-websocket的nodejs服务端的库，它是一个轻量级的nodejs websocket server端的实现，实际上也是使用nodejs提供的net模块写成的。

server.js
var app=require('http').createServer(handler);
var ws=require('nodejs-websocket');
var fs=require('fs');
app.listen(80);
function handler(req,res){
fs.readFile(__dirname+'/client.html',function(err,data){
if(err){
res.writeHead(500);
return res.end('error ');
}
res.writeHead(200);
res.end(data);
});
}
var server=ws.createServer(function(conn){
console.log('new conneciton');
conn.on("text",function(str){
broadcast(server,str);
});
conn.on("close",function(code,reason){
console.log('connection closed');
})
}).listen(5000);

function broadcast(server, msg) {
server.connections.forEach(function (conn) {
conn.sendText(msg);
})
}

首先利用http模块监听用户的http请求并显示client.html界面，然后创建一个websocket服务端等待用户连接，在接收到用户发送来的数据之后将它广播到所有连接到的客户端。

下面我们打开两个浏览器选项卡模拟两个客户端进行连接，

客户端一连接：

image

请求响应报文如下：

image

可以看到这次握手和我们之前讲的如出一辙，

客户端二的连接过程和1是一样的，这里为了查看我们使用ff浏览器，两个客户端的连接情况如下：

image

发送消息情况如下：

image

可以看到，双方发送的消息被服务端广播给了每个和自己连接的客户端。

从以上我们可以看到，要想做一个点对点的im应用，websocket采取的方式是让所有客户端连接服务端，服务器将不同客户端发送给自己的消息进行转发或者广播，而对于原始的socket，只要两端建立连接之后，就可以发送端对端的数据，不需要经过第三方的转发，这也是websocket不同于socket的一个重要特点。

最后，本文为了说明html5规范中的websocket在客户端采用了原生的API，实际开发中，有比较著名的两个库socket.io和sockjs,它们都对原始的API做了进一步封装，提供了更多功能，都分为客户端和服务端的实现，实际应用中，可以选择使用。
转自https://www.cnblogs.com/myzhibie/p/4470065.html