WebSocket 协议两种URL方案
  ws 客户端和服务器之间的非加密流量
  wss 客户端和服务器之间的加密流量

WebSocket Secure 表示使用传输层安全性(SSL)的WebSocket连接 采用HTTPS安全机制来保证HTTP连接安全

1.WebSocket 的构造函数

var ws = new WebSocket("ws://www.websocket.org");

  

2.WebSocket 对象调度4个不同的事件 open message error close
  处理方法:和所有WebAPI一样 用on<事件名称> 处理程序属性
a.WebSocket事件 open
  定义:一旦服务器相应了WebSocket的连接请求,open事件触发并建立一个连接。open事件对应的回调函数称为onopen
代码:

var ws = new WebSocket("ws://www.websocket.org");
ws.onopen = function(){
  console.log("connect success");
};

意义:open事件触发时 WebSocket已经准备好发送和接受数据 应用程序接收到open事件 那么可以确定WebSocket服务器成功处理了连接请求,并且同意与之通信。

b.WebSocket事件 message
  定义:message事件在接收到消息时触发,对应了该事件的回调函数是onmessage
代码:

ws = new WebSocket("ws://127.0.0.1:2346");
ws.onopen = function() {
  alert("连接成功");
  ws.send('tom');
  alert("给服务端发送一个字符串:tom");
};
ws.onmessage = function(e) {
  alert("收到服务端的消息:" + e.data);
};

  

c.WebSocket事件 error
  定义:error 事件在响应意外故障的时候触发。与该事件对应的回调函数为onerror
  如果接收到一个error事件,可以预期很快就会触发close事件。close事件中的代码和原因有时候会告诉你错误的根源。
代码:

ws.onerror = function(e)
{
  cosole.log("WebSocket Error:",e);
  handleErrors(e);
};

d.WebSocket事件 close
定义:close事件在WebSocket连接关闭时触发 对应的回调函数为onclose 一旦关闭 服务终止
代码:

ws.onclose = function(e)
{
  console.log("connection closed",e);
};

3.Websocket有两种方法 send() 和 close()
  a.WebSocket方法: send()
    定义:使用send()方法可以从客户端向服务器发送消息在发送一条或者多条消息之后,可以保持连接打开,或者调用close() 方法终止连接 在调用onopen监视器之后 调用onclose监听器之前 调用send()方法
  代码:

ws.send("Hello Mark");

  注意:send()方法在连接打开的时候发送数据 如果连接不可用 或者 关闭 它会抛出一个无效连接状态的异常
  要避免试图在连接打开之前发送消息

  捕获js异常

var ws = new WebSocket("ws://120.77.245.130:2346");
try{
ws.send('tom');
}catch(e){
alert(e);
}
javascript Error 对象:
name: 错误名称
number: 错误号
description: 描述信息
message: 错误信息
fileName: 错误发生的文件
stack: 错误发生时的调用堆栈

  

    上面这个例子会抛出异常 因为连接尚未打开 要等onopen事件触发了 才能在新构造的WebSocket上发送第一条消息

var ws = new WebSocket("ws://120.77.245.130:2346");
ws.onopen = function()
{
  ws.send('tom');
}

  b.WebSocket方法:close()
    定义:使用close()方法 可以关闭WebSocket连接或者终止连接尝试 如果连接已经关闭,该方法就什么都不做。在调用close()之后,不能在已经关闭的WebSocket上发送任何数据
    参数:close(Param code,Param reason)
        code 数字型的状态代码 reason 一个文本字符串
    传递这两个信息,可以向服务器传递关闭的原因
  代码:

ws.close(1000,"closing normally");

4.Websocket的对象特性
  a. readyState 便于了解WebSocket 连接状态
  代码:

var ws = new WebSocket("ws://120.77.245.130:2346/");
alert(ws.readyState); //返回0 连接正在进行中 但还未建立 WebSocket.CONNECTING
ws.onopen = function(e){
  alert(ws.readyState);
  //返回1 连接已经建立。消息可以在客户端和服务器之间传递 WebSocket.CONNECTING
};
//下面不清楚
//返回2 连接正在进行关闭握手 WebSocket.CLOSING
ws.close();
alert(ws.readyState); //返回3 连接已经关闭,不能打开 WebSocket.CLOSED

  b. bufferedAmount 数据在网上的传输速率 WebSocket对象可以告诉你缓存的大小
    bufferedAmount特性检查已经进入队列,但是尚未发送到服务器的字节数
  代码(使用bufferAmount特性每秒发送更新的例子,如过网络无法承受这一速率,它会做相应的调整):

var THRESHOLD = 10240;

var ws = new WebSocket("ws://120.77.245.130:2346/");

ws.onopen = function(){
setInterval(function(){
  if(ws.bufferedAmount < THRESHOLD)
  {
    ws.send(getApplicationState());
  }
},1000)
}

  

  对于限制应用向服务器发送数据的速率,从而避免网络饱和,bufferedAmount特性很有用。

  c. protocol
   在最初的握手之前为空 服务器没有选择客户端提供的哪个协议 该特性也为空值

5.判断浏览器是否支持WebSocket

if(window.WebSocket)
{
  console.log("this browser support WebSocket");
}else{
  console.log("this browser does not support WebSocket");
}

  

HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)的更多相关文章

  1. 《JS权威指南学习总结--第二章词法结构》

    第二章词法结构 内容要点: 一.注释 1. //表示单行注释 2. /*这里是一段注释*/ 3.一般编辑器里加注释是:选中要加注释的语句,按 ctrl+/ 二.直接量 所谓直接量,就是程序中直接使用的 ...

  2. 学习《Javascript权威指南》的第二章笔记

    1.Javascript区分大小写,但是HTML不区分大小写 2.JS会忽略标识之间的空格,多数情况下也会忽视换行符,所以要采用 整齐.一致的编码风格 3.//用作结尾的注释,/* 和 */可以当跨行 ...

  3. 《JS权威指南学习总结--第九章 类和模板》

    内容要点: 一. 1.第六章详细介绍了JS对象,每个JS对象都是一个属性集合,相互之间没有任何联系.在JS中也可以定义对象的类,让每个对象都共享某些属性,这种"共享"的特性是非常有 ...

  4. 《JS权威指南学习总结--开始简介》

    本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...

  5. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

  6. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  7. Hadoop权威指南学习笔记二

    MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...

  8. 《JS权威指南学习总结》

    JS权威指南学习总结:http://www.cnblogs.com/ahthw/category/652668.html

  9. 《DOM Scripting》学习笔记-——第二章 js语法

    <Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...

随机推荐

  1. django之Model类

    Model是model的基类,该类的metaclass是modelbase,在生成model类对象时是采用modelbase的.django.setup()时,apps会把app建立app_confi ...

  2. Spring的applicationContext.xml的疑问解析

    Spring中注解注入 context:component-scan 的使用说明 通常情况下我们在创建spring项目的时候在xml配置文件中都会配置这个标签,配置完这个标签后,spring就会去自动 ...

  3. Linux定时任务 结合PHP实现实时监控

    首先说说cron,它是一个linux下的定时执行工具.根用户以外的用户可以使用 crontab 工具来配置 cron 任务. 所有用户定义的 crontab 都被保存在/var/spool/cron ...

  4. MySQL(Innodb)索引的原理

    引言 回想四年前,我在学习mysql的索引这块的时候,老师在讲索引的时候,是像下面这么说的 索引就像一本书的目录.而当用户通过索引查找数据时,就好比用户通过目录查询某章节的某个知识点.这样就帮助用户有 ...

  5. uiautomator:Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn't exist!

    尝试用android sdk的uiautomatorviewer抓元素的时候报错:Error while obtaining UI hierarchy XML file: com.android.dd ...

  6. 前后台交互实现点击超链接通过指定的 url 去网络或者文件服务器下载文件

    前台 VUE 界面: <el-table-column prop="attachment" align="center" label="附件详情 ...

  7. SpringBoot配置swagger2(亲测有效,如果没有配置成功,欢迎在下方留言)

    一.导包: <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

  8. vscode-nextgenas编译配置

    文档:https://github.com/BowlerHatLLC/vscode-nextgenas/wiki/asconfig.json asconfig.json { "config& ...

  9. Pronunciation – The Definitive Guide to the Top 100 Words in American English

    Pronunciation – The Definitive Guide to the Top 100 Words in American English Share Tweet Share Tagg ...

  10. Linux sed命令使用方法

    sed(Stream Editor)是Linux中文本处理使用非常广泛的工具,可以对文件内容进行替换.删除.新增.选取特定行等功能.下面通过sed常用实例介绍sed命令的使用方法. sed基本语法 s ...