【HTML5 WebSocket】WebSocket对象特性和方法
《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对象特性和方法的更多相关文章
- 学习html5的WebSocket连接
1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...
- 认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- HTML5之WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- 使用Html5下WebSocket搭建简易聊天室
一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...
- HTML5的Websocket(理论篇 I)
HTML5的Websocket(理论篇 I) ** 先请来TA的邻居:** http:无状态.基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么) t ...
- 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)
本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...
- html5利用websocket完成的推送功能(tomcat)
html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...
- HTML5之WebSocket && https://zhuanlan.zhihu.com/p/23467317
在认识websocket之前,我们必须了解的是websocket有什么用? 他能解决我们遇到的什么问题? 如果没用,那么我们就么有使用它的必要的. websocket就是建立起全双工协议的,提高了效率 ...
- HTML5 and Websocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
随机推荐
- [TC14860]SquadConstructor2
[TC14860]SquadConstructor2 题目大意: 有\(n(n<2^m,m\le8)\)个互不相等的数\(v_i\).从中选取\(k(k\le8)\)个数\(b_i\),求\(\ ...
- Codeforces Beta Round #1 B. Spreadsheets 模拟
B. Spreadsheets 题目连接: http://www.codeforces.com/contest/1/problem/B Description In the popular sprea ...
- 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 ...
- iOS UIPrintInteractionController打印
- (void)printData{ //为打印做准备,创建一个指向sharedPrintController的引用 UIPrintInteractionController *printer = [ ...
- 解决URL中包含“%2F”导致Apache地址重写mod_rewrite失效的问题
在使用Apache地址重写mod_rewrite期间,发现,当URL和PATH_INFO中出现%2f(/)或者%5c(\), 会被认为这是个不合法的请求, Apache将会直接返回"404 ...
- [EF]使用EF简单增删改查
目录 认识EF 添加数据 删除数据 修改数据 查询数据 总结 认识EF ADO.NET Entity Framework 是微软以ADO.NET为基础所发展出来的对象关系对伊(O/R Mapping) ...
- java中关于volatile的理解疑问?
作者:xyzZ链接:https://www.zhihu.com/question/49656589/answer/117826278来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- 【系统自启动】使用windows自带工具管理开机启动项
1.windows+R,键入:msconfig 2.进入启动选项卡 3.将不用自启动的选项 取消勾选即可 点击应用,重启电脑即可
- C#开源框架整理
Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Li ...
- FIS常用功能之资源压缩
fis server start后 资源压缩,只需要使用命令,不需要添加任何配置 fis release --optimize 或: fis release -o 在浏览器访问按F12,观看压缩前后文 ...