Netty学习之实战WebSocket框架

2024-02-03 20:03:34

说到WebSocket技术，其实源于服务器推送技术，在现实中很多时候需要的数据是不断变化的，比如股市数据、聊天软件，因此就需要一种客户端想要在不刷新页面的情况下实时获取到服务器端最新数据的技术，而以往的数据获取都是基于客户端主动请求，服务端返回对应数据。因此就有了服务器推送技术。

　　服务器推送技术主要由以下几种：Ajax短轮询、Ajax长轮询、SSE、HTTP流、WebSocket。

一、服务器推送技术

　　1、Ajax短轮询

　　实现简单，客户端（浏览器）定时向服务器端发送请求，获取最新的数据。可以通过在一个定时器中触发ajax请求来实现。

　　优点：实现非常简单，JS端进行一些更改即可，无需后端服务任何改动；

　　缺点：轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担。

　　　　　　　　　　Netty学习之实战WebSocket框架

 　　代码如下：

//每两秒触发一次ajax请求，获取最新的数据
setInterval(function(){
   //do some ajax call here to retrieve latest data
},2000);

　　2、Ajax长轮询

　　在Ajax轮询的基础上做的一点改进，在后端数据没有更新的时候不再返回空响应，而且后端一直保存连接，直到后端有数据变化，则相应请求并且关闭连接，前端收到数据，马上再次向后端发起请求，并处理刚刚收到的数据。

  • 客户端发起一个请求到服务器端(http request)
  • 服务器端一直保持连接打开，直到有数据数据可发送给客户端，再返回这个请求(http response)
  • 客户端收到服务器端返回的数据后，处理数据，并立马发起一个新的请求
　　　　　　　　　　　　Netty学习之实战WebSocket框架

　　优点：

  • 可以及时获取到最新的数据
  • 相较于轮询策略，减少了请求数量

　　缺点：

　　服务器端要一直保持连接，不能释放，由于一个服务器能够处理的连接数有限，当达到服务器处理的上限的时候，服务器将无法响应新的请求

　　代码如下：　　 

function async() {
    $.ajax({
        url: 'http://api.3g.qq.com',
        success: function() {
            async();
            //success code
        }
    });
}

　　Servlet3 里的异步任务以及Spring带来的DeferedResult都是使用Ajax的长连接。

　　3、HTTP流

　　HTTP流区别于轮询和长轮询方法，它在客户端网页的生命周期内，只需要使用一个HTTP连接，也就是只会向服务器发送一个请求，对于这个请求，服务器会保持HTTP连接（不返回response），然后周期性的向浏览器发送数据。 
//server端示例(nodejs)
let express = require("express");
let app = express();

app.use(express.static("resources"));
app.get("/httpstream",function(req, res){
    var x = 0;
    res.setHeader('Connection', 'Transfer-Encoding');
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.setHeader('Transfer-Encoding', 'chunked');//声明数据传输编码为chunked，让浏览器及时处理
    setInterval(function(){
        res.write(x+++"|"); //每隔2s向客户端发送一次数据
    },2000);
});

app.listen(3000);

　　服务器端接收到请求后，每隔两秒向客户端输出一点文字，但是不会使用res.end()或者res.send()结束当前http请求。

//客户端示例js
var xhr = new XMLHttpRequest();
var received = 0;
var result = "";
xhr.open("get","/httpstream",true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 3) { //readystate 3 表示正在解析数据
    result = xhr.responseText.substring(received);//截取最新的数据
    received += result.length;
    console.log(result);
  }
}
xhr.send();
　　随着不断从服务器端接收到数据，客户端的readyState会周期性的变成3，responseText包含所有的数据源。通过received来记录之前已经处理过的数据长度，然后在responseText中截取最新的数据。 　　　　　　　　　　　　Netty学习之实战WebSocket框架

　　优点：

　　页面的整个生命周期内，只需要建立一个http连接。

　　缺点：

  • 如果接入的客户端过多，服务器端会因为http连接有限而无法为新的客户端提供服务。
  • 客户端接收到的数据流会越来越大，最终可能会引发页面的性能问题

　　4、SSE(Server-Sent-Events)

　　SSE(Server-Sent Events)是基于HTTP实现的一套服务器向客户端发送数据的API。他是针对上面说到的三种方法（轮询，长轮询，HTTP流）的一个标准API实现。使用SSE API可以创建到服务器端的单向连接，服务器可以通过这个连接发送任意数据。它有以下特点：

  • 断开自动连接
  • 服务器响应的MIME类型必须是text/event-stream
  • 需要浏览器API支持(参考浏览器兼容性)

　　　　　　　　　　　　Netty学习之实战WebSocket框架

　　使用方法如下：

//客户端js
var source = new EventSource(url);
//建立连接时触发
source.onopen = function () {
  //do something here
};
//从服务器端接收到新的事件时触发
source.onmessage = function (event) {
  var data = event.data; //服务器返回的数据存放在event.data中
};
//连接异常时触发
source.onerror = function () {
  //do something here
};

　　客户端创建一个EventSource对象，绑定到对应的url，然后监听该对象的onmessage事件就可以获取到最新的数据。

//server端示例(nodejs)
let express = require("express");
let app = express();

app.use(express.static("resources"));
app.get("/httpstream",function(req, res){
    var x = 0;
  res.writeHead(200, {
      "Content-Type":"text/event-stream",
      "Cache-Control":"no-cache",
      "Connection":"keep-alive"
    });
  //每个1s往客户端发送一条数据
  setInterval(function(){
      res.write("data: " + x++ + "\n\n");//发送的数据格式必须是"data: <内容>/n/n"
  },1000);
});

app.listen(3000);

　　5、WebSocket

　　5.1、什么是WebSocket？

　　WebSocket是html5出来的协议，http是不支持久链接的，WebSocket其实是一个新协议，实现了与客户端与服务器双向，基于消息的文本或二进制数据通信；适合于对数据的实时性要求比较强的场景，如即时通信、直播、共享桌面；后端需要单独实现；客户端并不是所有浏览器都支持。

　　5.2、WebSocket通信协议两部分?

  • 一是开放性HTTP握手连接协商连接参数，在交换数据之前，客户端必须与服务器协商适当的参数以建立连接
  • 二是二进制消息分帧机制（接收消息的文本和二进制数据传输）。WebSocket协议提供了很多强大的特性：基于消息的通信、自定义的二进制分帧层、子协议协商、可选的协议扩展，等等。

　　5.3、什么是HTTP协议升级？

　　即先通过HTTP实现握手，然后进行协议升级，后续使用WebSocket协议进行通讯。

　　WebSocket和http协议有一定的交集，前端跟服务端建立websocket连接需要先发送一个htt请求，并再请求数据里表明协议需要升级为websocket。应用层通过sec-websocket-key和sec-websocket-accept标识一个唯一的websocket通道。

　　　　　　　　　　　　　　　　Netty学习之实战WebSocket框架　　　　　　

　　如下所示：

　　　　　　　　　　Netty学习之实战WebSocket框架 

 　　最后，前述握手完成后，如果握手成功，该连接就可以用作双向通信信道交换WebSocket消息。到此，客户端与服务器之间不会再发生HTTP通信，一切由WebSocket 协议接管。　　

　　5.4、如何协议升级

　　WebSocket是通过WebSocketServerHandshaker 处理服务端的websocket协议升级。

　　　　　　　　　　Netty学习之实战WebSocket框架

 　　　　　　　Netty学习之实战WebSocket框架

　　handshaker.handshake的本质是在当前pipeline添加websocket协议的编解码器，并移除http协议编解码器。

 　　5.5、Websocket消息实体-WebSocketFrame

　　WebSocket支持多种消息实体，可以用在不同场景，例如文本、流式二进制数据、心跳检测等。如下图所示，不同的消息实体实现类实现不同的消息功能。

　　Netty学习之实战WebSocket框架

　　5.6、什么是WebSocket子协议-STOMP

　　文本定向消息协议：STOMP协议的前身是TTMP协议（一个简单的基于文本的协议），专为消息中间件设计。它的简单性恰巧可以用于定义webSocket的消息体格式. STOMP协议很多MQ都已支持。

二、WebSocket项目实战演练

　　本博文是一个聊天室的项目实战，代码来自于源码学院，GitHub地址为：https://github.com/kosamino/netty-websocket-server

 　　代码结构及功能如下图所示：

　　　　　　　　　　　　　　Netty学习之实战WebSocket框架

　　系统流程图如下图所示：

Netty学习之实战WebSocket框架

　　另附另一个其余博主的WebSocket项目实战：Netty+WebSocket 获取火币交易所数据项目

上一篇：Markdown语法


下一篇：《程序员的思维修炼》摘抄start:2014年9月27日19:27:07