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

2023-12-27 19:11:34
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. 示例代码
// 创建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('链接已关闭');
}

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

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

文章来源:https://blog.csdn.net/weixin_45620943/article/details/135247720
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。