江宁建设局网站,单页网站怎么做外链,开通企业网站,网页打开速度慢的解决方法1. 前言 HTML5提出了全双工通讯协议WebSocket#xff0c;让客户端和服务端交换数据更加便利。本篇梳理和总结一下WebSocket的方法和属性#xff0c;并给一个示例代码。
2.WebSocket原型的方法和属性 Websocket继承于EventTarget#xff0c;WebSocket原型对象的方法和属性如…1. 前言 HTML5提出了全双工通讯协议WebSocket让客户端和服务端交换数据更加便利。本篇梳理和总结一下WebSocket的方法和属性并给一个示例代码。
2.WebSocket原型的方法和属性 Websocket继承于EventTargetWebSocket原型对象的方法和属性如下
方法和属性说明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 功能返回连接所传输的二进制数据类型 输出DOMStringblob | 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(链接已关闭);
}本篇给出的示例代码比较简单产品化使用时还需要考虑连接断开后的重连、心跳等等网上已有很多封装好的库可以使用。
注以上如有不合理之处还请帮忙指出大家一起交流学习~
