阅读 161

websocket入门

websocket是什么

答: 它是一种网络通信协议,是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

为什么需要websocket? 疑问? 我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

  • 因为 HTTP 协议有一个缺陷:通信只能由客户端发起
  • 我们都知道轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开), 因此websocket应运而生。

WebSocket目前支持两种统一资源标志符ws和wss,类似于HTTP和HTTPS。

通过get可以表明此次连接的建立是以HTTP协议为基础的,返回101状态码。

如果不是101状态码,表示握手升级的过程失败了

101是Switching Protocols,表示服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送这个响应后的空档,将http升级到webSocket。

其中Upgrade和Connection字段告诉服务端,发起的是webSocket协议

Sec-WebSocket-Key是浏览器经过Base64加密后的密钥,用来和response里面的Sec-WebSocket-Accept进行比对验证

Sec-WebSocket-Version是当前的协议版本

Sec-WebSocket-Extensions是对WebSocket的协议扩展

客户端的简单示例

//以下 API 用于创建 WebSocket 对象
var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 

ws.onerror = function(evt) {
  console.log("error!!!"); 
}; 
复制代码

websocket 属性

ws.readyState

CONNECTING:值为0,表示正在连接。

OPEN:值为1,表示连接成功,可以通信了。

CLOSING:值为2,表示连接正在关闭。

CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

ws.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

事件       事件处理程      描述
open     ws.onopen      连接建立时触发
message  ws.onmessage   客户端接收服务端数据时触发
error    ws.onerror     通信发生错误时触发
close    ws.onclose     连接关闭时触发
复制代码

websocket 方法

方法 描述

ws.send() 使用连接发送数据

ws.close() 关闭链接

文章分类
前端
文章标签