Websocket精讲

1. WebSocket出现前

我们知道HTTP协议是半双工通信的,同一时刻数据只能单向流动,而且只能是客户端向服务器发起请求,服务器返回请求结果,服务器不能主动向服务端推送信息。

如果我们需要与服务器进行持续的通信以保持双方信息的同步,就需要把不断地刷新页面,进行请求验证,这样就造成一定资源的浪费。

在WebSocket出现之前,想要持续的通讯,有以下几种解决方案:

(1)短轮询

短轮询通常采用setInterval 或者 setTimeout 来实现。每隔一段时间就发送一次ajax请求:

setInterval(function() {
    $.get("/path/to/server", function(data, status) {
        console.log(data);
    });
}, 1000);

这样就基本实现了每隔一段时间进行一次轮询,但是也存在一定的问题。我们这里设置的请求的时间为,每隔一秒请求一次,如果网络情况不好,一秒钟时间数据还没返回回来,下一个请求就开始了,这就很容易导致数据的顺序错乱,所以可以使用下面的方法:

function poll() {
    setTimeout(function() {
        $.get("/path/to/server", function(data, status) {
            console.log(data);
            // 发起下一次请求
            poll();
        });
    }, 1000);
}

这样设置的话,每次都会在上一次完成的情况下在进行新的请求。

(2)长轮询

上面的传统的轮询方式存在一个很大的问题,就是每次都会发送一个HTTP请求,然而并不是每次都能返回需要的数据,这无疑造成了资源的浪费,也给服务器带来了很大的负担。这时就可以使用长轮询的方式来解决这个问题。

在长轮询机制中,当服务器收到客户端发来的请求后,不会直接进行响应,而是先将这个请求挂起,然后判断服务器端数据是否有更新。如果有更新,则进行响应;如果一直没有数据,则到达一定的时间限制(服务器端设置)才返回。 客户端在处理完服务器返回的信息后,再次发出请求,重新建立连接。

长轮询和短轮询相比,明显是减少了很多不必要的HTTP请求,但是,长轮询在建立连接之后会挂起,等待服务端数据的更新,这样也会导致资源的浪费。

(3)长连接(SSE)

SSE是HTML5新增的功能,全称为Server-Sent Events,也就是服务器发送事件。通过 SSE ,客户端可以自动获取数据更新,而不用重复发送HTTP请求。一旦连接建立,“事件”便会自动被推送到客户端。

服务器端SSE通过事件流(Event Stream) 的格式产生并推送事件。客户端中,SSE借由 EventSource 对象实现。

EventSource 包含五个外部属性:onerroronmessageonopenreadyStateurl,以及两个内部属性:reconnection timelast event ID string。在onerror属性中可以对错误捕获和处理,而 onmessage 则对应着服务器事件的接收和处理。另外也可以使用 addEventListener 方法来监听服务器发送事件,根据event字段区分处理。

var eventSource = new EventSource("/path/to/server");
eventSource.onmessage = function (e) {
    console.log(e.event, e.data);
}
// 或者
eventSource.addEventListener("ping", function(e) {
    console.log(e.event, e.data);
}, false);

SEE的优势在于,它不需要建立或者保持大量客户端发送的请求,节约了资源,提高了应用的性能。但是它只支持单向数据通信,只能从服务端向客户端发送消息。

2. WebSocket 概述

WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。

WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是:服务器可以向客户端主动推动消息,客户端也可以主动向服务器推送消息。

WebSocket原理:客户端向 WebSocket 服务器通知(notify)一个带有所有接收者ID(recipients IDs)的事件(event),服务器接收后立即通知所有活跃的(active)客户端,只有ID在接收者ID序列中的客户端才会处理这个事件。

3. WebSocket 特点

  • 支持双向通信,实时性更强
  • 可以发送文本,也可以发送二进制数据‘’
  • 建立在TCP协议之上,服务端的实现比较容易
  • 数据格式比较轻量,性能开销小,通信高效
  • 没有同源限制,客户端可以与任意服务器通信
  • 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

4. Websocket的使用

在客户端中:

// 在index.html中直接写WebSocket,设置服务端的端口号为 9999
let ws = new WebSocket('ws://localhost:9999');
// 在客户端与服务端建立连接后触发
ws.onopen = function() {
    console.log("Connection open."); 
    ws.send('hello');
};
// 在服务端给客户端发来消息的时候触发
ws.onmessage = function(res) {
    console.log(res);       // 打印的是MessageEvent对象
    console.log(res.data);  // 打印的是收到的消息
};
// 在客户端与服务端建立关闭后触发
ws.onclose = function(evt) {
  console.log("Connection closed.");
};

这里先不管服务端的实现了,以后学到后端的知识再补充……

5. WebSocket的API

5.1 WebSocket构造函数

WebSocket对象作为一个构造函数,用于新建WebSocket实例:

let ws = new WebSocket('ws://localhost:9999');

执行上面的语句之后,就会与服务器进行连接。

5.2 webSocket.readyState

readyState属性会返回实例对象的当前状态,其值共有四种:

  • CONNECTING:值为0,表示正在连接。
  • OPEN:值为1,表示连接成功,可以通信了。
  • CLOSING:值为2,表示连接正在关闭。
  • 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;
}

5.3 webSocket.onopen

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

ws.onopen = function() {
    console.log("Connection open."); 
    ws.send('hello');
};

如果需要指定多个回调函数,可以使用addEventListener方法:

ws.addEventListener('open', function (event) {
    console.log("Connection open."); 
    ws.send('hello');
});

5.4 webSocket.onclose

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

// 在客户端与服务端建立关闭后触发
ws.onclose = function(evt) {
  console.log("Connection closed.");
};

如果需要指定多个回调函数,可以使用addEventListener方法:

ws.addEventListener("close", function(event) {
  console.log("Connection closed.");
});

5.5 webSocket.onmessage

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

ws.onmessage = function(res) {
    console.log(res);       // 打印的是MessageEvent对象
    console.log(res.data);  // 打印的是收到的消息
};

如果需要指定多个回调函数,可以使用addEventListener方法:

ws.addEventListener("message", function(res) {
   console.log(res);       // 打印的是MessageEvent对象
   console.log(res.data);  // 打印的是收到的消息
});

注意,服务器数据可能是二进制数据,也可能是文本,我们需要对数据进行类型的判断:

ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("文本");
  }
  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("二进制");
  }
}

5.5 webSocket.send()

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

ws.send('hello');

5.7 webSocket.bufferedAmount

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

var data = new ArrayBuffer(10000000);
socket.send(data);
if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 未发送完
}

5.8 webSocket.onerror

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

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

如果需要指定多个回调函数,可以使用addEventListener方法:

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

上面总共提到了四种及时通信的协议,从性能的角度来看:

WebSocket > 长连接(SEE) > 长轮询 > 短轮询

但是,我们如果考虑浏览器的兼容性问题,顺序就恰恰相反了:

短轮询 > 长轮询 > 长连接(SEE) > WebSocket

所以,还是要根据具体的使用场景来判断使用哪种方式。

版权声明:
作者:wuhou123
链接:https://wuhou.fun/271.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录