WebSocket

websocket是什么？

是HTML5新增的属性，一种单个TCP连接上进行全双工通讯的网络通讯协议；

websocket有什么用？

为什么有了http协议，还需要websocket？因为http协议是单向通信协议，只能由客户端发起请求，无法做到服务端主动向客户端推送消息

当服务器有持续的变化时，客户端想要获取只能通过轮询的方法，每隔一段时间就发起一次请求，最典型的场景就是聊天发消息。

传统的http协议不能做到websocket实现的功能，因为http协议是一个请求-响应协议，只能由浏览器发起请求，服务器才能响应这个请求把数据发送给浏览器，服务器不能主动发起请求。

ajax轮询：每隔一段时间发起一个http请求，询问服务器有没有新消息，没有的话就一直发

长轮询：采用阻塞的方式，浏览器发起请求后，如果服务器没有新消息，就先拖一段时间一直不返回，直到有消息才返回，返回完之后，浏览器再次建立连接

ajax轮询和长轮询需要服务器有非常快的处理速度和很高的并发。

websocket最大的特点就是服务器可以主动向客户端发送消息。

其他特点：

• 建立在tcp协议之上（tcp本身是双向通信，http协议对他做了限制，所以http协议只能是单向的）
• 与http协议有着良好的兼容性。默认端口也是80和443，而且握手阶段采用http协议
• 数据格式比较轻量，性能开销小
• 可以发送文本，也可以发送二进制文件
• 没有同源限制
• 协议标识符是ws（如果加密，就是wss）

使用websocket

//在线运行https://jsbin.com/nobemozido/edit?js,console
if(!WebSocket){
    alert('您的浏览器不支持WebSocket')
}else{
    var ws = new WebSocket("url");
    ws.onopen = (evt) => {
        console.log("connection open...");
        ws.send("hello")
    }
    ws.onmessage = (evt) => {
        console.log("received message:"+ evt.data);
        ws.close()
    }
    ws.onclose = (evt) =>{
        console.log("connection closed");
    }
    ws.onerror = (evt) =>{
        console.log("connection error");
    }
}

API

1.WebSocket构造函数

2.WebSocket.readyState

WebSocket实例对象的状态，一共有四种

• 0：connecting，正在连接
• 1：open，连接成功，可以通信了
• 2：closeing，正在关闭
• 3：closed，已经关闭，或者打开失败

3.WebSocket.onopen

用于指定连接成功之后的回调函数

如果想指定多个回调函数，可以使用addEventListener监听WebSocket实例

ws.addEventListener("open", (evt)=>{
    ws.send("send message")
})

4.WebSocket.onclose

用于指定连接关闭后的回调函数

5.WebSocket.onmessage

用于接收到服务器数据后的回调函数

6.WebSocket.send

用于向服务器发送数据

ws.send("hello")

7.WebSocket.close

用于关闭连接

ws.close()

8.WebSocket.onerror

用于指定连接错误时的回调函数