【网络协议】WebSocket知识点梳理和总结

1. 前言

HTML5提出了全双工通讯协议WebSocket，让客户端和服务端交换数据更加便利。本篇梳理和总结一下WebSocket的方法和属性，并给一个示例代码。

2.WebSocket原型的方法和属性

Websocket继承于EventTarget，WebSocket原型对象的方法和属性如下：

|---------------------------------------------------------|--------------------------------------------------------------------------------------------|
| 方法和属性 | 说明 |
| new WebScoket(url, protocols?) | 功能：创建WebSocket实例输入： url 要连接URL protocols? 一个协议字符串或一个包含协议字符串的数组，用于指定子协议，不指定则为空字符串'' |
| WebSocket.prototype.send(data) | 功能：对要传输的数据进行排队输入：string | Blob | ArrayBuffer |
| WebSocket.prototype.close(code?,reason?) | 功能：关闭当前连接 |
| WebSocket.prototype.onopen = handler | 功能：连接建立成功后触发的open事件 |
| WebSocket.prototype.onmessage = function(event) { ... } | 功能：客户端接收服务器数据时触发的message事件注：event.data返回的数据类型 string | Blob | ArrayBuffer |
| WebSocket.prototype.onerror = function(event) { ... } | 功能：连接失败后触发的error事件注：event有3个额外属性 wasClean 连接是否干净地关闭 code 来自服务器数据状态码 reason 字符串，包含服务器发来的消息 |
| WebSocket.prototype.onclose = handler | 功能：连接关闭后触发的close事件 |
| WebSocket.prototype.url | 功能：返回创建WebSocket实例对象时URL的绝对路径（只读）输出：DOMString |
| WebSocket.prototype.protocol | 功能：返回服务端选中的子协议名字，是创建WebSocket实例对时protocols指定的字符串（只读） |
| WebSocket.prototype.extensions | 功能：返回服务器已选择的扩展值（只读）输出：DOMString |
| WebSocket.prototype.binaryType | 功能：返回连接所传输的二进制数据类型输出：DOMString（'blob' | 'arraybuffer'） |
| WebSocket.prototype.bufferedAmount | 功能：返回已被send()放入队列中等待传输，但还未发出UTF-8字节数（只读）输出：number |
| WebSocket.prototype.readyState | 功能：返回连接状态输出：CONNECTING | OPEN | CLOSING | CLOSING |
| 静态常量 WebSocket.prototype.CONNECTING 0 - 正在连接 WebSocket.prototype.OPEN 1 - 连接已打开 WebSocket.prototype.CLOSING 2 - 连接正关闭 WebSocket.prototype.CLOSED 3 - 连接已关闭 ||

3. 示例代码

javascript 复制代码

// 创建WebSocket连接
const ws = new WebSocket('ws://localhost:8080/echo');

// 链接建立成功
ws.onopen = () => {
    // 向服务端发送数据
    ws.send('Hello World!');
}

// 监听服务端发过来的数据
ws.onmessage = (event) => {
    console.dir(event.data);
}

// 连接出错触发error事件
ws.onerror = () => {
    console.log('连接出错');
}

// 服务端关闭WebSocket连接或ws.close()主动关闭连接触发close事件
ws.onclose = () => {
    console.log('链接已关闭');
}

本篇给出的示例代码比较简单，产品化使用时，还需要考虑连接断开后的重连、心跳等等，网上已有很多封装好的库可以使用。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~