HTML5 的message的使用

来源：互联网发布：mac 退出dashboard 编辑：程序博客网时间：2024/06/04 13:34

HTML5接口中的postMessage()和onmessageAPI
比如WebWorkers,js提供了多线程的功能,它实现多线程间JavaScript调用的功能
Cross-document messaging, 实现了两个不同域间JavaScript调用
WebSockets, Server-Sent Event

原文地址

WebWorker

//WebWorker为前端网页提供了在后台中运行的方法.WebWorker可以通过postMessage向任务池发送任务请求, 执行完以后再通过postMessage返回消息.//我们可以通过onmessage进行捕捉. 后台进程不能对DOM 操作,不能进行堵塞操作(alert); 只能再onmessage的回调函数进行操作DOM//在主线程里, 创建Worker,并设置message监听.function workerTest(){    var worker = new Worker('test.js');    //event.data 可以接收子线程中返回的数据    worker.onmessage = function(event)    {        //显示出来        document.body.innerHTML += event.data;    }}//test.js中的代码, 这是子线程function add(){    for (var index = 0; index<20; index++)    {    }    //向主线程发送消息    postMessage(index);}

Cross-document messaging

//它可以实现网页之间的跨域通讯.
// 1. 我们需要获取网页所在的窗口对象的实例.
// 2. 其他窗口可以通过postMessage传递数据到接收数据的窗口
// 3.接收数据的窗口可以通过onmessage进行监听

添加模拟host

为了模拟不同域之间的通信,我们需要在hosts文件中添加2个域名, 进行模拟.

127.0.0.1  parent.com127.0.0.1  child.com

模拟页面

父页面
//在父页面中嵌套iframe嵌入子页面, 并通过postMessage发送数据到子窗口

<iframe src="//child.com:8080/TestHTML5/other-domain.html" id="childPage"></iframe><input type="text" id="message" /><input type="button" value="Send message to child.com" onclick="sendMessage()" /><script>    function sendMessage()    {        //postMessage第一个参数是 发送的消息文本, 第二个是接收信息窗口的url地址        document.getElementById("childPage").contentWindow            .postMessage(document.getElementById("message").value, 'http://child.com:8080');    }</script>

子页面

//在子窗口中监听message事件,显示父窗口发过来的数据<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Web page from child.com</title>        <script type="text/JavaScript">            //event 参数中有 data 属性，就是父窗口发送过来的数据            window.addEventListener("message", function(event)            {                // 把父窗口发送过来的数据显示在子窗口中                document.getElementById("content").innerHTML+=event.data+"<br/>";            },            false);        </script>    </head>    <body>        Web page from http://child.com:8080        <div id="content"></div>    </body></html>

WebSocket

WebSocket技术可以让后台随时向前端推送消息。
##后端
WebSockets 服务器端有 jetty 提供的基于 Java 的实现，有 WebSocket-Node 基于 node.js 的实现。本文将使用 WebSocket-Node 提供的示例代码，稍作修改作为 WebSockets 的服务器端。关于 node.js 的介绍以及使用请关于 WebSocket-Node 的使用请参考 WebSocket-Node。
##前端

WebSockets需要前台和后台的双向支持. 后端我们
在前端的WebSockets 中可以使用 send 和 onmessage

由于文本主要介绍 postMessage(send) 和 onmessage 客户端 API 的应用，而 WebSockets 涉及到服务器端代码的实现，所以本文将选取最简单的服务器端框架来编写服务器代码。

Server-Sent Events

允许您从服务器 push 实时数据到浏览器, 他需要后台的支持。
使用 Eventsource 可以处理与页面间的接收和发送数据。

Server-Sent Events 和 WebSockets 有相同之处，WebSockets 实现了服务器端以及客户端的双向通信功能，而 Server-Sent Events 则仅是指服务器端到客户端的单向通信，

前端

由于是服务器端到客户端的单向通信，所以在 Server-Sent Events 中没有 postMessage 方法。
首先，在客户端通过 JavaScript 代码 new 一个 EventSource 实例出来，参数是实现 EventSource 服务器端 URL 地址。然后在这个实例上监听 onmessage 事件接收服务器端发送过来的数据。

if (window.EventSource){    // 创建 EventSource 实例，传入 server 地址    var source = new EventSource('/TestHTML5/ServerSentEvent');}else{    console.log("Your browser doesn't support server-sent event");}// 监听 message 事件，等待接收服务器端发送过来的数据source.addEventListener('message', function(event){    console.log(event.data);}, false);//EventSource 还提供了 onopen 以及 onerror 事件source.addEventListener('open', function(event){}, false);source.addEventListener('error', function(event){    if (event.readyState == EventSource.CLOSED)    {    }}, false);

后端

本文将使用基于 Java 的 Servlet 技术实现服务器端。
参考链接

0 0