HTML5 webSocket

2022-10-03 19:36:04

一、实时web应用的现状

　　在 WebSocket 规范出来之前，开发人员想实现这些实时的 Web 应用，不得不采用一些折衷的方案，其中最常用的就是轮询 (Polling) 和 Comet 技术，而 Comet 技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。

　　1.轮询

　　　　这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。

　　2.长轮询

　　　　长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。

　　3.流

　　　　流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

　　4.上述方案暴露的问题

　　　　综合这几种方案，您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用 Ajax 方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次 HTTP 的请求和应答的过程，而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息，这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂，在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个 HTTP 连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。

二、什么是webSocket

　　WebSocket 协议在2008年诞生，2011年成为国际标准。现在所有浏览器都已经支持了。WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道*的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

三、webScoket的特点

　　（1）建立在 TCP 协议之上，服务器端的实现比较容易

　　（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器

　　（3）数据格式比较轻量，性能开销小，通信高效

　　（4）可以发送文本，也可以发送二进制数据

　　（5）没有同源限制，客户端可以与任意服务器通信

　　（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

四、webSocket示例

　　一个典型的 WebSocket 发起请求和得到响应的例子看起来如下

客户端到服务端： 
GET /demo HTTP/1.1 
Host: example.com 
Connection: Upgrade 
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 
Upgrade: WebSocket 
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 
Origin: http://example.com 
[8-byte security key] 
 
服务端到客户端：
HTTP/1.1 101 WebSocket Protocol Handshake 
Upgrade: WebSocket 
Connection: Upgrade 
WebSocket-Origin: http://example.com 
WebSocket-Location: ws://example.com/demo 
[16-byte hash response]

　　”Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求，请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。从客户端到服务器端请求的信息里包含有”Sec-WebSocket-Key1”、“Sec-WebSocket-Key2”和”[8-byte securitykey]”这样的头信息。这是客户端浏览器需要向服务器端提供的握手信息，服务器端解析这些头信息，并在握手的过程中依据这些信息生成一个 16 位的安全密钥并返回给客户端，以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接。一旦连接建立，客户端和服务器端就可以通过这个通道双向传输数据了。

五、客户端API

　　1.webSocket构造函数

　　　　WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。执行下面语句之后，客户端就会与服务器进行连接。

var ws = new WebSocket(‘ws://localhost:8080‘);

　　2.webSocket.readyState

　　　　readyState属性返回实例对象的当前状态，共有四种。

　　　　　　（1）connecting：值为0，表示正在连接。

　　　　　　（2）open：值为1，表示连接成功，可以通信了。

　　　　　　（3）closing：值为2，表示连接正在关闭。

　　　　　　（4）closed：值为3，表示连接已经关闭，或者打开连接失败。

　　　　示例：

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

　　3.webSocket.onopen

　　　　实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {
  ws.send(‘Hello Server!‘);
}

　　　　如果要指定多个回调函数，可以使用addEventListener方法。

ws.addEventListener(‘open‘, function (event) {
  ws.send(‘Hello Server!‘);
});

　　　4.webSocket.onclose

　　　　实例对象的onclose属性，用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

　　　5.websocket.onmessage

　　　　实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});

　　　　注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。

ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

　　　　除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

　　　6.websocket.send()

　　　　实例对象的send()方法用于向服务器发送数据。　　　

发送文本的例子。
ws.send(‘your message‘);

发送 Blob 对象的例子。
var file = document
  .querySelector(‘input[type="file"]‘)
  .files[0];
ws.send(file);

发送 ArrayBuffer 对象的例子。
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

　　7.websocket.bufferedamount

　　　　实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

　　8.websocket.onerror

　　　　实例对象的onerror属性，用于指定报错时的回调函数。

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

六、Node服务端示例

var WebSocketServer = require(‘websocket‘).server;
var http = require(‘http‘);

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ‘ Received request for ‘ + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ‘ Server is listening on port 8080‘);
});

wsServer = new WebSocketServer({
    httpServer: server,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection‘s origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
  // put logic here to detect whether the specified origin is allowed.
  return true;
}

wsServer.on(‘request‘, function(request) {
    if (!originIsAllowed(request.origin)) {
      // Make sure we only accept requests from an allowed origin
      request.reject();
      console.log((new Date()) + ‘ Connection from origin ‘ + request.origin + ‘ rejected.‘);
      return;
    }
    
    var connection = request.accept(‘echo-protocol‘, request.origin);
    console.log((new Date()) + ‘ Connection accepted.‘);
    connection.on(‘message‘, function(message) {
        if (message.type === ‘utf8‘) {
            console.log(‘Received Message: ‘ + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === ‘binary‘) {
            console.log(‘Received Binary Message of ‘ + message.binaryData.length + ‘ bytes‘);
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on(‘close‘, function(reasonCode, description) {
        console.log((new Date()) + ‘ Peer ‘ + connection.remoteAddress + ‘ disconnected.‘);
    });
});

参考文档：1.http://www.ruanyifeng.com/blog/2017/05/websocket.html

　　　　　2.https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/index.html

　　　　　3.https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

　　　　　4.https://blog.csdn.net/li_jia_wei/article/details/81148053

HTML5 webSocket

码农公寓

一、实时web应用的现状

1.轮询

2.长轮询

3.流

4.上述方案暴露的问题

二、什么是webSocket

三、webScoket的特点

四、webSocket示例

五、客户端API

1.webSocket构造函数

2.webSocket.readyState

3.webSocket.onopen

4.webSocket.onclose

5.websocket.onmessage

6.websocket.send()

7.websocket.bufferedamount

8.websocket.onerror

六、Node服务端示例

相关文章

　　1.轮询

　　2.长轮询

　　3.流

　　4.上述方案暴露的问题

　　1.webSocket构造函数

　　2.webSocket.readyState

　　3.webSocket.onopen

　　　4.webSocket.onclose

　　　5.websocket.onmessage

　　　6.websocket.send()

　　7.websocket.bufferedamount

　　8.websocket.onerror