HTML5的message的使⽤
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 可以接收⼦线程中返回的数据
{
//显⽰出来
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
127.0.0.1  child
模拟页⾯
1. ⽗页⾯
前端websocket怎么用//在⽗页⾯中嵌套iframe嵌⼊⼦页⾯, 并通过postMessage发送数据到⼦窗⼝
<iframe src="//child:8080/TestHTML5/other-domain.html"id="childPage"></iframe>
<input type="text"id="message" />
<input type="button"value="Send message to child"onclick="sendMessage()" />
<script>
function sendMessage()
{
//postMessage第⼀个参数是发送的消息⽂本, 第⼆个是接收信息窗⼝的url地址
.ElementById("message").value, 'child:8080');
}
</script>
1. ⼦页⾯
//在⼦窗⼝中监听message事件，显⽰⽗窗⼝发过来的数据
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Web page from child</title>
<script type="text/JavaScript">
//event 参数中有 data 属性，就是⽗窗⼝发送过来的数据
window.addEventListener("message", function(event)
{
// 把⽗窗⼝发送过来的数据显⽰在⼦窗⼝中
},
false);
</script>
</head>
<body>
Web page from child:8080
<div id="content"></div>
</body>
</html>
WebSocket
WebSocket技术可以让后台随时向前端推送消息。
##后端
WebSockets 服务器端有 jetty 提供的基于 Java 的实现，有 WebSocket-Node 基于 node.js 的实现。本
⽂将使⽤ WebSocket-Node 提供的⽰例代码，稍作修改作为 WebSockets 的服务器端。关于 node.js 的介绍以及使⽤请关于 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 (adyState == EventSource.CLOSED)
{
}
}, false);
后端
本⽂将使⽤基于 Java 的 Servlet 技术实现服务器端。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。