[聚合文章] 小姐姐，来看看 Websocket 啊

阿辉喜欢《王者荣耀》的张飞，叱咤风云，神挡杀神，佛挡杀佛，当然需要变身。室友问如果你女朋友住院了，你朋友找你王者开黑，你选哪一个，阿辉说，我选张飞吧，我张飞贼溜。老段子了，上次讲这个段子的时候，阿辉还是有女朋友小洁的。

小洁是个学霸，最喜欢跟阿辉讲Websocket。

辉仔，你知道什么是Websocet么？

打团了，打团了，程咬金，不要瞎跑！并没有理她。

哼，小洁冷哼一声

知道知道，不就是HTML5集成的那套规范么？太简单了，待会我给你写一遍~先让我打一波团。阿辉不耐烦道。

你说的这个，没想到小洁拿出了一张纸，上面写着几行代码

if ("WebSocket" in window) {
   alert("您的浏览器支持 WebSocket!");   
   // 打开一个 WebSocket
   var ws = new WebSocket("ws://localhost:9000");
   ws.onopen = function(){      
      // WebSocket 已连接上，使用 send() 方法发送数据
      ws.send("发送数据");
      alert("数据发送中...");
   };
   ws.onmessage = function (evt){
      // 监测信息
      var received_msg = evt.data;
      alert("数据已接收...");
   };
   ws.onclose = function(){      
      // 关闭 WebSocket
      alert("连接已关闭...");
   };
}else{   // 浏览器不支持 WebSocket
   alert("您的浏览器不支持 WebSocket!");
}

阿江是个90后，可是开始秃了。阿江虽然开始秃了，可是阿江有女朋友。阿江虽然有女朋友，但是阿江是有了女朋友之后，才开始秃的。阿江很担心，阿江很惆怅。

不知道为何，阿江发现女朋友最近开始研究使用node写一个Websocket服务器了，这样阿江的头皮发麻了一下，阿江不知所措，难道女友要离开自己了么。

有一天，女友把阿江叫了过来，一起review代码

const http = require('http');
const crypto = require("crypto");
const server = http.createServer((req, res) => {
   res.end();
});

server.on('upgrade', (req, socket, head) => {
  // 获取请求头的信息，并处理
  let key = req.headers['sec-websocket-key'];
  key = crypto.createHash("sha1").update(key +  "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");
  // 返回对应的Headers信息
  const headers = [
    'HTTP/1.1 101 Switching Protocols',
    'Upgrade: websocket',
    'Connection: Upgrade',
    'Sec-WebSocket-Accept: ' + key
  ];
  socket.setNoDelay(true);
  socket.write(headers.join("\r\n") + "\r\n\r\n", 'ascii');
});

server.on('clientError', (err, socket) => {
  socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
});

server.listen(9000);

阿欢最近开始研究Websocket，他查遍资料，很多论坛都推荐了socketio，为什么呢，阿欢不禁问道。

阿欢把官方的demo clone下来仔细研究起来。

以聊天室为例，浏览器客户端的代码

html
// 页面上引用socketio.js
<script src="/socket.io/socket.io.js"></script>

js代码

// 创建一个链接
var socket = io();

// 监听login事件
socket.on('login', function (data) {  
  // Todo
});
// 触发add user事件，服务端会接收到
socket.emit('add user', username);

//不是完整代码

const server = require('http').createServer(app);
const io = require('../lib')(server);

let numUsers = 0;

io.on('connection', function (socket) {   
   var addedUser = false;   
   // 监听到客户端发送的new message信息，并做处理
   socket.on('new message', function (data) {
   // 向所有的客户端广播new message
     socket.broadcast.emit('new message', {
       username: socket.username,
       message: data
     });
   });
   // 当监测到添加用户的时候的处理
   socket.on('add user', function (username) {
     if (addedUser) return;
     // 保存用户名
     socket.username = username;
     ++numUsers;
     addedUser = true;
     // 像对应客户端触发login事件
     socket.emit('login', {
       numUsers: numUsers
     });
     
     // 向所有客户端广播user joined事件
     socket.broadcast.emit('user joined',{
       username: socket.username,
       numUsers: numUsers
     });
   });
});

阿欢疑惑，代码太简单了， 客户端 代码甚至没有看到使用Websocket啊，突然阿欢有个大胆的想法，机智的阿欢打开了调试界面，惊奇的发现，竟然发出了三个请求，原来socketio竟然做了兼容，不紧有Websocket，同时考虑到不支持Websocket的环境，它尽然主动polyfill了，当然兼容主要用的还是轮询的方式。

再看服务端的代码也不难发现，没有涉及到协议的升级，这就说明socketio做了程度很大的包装，让使用者更注重业务的开发。

阿欢心头一暖，内心激动无比，不禁感谢这个时代，这个美妙而和谐的时代。这么多人努力着，奋斗者，为了把这个世界弄得更美好。

据说留言许愿，来年实现的概率就会翻倍哦~

参考文献

1. Web 通信 之 长连接、长轮询（long polling）

   https://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html

2. webSocket、Ajax轮询、长轮询(long poll)

   http://blog.csdn.net/lb7758zx/article/details/51513353

3. nodejs socket 服务端和客户端

   http://blog.csdn.net/lxhjh/article/details/40686481

4. 学习 NodeJS 第八天：Socket 通讯

   http://blog.csdn.net/zhangxin09/article/details/12844975

5. nodejs实现Websocket的数据接收发送

   https://www.cnblogs.com/axes/p/4514199.html

6. HCNA-HNTD——以太网帧结构

   http://blog.csdn.net/wdkirchhoff/article/details/43915825

7. OSI七层模型详解

   http://blog.csdn.net/yaopeng_2005/article/details/7064869

8. OSI七层模型与TCP/IP五层模型

   https://www.cnblogs.com/qishui/p/5428938.html

9. TCP/IP、Http、Socket的区别

   http://jingyan.baidu.com/article/08b6a591e07ecc14a80922f1.html

10. WebSocket数据包协议详解

    https://www.cnblogs.com/smark/archive/2012/11/26/2789812.html

11. The WebSocket Protocol

    https://datatracker.ietf.org/doc/rfc6455/?include_text=1

12. Will WebSocket survive HTTP/2?

    https://www.infoq.com/articles/websocket-and-http2-coexist/