WebSocket&webWorkers

WebSocket是HTML5开始提供的一种在 单个 TCP 连接 上进行全双工通讯的协议。

实现背景

WebSocket协议之前，双工通信是通过多个http链接来实现，这导致了效率低下。

长久以来,创建实现客户端和用户端之间双工通讯的web app都会造成HTTP轮询的滥用: 客户端向主机不断发送不同的HTTP呼叫来进行询问。

   
   
     
     
     
     

    
    这会导致一系列的问题：
   
   
     
     
     
     
   
   
     
     
     
     

    
    	1.服务器被迫为每个客户端使用
    
    许多不同的底层TCP连接
    
    ：一个用于向客户端发送信息，其它用于接收每个传入消息。
   
   
     
     
     
     
   
   
     
     
     
     

    
    	
    
    2.有线协议有很高的开销，每一个客户端和服务器之间都有HTTP头。
   
   
     
     
     
     
   
   
     
     
     
     

    
    	
    
    3.客户端脚本被迫维护从传出连接到传入连接的映射来追踪回复
    
    。
   
   
     
     
     
     

实现原理

在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” 。在 WebSocket API，浏览器和服务器 只需要做一个握手 的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处：

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器的推送，服务器不再被动的接收到浏览器的请求之后才返回数据，而是在有新数据时就主动推送给浏览器。

var Socket = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

---

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

---

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

---

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

websocket的应用场景：

决定手头的工作是否需要使用WebSocket技术的方法很简单： 你的应用提供多个用户相互交流吗？ 你的应用是展示服务器端经常变动的数据吗？ 如果你的回答是肯定的，那么请考虑使用WebSocket。如果你仍然不确定，并想要更多的灵感，这有一些杀手锏的案例。

1.社交订阅 对社交类的应用的一个裨益之处就是能够即时的知道你的朋友正在做什么。虽然听起来有点可怕，但是我们都喜欢这样做。你不会想要在数分钟之后才能知道一个家庭成员在馅饼制作大赛获胜或者一个朋友订婚的消息。你是在线的，所以你的订阅的更新应该是实时的。 2.多玩家游戏 网络正在迅速转变为游戏平台。在不使用插件（我指的是Flash）的情况下，网络开发者现在可以在浏览器中实现和体验高性能的游戏。无论你是在处理DOM元素、CSS动画，HTML5的canvas或者尝试使用WebGL，玩家之间的互动效率是至关重要的。我不想在我扣动扳机之后，我的对手却已经移动位置。

3.协同编辑/编程 我们生活在分布式开发团队的时代。平时使用一个文档的副本就满足工作需求了，但是你最终需要有一个方式来合并所有的编辑副本。版本控制系统，比如Git能够帮助处理某些文件，但是当git发现一个它不能解决的冲突时,你仍然需要去跟踪人们的修改历史。通过一个协同解决方案，比如WebSocket，我们能够工作在同一个文档，从而省去所有的合并版本。这样会很容易看出谁在编辑什么或者你在和谁同时在修改文档的同一部分。 4.点击流数据 分析用户与你网站的互动是提升你的网站的关键。HTTP的开销让我们只能优先考虑和收集最重要的数据部分。然后，经过六个月的线下分析，我们意识到我们应该收集一个不同的判断标准——一个看起来不是那么重要但是现在却影响了一个关键的决定。与HTTP请求的开销方式相比，使用Websocket，你可以由客户端发送不受限制的数据。想要在除页面加载之外跟踪鼠标的移动？只需要通过WebSocket连接发送这些数据到服务器，并存储在你喜欢的NoSQL数据库中就可以了（MongoDB是适合记录这样的事件的）。现在你可以通过回放用户在页面的动作来清楚的知道发生了什么。

5.股票基金报价 金融界瞬息万变——几乎是每毫秒都在变化。我们人类的大脑不能持续以那样的速度处理那么多的数据，所以我们写了一些算法来帮我们处理这些事情。虽然你不一定是在处理高频的交易，但是，过时的信息也只能导致损失。当你有一个显示盘来跟踪你感兴趣的公司时，你肯定想要随时知道他们的价值，而不是10秒前的数据。使用WebSocket可以流式更新这些数据变化而不需要等待。 6.体育实况更新 现在我们开始讨论一个让人们激情澎湃的愚蠢的东西——体育。我不是运动爱好者，但是我知道运动迷们想要什么。当爱国者在打比赛的时候，我的妹夫将会沉浸于这场比赛中而不能自拔。那是一种疯狂痴迷的状态，完全发自内心的。我虽然不理解这个，但是我敬佩他们与运动之间的这种强烈的联系，所以，最后我能做的就是给他的体验中降低延迟。如果你在你的网站应用中包含了体育新闻，WebSocket能够助力你的用户获得实时的更新。

7.多媒体聊天 视频会议并不能代替和真人相见，但当你不能在同一个屋子里见到你谈话的对象时，视频会议是个不错的选择。尽管视频会议私有化做的“不错”，但其使用还是很繁琐。我可是开放式网络的粉丝，所以用WebSockets getUserMedia API和html5音视频元素明显是个不错的选择。WebRTC的出现顺理成章的成为我刚才概括的组合体，它看起来很有希望，但其缺乏目前浏览器的支持，所以就取消了它成为候选人的资格。

8.基于位置的应用 越来越多的开发者借用移动设备的GPS功能来实现他们基于位置的网络应用。如果你一直记录用户的位置(比如运行应用来记录运动轨迹)，你可以收集到更加细致化的数据。如果你想实时的更新网络数据仪表盘(可以说是一个监视运动员的教练)，HTTP协议显得有些笨拙。借用WebSocket TCP链接可以让数据飞起来。 9.在线教育 上学花费越来越贵了，但互联网变得更快和更便宜。在线教育是学习的不错方式，尤其是你可以和老师以及其他同学一起交流。很自然，WebSockets是个不错的选择，可以多媒体聊天、文字聊天以及其它优势如与别人合作一起在公共数字黑板上画画...

一、概述

HTML5 WebSockets是HTML5中最强大的通信功能，它定义了一个全双工通信信道，仅通过Web上的一个Socket即可进行通信。

目前实时Web应用的实现方式，大部分是围绕轮询和其他服务器端推送技术展开的，Comet、轮询、长轮询、流（streaming）解决方案，所有这些提供实时数据的方式包含有大量额外的、不必要的报头数据，会造成传输延迟。最重要的是为了在半双工HTTP的基础上模拟全双工通信，目前的许多解决方案都是使用了两个连接：一个用于下行数据流，另一个用于上行数据流。这两个连接的保持和协作也会造成大量的资源消耗，并增加了复杂度。

WebSockets就是解决以上问题的方案。为了建立WebSocket通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。

 

现在WebSocket服务器有很多，还在开发中的更多。有一下几种：

• Kaazing WebSocket Gateway：一种基于Java的WebSocket网关。
• mod_pywebsocket：一种基于Python的Apache HTTP服务器扩展。
• Netty：一种包含WebSocket的Java框架。
• node.js：一种驱动多个WebSocket服务器的服务器端JavaScript框架。

对于非原生支持WebSocket的浏览器来说，Kazzing的WebSocket网关包含了完整的客户端浏览器WebSocket模拟支持。

二、HTML5 WebSockets API

1、浏览器支持情况检测

 function loadDemo() {
     if (window.WebSocket) {
         //supported
     } else {
         // not supported
     }
 }

2、WebSocket对象的创建和服务器连接

要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

 url = "ws://localhost:8080/echo";
 w = new WebSocket(url);

 

建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。

 w = new WebSocket(url, ["proto1", "proto2"]);

假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。

 onopen = function(e) {
     //确定服务器选择的协议
     log(e.target.protocol);
 }

 

3、添加事件监听器

WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。

WebSocket对象有三个事件：open、close和message。

 w.onopen = function() {
     log("open");
     w.send("send message");
 }
 w.onmessage = function(e) {
     log(e.data);
 }
 w.onclose = function(e) {
     log("closed");
 }
 w.onerror = function(e) {
     log("error");
 }

 

4、发送消息

当socket处于打开状态（即onopen之后，onclose之前），可以用send方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。

 w.send();

 

你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。

 document.getElementById("sendButton").onclick = function() {
     if (w.bufferedAmount < bufferThreshold) {
         w.send(document.getElementById("inputMessage").value);
     }
 }

WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例

 var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
 w.send(a.buffer);

 

三、例子

书中介绍了一个用Python写的Echo服务，书中的代码可以在http://www.apress.com/9781430238645 的“Source Code/Downloads”中下载下载。

对于JAVA开发人员Tomcat是最熟悉的，在Tomcat8中已经实现了WebSocket API 1.0。Tomcat7也会在不久实现（现在的实现不是WebSocket API 1.0）。

在这里写一下在Tomcat8下执行的例子。

例子由客户端页面和WebSocket服务程序组成，功能在Echo基础上增加一个服务端定时发送信息的功能。

 

 "UTF-8">
 Test WebSocket
 "text/javascript">
     //显示信息
     var log = function(s) {
         if (document.readyState !== "complete") {
             log.buffer.push(s);
         } else {
             document.getElementById("output").textContent += (s + "\n");
             document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;
         }
     }
     log.buffer = [];
     //显示连接状态
     function setConnected(status) {
         document.getElementById("socketstatus").innerHTML = status;
     }
     var ws = null;

     //连接
     function connect() {
         if (ws != null) {
             log("现已连接");
             return ;
         }
         url = "ws://localhost:8080/websocket/mywebsocket";
         if ('WebSocket' in window) {
             ws = new WebSocket(url);
         } else if ('MozWebSocket' in window) {
             ws = new MozWebSocket(url);
         } else {
             alert("您的浏览器不支持WebSocket。");
             return ;
         }
         ws.onopen = function() {
             log("open");
             setConnected("已连接");
             //设置发信息送类型为：ArrayBuffer
             ws.binaryType = "arraybuffer";

             //发送一个字符串和一个二进制信息
             ws.send("thank you for accepting this WebSocket request");
             var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
             ws.send(a.buffer);
         }
         ws.onmessage = function(e) {
             log(e.data.toString());
         }
         ws.onclose = function(e) {
             log("closed");
         }
         ws.onerror = function(e) {
             log("error");
         }
     }

     //断开连接
     function disconnect() {
         if (ws != null) {
             ws.close();
             ws = null;
             setConnected("已断开");
         }
     }

     window.onload = function() {
         connect();
         log(log.buffer.join("\n"));
         //发送页面上输入框的信息
         document.getElementById("sendButton").onclick = function() {
             if (ws != null) {
                 ws.send(document.getElementById("inputMessage").value);
             }
         }
         //停止心跳信息
         document.getElementById("stopButton").onclick = function() {
             if (ws != null) {
                 var a = new Uint8Array([1, 9, 2, 0, 1, 5, 1, 6]);
                 ws.send(a.buffer);
             }
         }
     }


 "disconnect();">
     连接状态："socketstatus">

         "text" id="inputMessage" value="Hello, WebSocket!">
         "sendButton">发送"stopButton" style="margin-left:15px">停止心跳信息

  

    

  

        "connect" οnclick="connect();">连接  

        "disconnect" οnclick="disconnect();">断开  

    

  

    "height:300px; overflow:auto;" id="outputdiv">  

        "output">  

    

  

  

  

 

服务端程序用注解方式驱动

 

 package com.test.wsocket;

 import java.io.IOException;
 import java.nio.ByteBuffer;
 import java.util.Random;
 import java.util.Timer;
 import java.util.TimerTask;

 import javax.websocket.OnClose;
 import javax.websocket.OnMessage;
 import javax.websocket.OnOpen;
 import javax.websocket.PongMessage;
 import javax.websocket.Session;
 import javax.websocket.server.ServerEndpoint;

 @ServerEndpoint("/mywebsocket")
 public class MyWebSocket {

     private Session session;
     private static final Random random = new Random();
     private Timer timer = null;
     //停止信息信息指令
     private static final ByteBuffer stopbuffer  = ByteBuffer.wrap(new byte[]{1, 9, 2, 0, 1, 5, 1, 6});

     /**
      * 打开连接时执行
      * @param session
      */
     @OnOpen
     public void start(Session session) {
         this.session = session;
         try {
             System.out.println("open");
             if (session.isOpen()) {
                 //设置心跳发送信息。每2秒发送一次信息。
                 timer = new Timer(true);
                 timer.schedule(task, 1000, 2000);
             }
         } catch (Exception e) {
             try {
                 session.close();
             } catch (IOException e1) {}
         }
     }

     /**
      * 接收信息时执行
      * @param session
      * @param msg 字符串信息
      * @param last
      */
     @OnMessage
     public void echoTextMessage(Session session, String msg, boolean last) {
         try {
             if (session.isOpen()) {
                 System.out.println("string:" + msg);
                 session.getBasicRemote().sendText(msg, last);
             }
         } catch (IOException e) {
             try {
                 session.close();
             } catch (IOException e1) {
                 // Ignore
             }
         }
     }

     /**
      * 接收信息时执行
      * @param session
      * @param bb 二进制数组
      * @param last
      */
     @OnMessage
     public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) {
         try {
             if (session.isOpen()) {
                 //如果是停止心跳指令，则停止心跳信息
                 if (bb.compareTo(stopbuffer) == 0) {
                     if (timer != null) {
                         timer.cancel();
                     }
                 } else {
                     session.getBasicRemote().sendBinary(bb, last);
                 }
             }
         } catch (IOException e) {
             try {
                 session.close();
             } catch (IOException e1) {
                 // Ignore
             }
         }
     }

     /**
      * 接收pong指令时执行。
      *
      * @param pm    Ignored.
      */
     @OnMessage
     public void echoPongMessage(PongMessage pm) {
         // 无处理
     }

     @OnClose
     public void end(Session session) {
         try {
             System.out.println("close");
             if (timer != null) {
                 timer.cancel();
             }
         } catch(Exception e) {
         }
     }

     /*
      * 发送心跳信息
      */
     public void sendLong(long param) {
         try {
             if (session.isOpen()) {
                 this.session.getBasicRemote().sendText(String.valueOf(param));
             }
         } catch (IOException e) {
             try {
                 this.session.close();
             } catch (IOException e1) {}
         }
     }

     /**
      * 心跳任务。发送随机数。
      */
     TimerTask task = new TimerTask() {
         public void run() {
             long param = random.nextInt(100);
             sendLong(param);
         }
     };

 }

 

 

 "1.0" encoding="UTF-8"?>
 "http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
   websocket

     index.html



         Set Character Encoding
         org.apache.catalina.filters.SetCharacterEncodingFilter

             encoding
             UTF-8


             ignore
             true




         Set Character Encoding
         /*

 

将以上程序部署到Tomcat8下，启动服务。

碍于原作者的代码繁琐，我自己在尝试的过程中也写了一个：

详见http://toplchx.iteye.com/blog/1929427

关闭连接
打开连接

webWorker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

浏览器支持

所有主流浏览器均支持 web worker，除了 Internet Explorer

使用web worker需要以下几步:

检测 Web Worker 支持

在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

创建 web worker 文件

现在，让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：

if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();