postMessage和sendMessage

参考：http://www.cnblogs.com/giggle/p/5350288.html（浅谈webWorker）

http://blog.csdn.net/zha_zi/article/details/41677033 HTML5 中 postMessage sendMessage 用法

Web Workers----工作线程

Html5对多线程的支持。在 HTML5 中提出了工作线程（Web Workers）的概念。用于解决页面之间数据处理的多线程，加快数据处理。如同java中的Thread。

Web Workers 的三大主要特征： 能够长时间运行（响应），理想的启动性能以及理想的内存消耗。

Web Workers 允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers 就可以通过 postMessage 向任务池发送任务请求，执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。Web Workers 进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用 XMLHttpRequest 来处理 I/O，但通常，后台进程（包括 Web Workers 进程）不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM，只能通过返回消息给创建者的回调函数进行处理。

主线程-----------------------------------------------------

var worker = new Worker('***.js');

--仅能存放同域的处理数据用，或ajax调用数据用的js，子线程的js不能操作dom节点，因为子线程不能影响主线程对dom的操作。

worker.postMessage(data); 通过postMessage方法来关联主子线程。data为任意值

worker.terminate();     终止workers,一旦终止则不能再使用，需要重新new worker

worker.message(); 接收信息用，放入监控中则一直有效。

worker.error();  对错误的处理

子线程--------------------------------------------------------

子线程中的js可操作范围：

worker.js执行的上下文与主页面html执行时的上下文并不相同，最顶层的对象并不是window，而是WorkerGlobalScope。

因此window的alert方法在此js中不能用。WorkerGlobalScope的属性方法：

1、self

　　我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用

2、location

　　location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL，即使页面被多次重定向后，这个 URL 资源位置也不会改变。

3、close

　　关闭当前线程，与terminate作用类似

4、importScripts

　　我们可以通过importScripts()方法通过url在worker中加载库函数

5、XMLHttpRequest

　　有了它，才能发出Ajax请求

6、setTimeout/setInterval以及addEventListener/postMessage

　　1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

　　2.可以在worker中通过importScripts(url)加载另外的脚本文件

　　3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

　　4.可以使用XMLHttpRequest来发送请求

　　5.可以访问navigator的部分属性

局限性：

　　1.不能跨域加载JS

　　2.worker内代码不能访问DOM

　　3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

示例：

加载报错“Uncaught DOMException: Failed to construct 'Worker': ”   --部分浏览器不允许本地加载外部文件，需要放在web容器中运行。

 $(function($){
         if(typeof(window.Worker) != 'undefined'){
             var worker = new Worker('worker.js');
             worker.postMessage("主线程：请求处理数据------");
             worker.onmessage = function(e){   // 注意这里message是小写
                 console.log("---" + e.data);
             }
             worker.onerror = function(e){
                 console.log("---" + e.message);
                  worker.terminate();
             }
             worker.postMessage("主线程：请求处理数据------");
         }
         console.log("我只是飘过。。。。。");
      });

 /**
  * worker.js 的上下文顶级对象为WorkerGlobalScope，没有document和windows对象。因此dom元素不能操作，windows的部分方法不能使用.注意保存的编码格式
  * DennyZhao
  * Date:2017/9/22
  */
 var self = this;
　　self.importScripts('script1.js'); //限定为WorkerGlobalScope对象内容

  self.onmessage = function(event){
   //console.log("-----work);//这个不起作用不支持console  
9  self.postMessage(" 开始处理主线程的任务。。。。。。" + event.data); 
  var a = event.data; 
  a += "处理过程￥￥"; 
  self.postMessage("主线程的任务处理完毕........" + a); 
  self.close();  }

结果：
我只是飘过。。。。。
 --- 开始处理主线程的任务。。。。。。主线程：请求处理数据------
 ---主线程的任务处理完毕........主线程：请求处理数据------处理过程￥￥

Cross-document messaging

Cross-document messaging 简介

H5推出的信息队列调用，可以解决两个window之间的信息共享，iframe内外信息传递，本地调用远端页面到本地的跨域信息传递，方法调用等问题。

不过仅限于前台web的页面之间调用，还没办法解决跨域的前台和后台的调用，还需用Ajax的jsonP形式进行传递。

postMessage采用异步通信的方式，因此可以做页面的js动作和渲染用。同时不影响别的代码继续执行，提高处理速度。

1.本地自身使用消息队列的postMessage（如果同时执行在同一个window上，会因为渲染和js处理同时进行导致并发出错）

   window.addEventListener('message',function(e){
                console.log("event------" + e.data);
    },false);
      // postMessage
      $(function($){
         function postMessages(){
             window.postMessage("12345","/");
             console.log("--45678----");
         }
         postMessages();
      });

 结果：异步执行动作
 --45678----
 event------12345

2. iframe中的内外交互

在windows/system32/driver/etc/host 下，修改127.0.0.1

127.0.0.1 test.com

127.0.0.1 test2.com

这样就形成跨域请求，如果不跨域时，可不设置。（以上为测试用）

   <script type="text/javascript"> --父窗体
      // postMessage
      window.addEventListener("message", function(event){
             $("div").css("backgroundColor","#" + event.data);
         });
      $(function($){
          //$("#myIframe")[0].contentWindow.postMessage("getMessage", "http://test2.com:8080"); 放此地方报错，iframe的src还未装载
          $("button").click(function(){
             $("#myIframe")[0].contentWindow.postMessage("getMessage", "http://test2.com:8080"); //注意此处调用子url时需要iframe已经产生渲染完毕。
          });

      });

   </script>

   <script type="text/javascript">  --iFrame
   var color= 50;
       window.addEventListener("message", function(event){
             $('div').css("backgroundColor", "red");

         },false);
      // postMessage
      $(function($){

         $('div').click(function(){
             color = color + 100000;
             $(this).css("backgroundColor", "#" + color);
             window.top.postMessage(color, "http://test.com:8080");
         });

      });

   </script>

3. openWindow中使用

   <script type="text/javascript">
      // postMessage
      window.addEventListener("message", function(event){
             $("div").css("backgroundColor","#" + event.data);
         });
      $(function($){
          //$("#myIframe")[0].contentWindow.postMessage("getMessage", "http://test2.com:8080"); 放此地方报错，iframe的src还未装载
          $("button").click(function(){
             var child = window.open("http://test2.com:8080/webtest/worker/iFrame.html", "_blank");
             var my = setInterval(function(){
                 if(child && !child.closed){
                     child.postMessage("getMessage", "http://test2.com:8080"); //注意此处调用子url时需要window已经产生
                     clearInterval(my);
                 }
             }, 200);
          });

      });

   </script>

   <script type="text/javascript">
   var color= 50;
       window.addEventListener("message", function(event){
             $('div').css("backgroundColor", "red");

         },false);
      // postMessage
      $(function($){

         $('div').click(function(){
             color = color + 100000;
             $(this).css("backgroundColor", "#" + color);
             window.opener.postMessage(color, "http://test.com:8080");
         });

      });

   </script>

WebSockets

WebSockets 简介

在 Web 应用中，HTTP 协议决定了客户端和服务端连接是短连接，即客户端 Request，服务端 Response，连接断开。要想实现客户端和服务端实时通信，只能通过客户端轮询来实现。服务端推送数据也并不是字面上意思上的直接推，其实还是客户端自己取。WebSockets 是 HTML5 规范新引入的功能，用于解决浏览器与后台服务器双向通讯的问题，使用 WebSockets 技术，后台可以随时向前端推送消息，以保证前后台状态统一。

在 WebSockets 中使用 send 和 onmessage发送和接收信息。

WebSockets 服务器端有 jetty 提供的基于 Java 的实现，有 WebSocket-Node 基于 node.js 的实现。

1.选用nodeJs作为服务器端应用(参见nodejs 创建webSocket)

 var WebServer = require('ws').Server;
 var wss = new WebServer({port:3500});
 wss.on('connection', function(ws){
     console.log('创建连接成功！');
     ws.on('message', function(msg){
         console.log(msg);
     });
     setInterval(function(){
         ws.send(Math.random() * 10000);
     },1000);
 });

前台发送信息到后台： 1 <script type="text/javascript"> 2 $(function($){

          var server = {
             ws : {},
             connection : function(){
                 this.ws = new WebSocket("ws://test.com:3500/");
                 this.recieve();
                 this.open();
                 this.ws.onerror = function(error, data){
                     console.log("error : " + error);
                     server.ws.close();
                 }
             },
             send : function(_msg){
                 server.ws.send(_msg);
             },
             recieve : function(){
                 server.ws.onmessage = function(event){
                     if(event.data){
                         $("<div>").text(event.data).appendTo('body');
                     }
                 }
             },
             close : function(){
                 server.ws = null;
             },
             open : function(){
                server.ws.onopen= function(){
　　　　　　　　　　　

35                         console.log("webSocket已经链接.......");

36                         server.ws.send('webSocket已经创建');

             }
          };
          // 连接
         server.connection();
         var i = 0;
         var myInterval = setInterval(function(){
             i = i + 1;
             server.send('发送 ' + i + ': ');
             if(server.ws.readyState != 1){
                 clearInterval(myInterval);
             }
         }, 1000);
      });

   </script>

结果：

 C:\Users\Administrator\Desktop\test\nodeJs>node websocket
 创建连接成功！
 webSocket已经创建
 发送 1:
 发送 2:
 发送 3:
 发送 4:
 发送 5:
 发送 6:
 发送 7:
 发送 8:
 发送 9:
 发送 10:
 发送 11:
 发送 12:
 发送 13:
 发送 14:
 发送 15:
 发送 16:
 发送 17:

 页面接收部分：-----
 4848.977736803326
 7762.762571534494
 3343.602966652355
 1073.4970072202343
 8700.747665594601
 2556.6261964728064
 3065.183213127105
 134.2700772638583
 7319.230923541
 3183.5101594279868
 6892.64312993447
 1412.415079333049
 6946.477577338111
 4111.868595940827
 5996.174673001297
 4171.965367213602
 1790.7039601051533

结果

Server-Sent Events

HTML5 Server-Sent 事件模型允许您从服务器 push 实时数据到浏览器。与Web-Socket相比，Server-Sent Events 仅可由服务器向客户端单方面推送信息，而不能有客户端向服务端推送请求。好处是不用建立服务端的 WebSocket服务。

利用 Eventsource 对象处理与页面间的接收和发送数据。在客户端，我们使用 HTML5+JavaScript，服务端使用 Java。在现存的 Ajax 模式中，web 页面会持续不断地请求服务器传输新数据，由客户端负责请求数据。而在服务端发送模式下，无需在客户端代码中执行连续的数据请求，而是由服务端 push 推送更新。一旦您在页面中初始化了 Server-Sent 事件，服务端脚本将持续地发送更新。客户端 JavaScript 代码一旦接收到更新就将新的数据写入页面中展示出来。使用基于 Java 的 Servlet 技术实现服务器端。

为方便快捷，我们使用nodejs作为服务器端。

 var http = require('http');
 const path = require('path');
 path.basename('index.html');
 var url = require('url');
 var fs = require('fs');
 var filehome = "./html";
 http.createServer(function(req,res){
     console.log('');
     // 文件系统
     if(req.url.search(/\.html|\.js/i) > 0){
         filepath = filehome + req.url;
         fs.readFile(filepath, function(error, data){
             if(error){
                 res.writeHeader(404, {"Content-Type":"text/html;charset='utf-8'"});
                 res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');
                 res.end();
             }else{
                 res.writeHeader(200, {"Content-Type":"text/html;charset='utf-8'"});
                 res.write(data);
                 res.end();
             }
         });
         return;
     }

     // 请求处理
     var pathname = url.parse(req.url).pathname;
     res.writeHeader(200, {"Content-Type":"text/event-stream"});
     if(pathname.search('/serverEvent') > -1){
          setInterval(function(){
              var date = new Date().getTime();
     var content = "data:" + date + "\n\n";
         res.write(content);
         res.flushHeaders();
         //res.end();  此处不能关闭，不然会中断Server-Sent EVENT抛出error
     }, 1000);
     }
 }).listen(3011, '127.0.0.1');

 console.log("启动成功，请去http://127.0.0.1:3011 下尝试。。。。");

客户端：

      $(function($){
         var source = new EventSource('http://127.0.0.1:3011/serverEvent');
         source.onmessage=function(event){
             $("<div>").text(event.data).appendTo('body');
         };
         source.onerror = function(error, event){
             $("<div>").text('Error is occur.....').appendTo('body');
         }

         source.open=function(event){
             $("<div>").text("连接创建成功。。。。。").appendTo('body');
         };
      });