《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 连接已关闭
<br>

以下是演示样例:

    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 < limit){
var a = []
for(var i=0;i<1000;i++){
a.push(1);
}
ws.send(a);
}
},10);
setInterval(function(){
console.log(ws.bufferedAmount);
},500)
}

c. protocol

protocol特性包括在打开握手期间WebSocketserver选择的协议名,换句话说,protocol特性告诉你特定WebSocket上使用的协议。

【HTML5 WebSocket】WebSocket对象特性和方法的更多相关文章

  1. 学习html5的WebSocket连接

    1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...

  2. 认识HTML5的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  3. HTML5之WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  4. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  5. HTML5的Websocket(理论篇 I)

    HTML5的Websocket(理论篇 I) ** 先请来TA的邻居:** http:无状态.基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么) t ...

  6. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...

  7. html5利用websocket完成的推送功能(tomcat)

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...

  8. HTML5之WebSocket && https://zhuanlan.zhihu.com/p/23467317

    在认识websocket之前,我们必须了解的是websocket有什么用? 他能解决我们遇到的什么问题? 如果没用,那么我们就么有使用它的必要的. websocket就是建立起全双工协议的,提高了效率 ...

  9. HTML5 and Websocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

随机推荐

  1. [TC14860]SquadConstructor2

    [TC14860]SquadConstructor2 题目大意: 有\(n(n<2^m,m\le8)\)个互不相等的数\(v_i\).从中选取\(k(k\le8)\)个数\(b_i\),求\(\ ...

  2. Codeforces Beta Round #1 B. Spreadsheets 模拟

    B. Spreadsheets 题目连接: http://www.codeforces.com/contest/1/problem/B Description In the popular sprea ...

  3. Educational Codeforces Round 7 F. The Sum of the k-th Powers 拉格朗日插值法

    F. The Sum of the k-th Powers 题目连接: http://www.codeforces.com/contest/622/problem/F Description Ther ...

  4. iOS UIPrintInteractionController打印

    - (void)printData{ //为打印做准备,创建一个指向sharedPrintController的引用 UIPrintInteractionController *printer = [ ...

  5. 解决URL中包含“%2F”导致Apache地址重写mod_rewrite失效的问题

    在使用Apache地址重写mod_rewrite期间,发现,当URL和PATH_INFO中出现%2f(/)或者%5c(\), 会被认为这是个不合法的请求, Apache将会直接返回"404 ...

  6. [EF]使用EF简单增删改查

    目录 认识EF 添加数据 删除数据 修改数据 查询数据 总结 认识EF ADO.NET Entity Framework 是微软以ADO.NET为基础所发展出来的对象关系对伊(O/R Mapping) ...

  7. java中关于volatile的理解疑问?

    作者:xyzZ链接:https://www.zhihu.com/question/49656589/answer/117826278来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  8. 【系统自启动】使用windows自带工具管理开机启动项

    1.windows+R,键入:msconfig 2.进入启动选项卡 3.将不用自启动的选项 取消勾选即可 点击应用,重启电脑即可

  9. C#开源框架整理

    Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Li ...

  10. FIS常用功能之资源压缩

    fis server start后 资源压缩,只需要使用命令,不需要添加任何配置 fis release --optimize 或: fis release -o 在浏览器访问按F12,观看压缩前后文 ...