《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. [CF340D]Bubble Sort Graph/[JZOJ3485]独立集

    题目大意: 给你一个序列,对序列中所有逆序对之间连一条边,问图中最大独立集为多大,有哪些点一定在最大独立集中. 思路: 在纸上画一下发现最大独立集一定是元序列的一个LIS,最大独立集必经点就是所有LI ...

  2. java浏览器控件jxbrowser(简单demo模拟自动登录与点击)

    写在前面: 老大让我写个脚本自动给他写dms有一段时间了,说实话当时不知道老大指的这个脚本是什么?毕竟是做web的,难道是写个数据库sql语句脚本吗?也就放在了一边.巧了,最近一个朋友说他之前写了个程 ...

  3. jquery ajax 的封装

    var tooAjaxData = new Object(); tooAjaxData = function () { this.AjaxUrl =" ";}; bookInfoC ...

  4. [转]spring中<tx:advice></tx:advice>意义

    <tx:advice id="tv" transaction-manager="transactionManager"> <tx:attrib ...

  5. Visio画好的图在word中只显示一部分

    外表那个虚框是大小,原来只有一部分,设计-大小-适应绘图.

  6. postgres--流复制

    配置 master 192.168.2.21 5432 slave 192.168.2.22 5432 目录 /var/lib/pgsql/10/data/ 配置主库 配置用户 psql create ...

  7. 18.并发类容器MQ

    package demo7.MQ; public class QueueData { private int id; private String name; private String taskC ...

  8. iOS: 使用故事板和xib设置按钮圆角方法

    使用storyboard如何设置圆角或边框? 通过storyboard的 运行时属性runtime attribute,可以对Button设置圆角或者边框 1.很多人都知道,通常设置一个 Button ...

  9. unity stuck when building

    卡在 packaging assets 这里的话 把文件夹只读属性去掉 应用于子文件夹

  10. 《深入理解Java虚拟机》笔记6

    class文件由无符号数和表两种类型数据构成.表其实相当于一种结构体,内部又嵌套无符号数或者表. 用u1,u2,u4,u8分别代表一个字节,两个字节,四个字节,八个字节的无符号数. 如图中所示,cla ...