HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)

摘要:
Ws.onopen=function(){console.log(“connectsuccess”);当打开事件被触发时,WebSocket已准备好发送和接收数据。如果应用程序接收到打开事件,则可以确定WebSocket服务器成功处理了连接请求。Ws.onopen=functions(){alert(“连接成功”);

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)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Loadrunner11不能调用IE8解决方法大全PHP 将某个http地址的远程图片下载到本地的某个目录下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

003-docker命令-镜像 images:search、pull、rmi、tag、远程镜像仓库命令,本地镜像管理命令

1、远程镜像仓库 docker login/logout:查看 【不常用】 docker push:查看 【不常用】 docker search:从Docker Hub查找镜像   语法:docker search [OPTIONS] TERM   OPTIONS说明: --automated :只列出 automated build类型的镜像; --n...

26.怎样在Swift中定义宏?

  Swift 中没有宏定义,苹果建议使用let 或者 get 属性来替代宏定义值。虽然没有#define,但我们仍然可以使用 #if 并配合编译的配置来完成条件编译。下面会列出Swift项目开发中的一些常用宏定义,并提供源码。 1.常用字体宏定义 import Foundation import UIKit /// 系统普通字体 var gof_Sy...

那些年踩过的WebAPI的坑(一)

Visual Studio创建一个web项目, 在下一步的时候创建WebAPI项目的时候勾选web API之后,系统会生成一个web项目。 首先看一下webapi的路由配置,在App_start/webapiconfig.cs中,可以看到如下代码: 1 public static void Register(HttpConfiguration con...

ES分页

本篇文章将会讲解ES两种分页查询方法以及优缺点 注意:以下文章中的命令和java代码均基于ES5.3.0版本 一、from/size分页 官网文档地址:https://www.elastic.co/guide/en/elasticsearch/reference/5.3/search-request-from-size.html 查询的时候带上from和s...

初识websocket及java服务端的简单实现

概念:WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输 背景:很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的...

UniAPP IAP支付流程

1,plus.payment.getChannels(function(channels) {}) //获取所有支付方式 2,let iap = channels.find(x => x.id == 'appleiap');  //筛选ios内购 iap 3,iap.requestOrder([内购商品ID], function(event) {}...