HTML5 postMessage 和 onmessage API 详细应用

Test Web worker function init(){ var worker = new Worker('compute.js'); //event 参数中有 data 属性，就是子线程中返回的结果数据 worker.onmessage= function (event) { // 把子线程返回的结果添加到 div 上 document.getElementById("result").innerHTML += event.data+""; }; }

 var i=0;

function timedCount(){
for(var j=0,sum=0;j for(var i=0;i sum+=i;
}
}
// 调用 postMessage 向主线程发送消息
postMessage(sum);
}

postMessage("Before computing,"+new Date());
timedCount();
postMessage("After computing,"+new Date());

127.0.0.1 parent.com
127.0.0.1 child.com

value="Send to child.com" onclick="sendIt()" />

Web page from http://child.com:8080

connect : function() {
var location ="ws://localhost:8000/";
// 创建 WebSockets 并传入 WebSockets server 地址
this._ws =new WebSocket(location);
this._ws.onmessage=this._onmessage;
//WebSockets 还提供了 onopen 以及 onclose 事件
this._ws.onopen =this._onopen;
this._ws.onclose =this._onclose;
}

 _onmessage : function(event) {
//event 参数中有 data 属性，就是服务器发送过来的数据
if (event.data) {
var messageBox = document.getElementById('messageBox');
var spanText = document.createElement('span');
spanText.className ='text';
// 把服务器发送过来的数据显示在窗口中
spanText.innerHTML = event.data;
var lineBreak = document.createElement('br');
messageBox.appendChild(spanText);
messageBox.appendChild(lineBreak);
messageBox.scrollTop = messageBox.scrollHeight
- messageBox.clientHeight;
}
},

_onopen : function() {
server._send("Client:Open WebSockets,"+new Date());
},
//message 参数就是客户端向服务器端发送的数据
_send : function(message) {
if (this._ws)
this._ws.send(message);
},
// 此方法提供外部代码调用
send : function(text) {
if (text !=null&& text.length >0)
server._send(text);
},

_onclose : function(m) {
this._ws =null;
}

var server = {
// 对外主要提供 connect 和 send 方法
connect : function() {...},
_onopen : function() {...},
_send : function(message) {...},
send : function(text) {...},
_onmessage : function(event) {...},
_onclose : function(m) {...}
};

// 监听客户端的连接请求
wsServer.on('connect', function(connection) {
function sendCallback(err) {
if (err) console.error("send() error: " + err);
}
// 监听客户端发送数据的请求
connection.on('message', function(message) {
if (message.type === 'utf8') {// 区别客户端发过来的数据是文本还是二进制类型
connection.sendUTF(
"Server:Get message:
"+message.utf8Data, sendCallback
);
}
else if (message.type === 'binary') {
connection.sendBytes(message.binaryData, sendCallback);
}
});
connection.on('close', function(reasonCode, description) {
});
});

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) {
//event 参数中有 data 属性，就是服务器发送过来的数据
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);

// 这里必须设置 Content-Type 为 text/event-stream
response.setHeader("Content-Type", "text/event-stream");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding ("UTF-8");

String id = new Date().toString();
response.getWriter().println("id:"+id);
// 向客户端写两行数据
response.getWriter().println("data:server-sent event is working.");
response.getWriter().println("data:test server-sent event multi-line data");
response.getWriter().println();
response.getWriter().flush();