前端学习：前后端数据通信之HTTP与WebSocket？

做可视化，如大屏，往往需要数据实时更新，那么怎么实现呢？

• 下边是简单的思路：
  1. ajax短轮询：每隔一段时间向服务端发送HTTP请求，服务器接收到请求后返回最新的数据!
  2. ajax长轮询：与短轮询类似，每隔一段时间向服务端发送HTTP请求，服务器接收到请求后，如果没有更新的数据，则阻塞程序，等到有数据更新时返回最新的数据!
  3. websocket：全双工（双向同时收发消息）通信，服务端有数据更新时可以主动推送到客户端。

上边说的只是简单的实现方案，至于孰优孰劣要从其各自背后的工作原理说起。说简单点，就是弄明白HTTP、WebSocket与服务器数据进行通信过程的差异！

HTTP

之前的HTTP篇 讲过，HTTP是无状态的，为什么呢？因为HTTP向服务器请求数据时，先要通过TCP与服务器建立连接（三次握手），发送请求，服务器解析请求并返回相应数据，连接关闭（清除身份验证信息），完成一次请求过程。下次请求重新建立连接，重新验证身份。这样一来，ajax轮询的方式，需要不停的发送请求，每次都要重新握手，效率比较低下。
另外，HTTP请求是被动的，即客户端发送request，服务端才会返回response。

WebSocket

2008年诞生的websocket，如今已被各大浏览器支持，与HTTP大致属于求同存异的关系吧！WebSocket在向服务端请求数据是也是需要与服务端建立连接的（而且是借助HTTP建立连接的方式实现的，只不过在建立连接后通过‘Upgrade: websocket’的请求头设置，将协议由HTTP转换为websocket，之后的数据通信便于HTTP再无关系），只不过成功建立连接后，在数据相应之后没有立即关闭（长连接），而是以阻塞的形式继续等待请求(因为协议变成了websocket)，之后所有数据通信均由该连接完成。而且该连接是全双工的，支持客户端和服务端同时收发消息！

比较

通过上面的简单介绍，相信你对HTTP与WebSocket在数据通信方面已经有了一些认识，以及对数据实时更新问题解决的优劣也有了判断。

• ajax轮询：需要重复建立连接，资源消耗大，效率低下；被动更新数据。
• websocket：一次连接，终身受益；主被动兼顾！

实现

参考MDN-Git（JavaScript实现样例），贴出主要代码：

• client.js

function connect() {
  // 以ws(s)开头的URL
  var serverUrl = "ws://" + window.location.hostname + ":6502";
  // 创建连接
  connection = new WebSocket(serverUrl);
  connection.onopen = function(evt) {
    // 成功建立连接
  };

  connection.onmessage = function(evt) {
  // 从服务端接受到的消息
    var msg = JSON.parse(evt.data);
  //通过判断消息type，执行相关操作
    switch(msg.type) {
      case "id":
        // ...
        break;
      case "username":
        // ...
        break;
      case "message":
        // ...
        break;    
    }
}

• server.js

var http = require("http");
var url = require("url");
var fs = require("fs");
var WebSocketServer = require("websocket").server;

var connectionArray = [];
var nextID = Date.now();
var appendToMakeUnique = 1;
const dirname = "./websocket-chat";

var server = http.createServer(function(request, response) {
  console.log(new Date() + " Received request for " + request.url);
  if (request.url === "/") {
    //设置编码
    response.setHeader("Content-Type", "text/html;charset=utf-8");
    fs.createReadStream(dirname + "/index.html").pipe(response);
  } else {
    if (fs.existsSync(`.${request.url}`)) {      
      fs.createReadStream(`.${request.url}`).pipe(response);
    } else {
      response.statusCode = 404;
      response.end();
    }
  }
});
// 发布服务，监听端口6502
server.listen(6502, function() {
  console.log(new Date() + " Server is listening on port 6502");
});

// Create the WebSocket server
var wsServer = new WebSocketServer({
  httpServer: server,
  autoAcceptConnections: true // You should use false here!
});

wsServer.on("connect", function(connection) {
   // ...

  // Handle the "message" event received over WebSocket. This
  // is a message sent by a client, and may be text to share with
  // other users or a command to the server.

  connection.on("message", function(message) {
    if (message.type === "utf8") {
      // Process messages

      var sendToClients = true;
      msg = JSON.parse(message.utf8Data);
      var connect = getConnectionForID(msg.id);

      switch (msg.type) {
        case "message":
          // ...
          break;
        case "username":
         // ...
          break;
      }      
  });

  // Handle the WebSocket "close" event; this means a user has logged off
  // or has been disconnected.
  connection.on("close", function(connection) {
   // ...
});

参考

时间和篇幅有限，不能完全解释清楚，感兴趣的可以讨论或者参看参考列出的内容

• TCP/IP协议，HTTP协议与webSocket协议区别
• 刨根问底HTTP和WebSocket协议(二）
• TCP、UDP、HTTP、SOCKET、WebSocket之间的区别
• MDN-WebSocket API

如果您感觉有所帮助，或者有问题需要交流，欢迎留言评论，非常感谢！
前端菜鸟，还请多多关照！

• Git： BuggMaker
• 博客：倒霉蛋儿_才才