基于node实现websocket协议


Posted in Javascript onApril 25, 2016

一、协议
WebSocket是一种基于TCP之上的客户端与服务器全双工通讯的协议,它在HTML5中被定义,也是新一代webapp的基础规范之一。

它突破了早先的AJAX的限制,关键在于实时性,服务器可以主动推送内容 到客户端!可能的应用有:多人在线游戏,即时聊天,实时监控,远程桌面,新闻服务器等等。

对于我自己,当前最想尝试的是canvas+websocket组合起来能做什么。

二、实现
由于握手的过程是一个标准的HTTP请求,因此 websocket 的实现有两种选择:1)TCP上实现; 2) 现有HTTP软件上实现。后者的优势在于可以共用现有的HTTP服务器端口,并且不用重新实现认证功能和解析HTTP请求的功能。

这个示例中使用的 node 的HTTP模块。(TCP版及所有文件见 附件)

1、node服务器端代码:

var http = require('http');
var url = require('url');
// var mime = require('mime');
var crypto = require('crypto');

var port = 4400;
var server = http.createServer();
  server.listen(port,function() {
    console.log('server is running on localhost:',port);
    server
    .on('connection',function(s) {
      console.log('on connection ',s);
    })
    .on('request',onrequest)
    .on('upgrade',onupgrade);
  });

var onrequest = function(req,res) {
  console.log( Object.keys(req) ,req.url,req['upgrade']);
  if( !req.upgrade ){
    // 非upgrade请求选择:中断或提供普通网页
    res.writeHead(200, { 'content-type': 'text/plain' });
    res.write( 'WebSocket server works!' );
    
  }
  res.end();
  return;
};

var onupgrade = function (req,sock,head) {
  // console.log('方法:',Object.keys(sock));
  if(req.headers.upgrade !== 'WebSocket'){
    console.warn('非法连接');
    sock.end();
    return;
  }
  
  bind_sock_event(sock);

  try{
    handshake(req,sock,head);
  }catch(e){
    console.error(e);
    sock.end();
  }
};

// 包装将要发送的帧
var wrap = function(data) {
  var fa = 0x00, fe = 0xff, data = data.toString()
    len = 2+Buffer.byteLength(data),
    buff = new Buffer(len);

  buff[0] = fa;
  buff.write(data,1);
  buff[len-1] = fe;
  return buff;
}
// 解开接收到的帧
var unwrap = function(data) {
  return data.slice(1,data.length-1);
}

var bind_sock_event = function(sock) {
  sock
  .on('data',function(buffer) {
    var data = unwrap(buffer);
    console.log('socket receive data : ',buffer,data,'\n>>> '+data);
    // send('hello html5,'+Date.now())
    sock.emit('send',data);
  })
  .on('close',function() {
    console.log('socket close');
  })
  .on('end',function() {
    console.log('socket end');
  })
  .on('send',function(data) { //自定义事件
    sock.write(wrap(data),'binary');
  })
};

var get_part = function(key) {
  var empty  = '',
    spaces = key.replace(/\S/g,empty).length,
    part  = key.replace(/\D/g,empty);
  if(!spaces) throw {message:'Wrong key: '+key,name:'HandshakeError'}
  return get_big_endian(part / spaces);
}

var get_big_endian = function(n) { 
  return String.fromCharCode.apply(null,[3,2,1,0].map(function(i) { return n >> 8*i & 0xff }))
}

var challenge = function(key1,key2,head) {
  var sum = get_part(key1) + get_part(key2) + head.toString('binary');
  return crypto.createHash('md5').update(sum).digest('binary');
}

var handshake = function(req,sock,head) {
  var output = [],h = req.headers, br = '\r\n';

  // header
  output.push(
    'HTTP/1.1 101 WebSocket Protocol Handshake','Upgrade: WebSocket','Connection: Upgrade',
    'Sec-WebSocket-Origin: ' + h.origin,
    'Sec-WebSocket-Location: ws://' + h.host + req.url,
    'Sec-WebSocket-Protocol: my-custom-chat-protocol'+br
  );
  // body
  var c = challenge(h['sec-websocket-key1'],h['sec-websocket-key2'],head);
  output.push(c);

  sock.write(output.join(br),'binary');
}

2、浏览器客户端代码:

<html>
<head>
  <title>WebSocket Demo</title>
</head>
<style type="text/css">
 textarea{width:400px;height:150px;display:block;overflow-y:scroll;}
 #output{width:600px;height:400px;background:whiteSmoke;padding:1em .5em;color:#000;border:none;}
 button{padding:.2em 1em;}
</style>
<link href="layout.css" rel="stylesheet" type="text/css" /> 
<body>

<textarea id="output" readonly="readonly"></textarea>
<br>
<textarea id="input"></textarea>
<button id="send">send</button>

<script type="text/javascript">
// localhost
var socket = new WebSocket('ws://192.168.144.131:4400/')
socket.onopen = function(e) {
  log(e.type);
  socket.send('hello node');
}
socket.onclose = function(e) {
  log(e.type);
}
socket.onmessage = function(e) {
  log('receive @ '+ new Date().toLocaleTimeString() +'\n'+e.data);
 output.scrollTop = output.scrollHeight
}
socket.onclose = function(e) {
  log(e.type);
}
socket.addEventListener('close',function() {
  log('a another close event handler..');
},false);

// dom
var id = function(id) {
  return document.getElementById(id);
}
var output = id('output'), input = id('input'), send = id('send');
var log = function(msg) {
  output.textContent += '> '+msg + '\n'
}
send.addEventListener('click',function() {
  socket.send(input.value);
},false);

</script>
</body>
</html>

三、细节
在 http 协议之上的 websocket 协议实现只有两步:握手,发送数据。

1、握手
握手的过程被称为 challenge-response。首先客户端发起一个名为Upgrade的HTTP GET请求,服务器验证此请求,给出101响应以表示接受此次协议升级,握手即完成了。

chrome inspector美化过的握手信息:

Request URL:ws://192.168.144.131:4400/pub/chat?q=me
Request Method:GET
Status Code:101 WebSocket Protocol Handshake

Request Headers
Connection:Upgrade
Host:192.168.144.131:4400
Origin:http://localhost:800
Sec-WebSocket-Key1:p2    G 947T 80  661 jAf2
Sec-WebSocket-Key2:z Z Q ^326 5 9= 7s1  1 7H4
Sec-WebSocket-Protocol::my-custom-chat-protocol
Upgrade:WebSocket
(Key3):7C:44:56:CA:1F:19:D2:0A

Response Headers
Connection:Upgrade
Sec-WebSocket-Location:ws://192.168.144.131:4400/pub/chat?q=me
Sec-WebSocket-Origin:http://localhost:800
Sec-WebSocket-Protocol:my-custom-chat-protocol
Upgrade:WebSocket
(Challenge Response):52:DF:2C:F4:50:C2:8E:98:14:B7:7D:09:CF:C8:33:40

请求头部分

Host: websocket服务器主机
Connection: 连接类型
Upgrade: 协议升级类型
Origin: 访问来源
Sec-WebSocket-Protocol: 可选,子协议名称,由应用自己定义,多个协议用空格分割。(*另外一个仅剩的可选项是cookie)
Sec-WebSocket-Key1: 安全认证key,xhr请求不能伪造'sec-'开头的请求头。
Sec-WebSocket-Key2: 同上
Key3: 响应体内容,8字节随机。
响应头部分

Sec-WebSocket-Protocol: 必须包含请求的子协议名
Sec-WebSocket-Origin: 必须等于请求的来源
Sec-WebSocket-Location: 必须等于请求的地址
Challenge Response: 响应体内容,根据请求中三个key计算得来,16字节。
应答字符串计算过程伪代码:

part_1 = key1中所有数字 / key1中空格数量
part_2 同上
sum = big_endian(part_1)+big_endian(part_2)+key3
challenge_response = md5_digest(sum);

32位整数的big_endian计算策略:

# 很类似于rgba颜色计算,从下面的函数可以看出计算过程
var big_endian = function(n) {
  return [3,2,1,0].map(function(i) { return n >> 8*i & 0xff });
}
big_endian(0xcc77aaff);
// -> [204, 119, 170, 255]

2、发送数据
WebSocket API的被设计成用事件处理数据,客户端只要得到事件通知就可以获取到完整的数据,而不需要手动处理缓冲器。

这种情况下,每一笔数据被称为一帧。在规范的定义中,它的头部必须以0x00开始,尾部属性以0xff结束,这样每一次数据发送至少有两个字节。

服务器实现中,收到数据时要截掉头尾;而发送数据是要包装头尾。格式如下:

# '你好'的原始二进制表示,请求头和这里都是utf8编码
<Buffer e4 bd a0 e5 a5 bd>
# 包装后的二进制表示。
<Buffer 00 e4 bd a0 e5 a5 bd ff>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
json数据的列循环示例
Sep 06 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Bootstrap每天必学之导航组件
Apr 25 #Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
javascript断点调试心得分享
Apr 23 #Javascript
基于 Node.js 实现前后端分离
Apr 23 #Javascript
javascript学习指南之回调问题
Apr 23 #Javascript
探寻JavaScript中this指针指向
Apr 23 #Javascript
javascript中this指向详解
Apr 23 #Javascript
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue上传图片组件编写代码
2017/07/26 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python对数组进行反转的方法
2015/05/20 Python
python实现将文本转换成语音的方法
2015/05/28 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
美国电视购物:QVC
2017/02/06 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
四风问题查摆材料
2014/08/25 职场文书
大学生实习证明范本
2014/09/19 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
SQL Server删除表中的重复数据
2022/05/25 SQL Server