【HTML5 WebSocket】WebSocket对象特性和方法
2021-06-10 16:02
《HTML5 WebSocket权威指南》学习笔记&3
WebSocket方法的对象特性
1. WebSocket方法
a. send方法
send方法用于在WebSocket连接建立后,client向服务端发送消息。
可分为发送两种消息,一种是普通文本信息,一种是二进制数据。
需注意的是,send方法必须在连接建立以后才干使用。也就是在onopen里使用才不会出错。
发送普通消息
这个比較简单,在上一篇学习WebSocket事件时就用到了,仅仅须要send(message)就可以。
发送二进制数据
在Web应用中,我们还须要发送图片、音频、视频等二进制数据,这就须要Blob类的配合。Blod是二进制大对象。
以下是一个综合演示样例:
ws = WebSocket("ws://echo.websocket.org/echo",[]);
/*
open事件触发表明协议握手成功,WebSocket以及准备好接收和发送数据
*/
ws.onopen = function(e){
console.log("start..");
//发送文本消息
ws.send("Hello World");
//发送二进制对象
var data = new Blob("blob object");
ws.send(data);
}
/*
message消息在client接收到消息时触发
*/
ws.onmessage = function(e){
console.log("收到信息例如以下:");
if(typeof e.data == "string"){
console.log("文本消息:",e,e.data);
}else{
console.log("非文本消息:",e,e.data);
}
ws.close();
}
b. close方法|
close方法用于关闭连接,它能够不带參数表示直接关闭。也能够带上两个參数(code,reason)向服务端提交关闭连接的原因:
1. ws.close()
2. ws.close(1000,"close normally")
2. 对象特性
在学习了WebSocket的方法后,接下来学习一下WebSocket提供的对象特性,这些特性提供了关于WebSocket对象的很多其它信息:readyState、bufferedCount
和protocol。英文稍好的话事实上由字面就可知道这三个对象分别相应着WebSocket的什么特性。以下一一介绍一下:
a. readyState
WebSocket通过仅仅读特性readyState报告其连接状态。连接状态共同拥有四个,使用者能够依据这个特性推断此时的连接状态,然后再进行下一步行动。以下是四个连接状态列表:
特性常量 | 取值 | 状态 |
---|---|---|
WebSocket.CONNECTING | 0 | 连接正在进行中。但还未建立 |
WebSocket.OPEN | 1 | 连接已建立。消息能够開始传递 |
WebSocket.CLOSING | 2 | 连接正在进行关闭 |
WebSocket.CLOSED | 3 | 连接已关闭 |
以下是演示样例:
var ws = new WebSocket("ws://echo.websocket.org/echo",[]);
if(ws.readyState == WebSocket.CONNECTING){
console.log("连接正在建立");
}
ws.onopen = function(e){
if(ws.readyState == WebSocket.OPEN){
console.log("连接已打开!"
);
}
}
b. bufferedAmount
当client向服务端发送大量数据时。浏览器会先将数据缓存到浏览器的发送队列里,然后逐段地向server发送。bufferedAmount这个特性就是告诉client如今队列里还有多少已经缓存了但没发送的数据。
示比例如以下:
var limit = 10240;
var ws = new WebSocket("ws://echo.websocket.org",[]);
/*
open事件触发表明协议握手成功,WebSocket以及准备好接收和发送数据
*/
ws.onopen = function(e){
console.log("start..");
setInterval(function(){
if(ws.bufferedAmount var a = []
for(var i=0;i1000;i++){
a.push(1);
}
ws.send(a);
}
},10);
setInterval(function(){
console.log(ws.bufferedAmount);
},500)
}
c. protocol
protocol特性包括在打开握手期间WebSocketserver选择的协议名,换句话说,protocol特性告诉你特定WebSocket上使用的协议。
上一篇:webpack安装
下一篇:HTML-CSS相关(2)
文章标题:【HTML5 WebSocket】WebSocket对象特性和方法
文章链接:http://soscw.com/essay/93209.html