WebSoket的概述，API和使用

 

一、概念
      1 Web Socket(套接字)的目标时通过一个长时连接实现语服务器全双工，双向的通信

      2.在js中创建一个Web Socket时，会发送一个http请求到服务器以初始化连接。服务器响应之后，
        连接使用http的upgrade头部从http协议切换到web socket协议。这意味着web socket不能通过
         标准的http服务器实现，而必须使用支持该协议的专用服务器。
      3.因为web socket使用自定义的协议，所有url方案稍有变化：不能使用http://或https://,
       而要使用ws://和wss://。前者是不安全的连接，后者是安全连接。
      4.使用自定义协议而非http协议的好处是，客户端和服务器端之间可以发送非常少的数据，不会
      对http造成任何负担。使用更小的数据包让web socket非常适合带宽和延迟问题比较明显的移动
       应用。
      5.使用自定义协议的缺点是，定义协议的时间比定义js api要长

二、API
      1.创建一个新的Web Socket,就要实例化WebSocket对象并传入提供连接的url
　　　　let socket= new WebSocket('ws://www.example.com/server.php');
      2.readyState属性表示当前状态
　　　　WebSocket.OPENING:连接正在建立 ==》对应常量的值 0
　　　　WebSocket.OPEN:连接已经建立 ==》对应常量的值 1
　　　　WebSocket.ClOSING:连接正在关闭 ==》对应常量的值 2
　　　　WebSocket.ClOSE:连接已经关闭 ==》对应常量的值 3
　  3.WebSocket对象没有readystateChange事件，而是有与上述不同状态对应的其他事件
　　readyState值从0开始
　  4.任何时候都可以调用close()方法关闭 web socket连接，调用之后，readyState立即
　　变为2，并在关闭之后变为3

三、发送和接受数据
　　1.使用send方法向服务器发送数据，可传入字符串，ArrayBuffer或Blob

let socket= new WebSocket('ws://www.example.com/server.php');
let stringData='hello world';
let arrayBufferData = Uint8Array.from(['f','o','o']);
let blobData =new Blob(['f','o','o']);

socket.send(stringData);
socket.send(arrayBufferData);
socket.send(blobData);

 

　　2.服务器向客户端发送消息时，WebSocket对象上会触发message事件。
　　这个message事件与其他消息协议类似，可以在event.data属性访问到有效载荷

socket.onmessage=function(event){
let data= event.data;
//对数据的操作，event.data和发送数据类似，
//为字符串，ArrayBuffer或Blob,
//取决于websocket对象的binaryType属性决定
}

 

四、其他事件
　　　　WebSocket对象在连接生命周期中可能触发3个其他事件。
　　　     　open:在连接成功船舰时触发
　　　     　error:在发生错误时触发，连接无法存续
　　　     　close:在连接关闭时触发

let socket= new WebSocket('ws://www.example.com/server.php');
socket.onopen=function(){
alert('Connection established');
}
socket.onerror=function(){
alert('Connection error');
}
socket.onclose=function(){
alert('Connection closed');
}

　　　　这些事件中只有close事件的event对象上有额外信息。
　　　　这个对象上有三个属性
　　　　　　　　1. wasclean 布尔值，表示连接是否干净关闭
　　　　　　　　2. code 来自服务器的数值状态码；
　　　　　　　　3. reason 字符穿，包含了服务器发出的信息

socket.onclose=function(){
alert('Connection closed');
console.log(`as clean ? ${event.wasclean} Code= ${event.code}
Reason=${event.reason}
`);
}