Web Socket和Web Worker只相差一個(gè)單詞芦疏，但是，含義大不相同微姊。
HTML5的Web Socket可以讓服務(wù)器主動向客戶端發(fā)送消息酸茴，非常適合開發(fā)聊天室，多人游戲等協(xié)作應(yīng)用柒桑。
Web Worker能夠讓JavaScript正真意義上實(shí)現(xiàn)多線程弊决，并擅長處理大數(shù)據(jù)計(jì)算噪舀。
1. Web Socket
websocket是一種協(xié)議魁淳，本質(zhì)和http，tcp一樣与倡。它的url前綴是ws:// 或者wss://界逛，后者是加密的。為了使用Web Socket纺座，需要在Web服務(wù)器上運(yùn)行特殊程序息拜，負(fù)責(zé)協(xié)調(diào)前后臺通信。
以前，為了實(shí)現(xiàn)客戶端和服務(wù)端長連接少欺，一般采用setInterval/setTimout輪詢喳瓣，或者XmlHttpRequest長輪詢，但是這些方案不算是真正意義上的服務(wù)器推送赞别。Web Socket出現(xiàn)之后畏陕，讓網(wǎng)頁和Web服務(wù)器保持持久連接，并且仿滔，Web服務(wù)器可以隨時(shí)讓客戶端推送消息惠毁。
實(shí)現(xiàn)的核心就是WebSocket對象，監(jiān)聽事件的API有：onopen崎页，onmessage鞠绰，onclose，onerror飒焦，觸發(fā)事件的API有：send蜈膨，close。下面是一個(gè)簡單的客戶端例子：
var socket;
$("#connect").click(function(event){
// 初始化WebSocket對象
socket = new WebSocket("ws://127.0.0.1:8080/getLog");
// 連接建立后觸發(fā)
socket.onopen = function(){
console.log("Socket has been opened");
}
// 從服務(wù)器收到消息后觸發(fā)
socket.onmessage = function(msg){
console.log("get log: " ＋ msg.data);
}
// 連接關(guān)閉時(shí)觸發(fā)
socket.onclose = function() {
alert("Socket has been closed");
}
// 連接出現(xiàn)問題時(shí)觸發(fā)
socket.onerror = function() {
console.log(“Web Socket Error!”);
}
});
$("#send").click(function(event){
// 客戶端向服務(wù)端發(fā)送消息
socket.send("send from client"); }
);
$("#close").click(function(event){
// 關(guān)閉連接
socket.close();
})
2. Web Worker
Web Worker是一個(gè)獨(dú)立的JavaScript線程荒给，運(yùn)行在后臺丈挟，適合做費(fèi)時(shí)的大數(shù)據(jù)計(jì)算。特點(diǎn)有：
- 無法訪問
window或者document對象 - 不能和前臺頁面共享數(shù)據(jù)
- 不影響前臺頁面任何操作
- 可以創(chuàng)建多個(gè)worker線程志电，每個(gè)worker代碼都要放在一個(gè)獨(dú)立的JS文件中
HTML5提供Worker對象創(chuàng)建新線程曙咽，主頁面與Web Worker線程通過postMessage傳遞；通過添加onmessage事件監(jiān)聽消息變化挑辆，獲取接受到的消息例朱。下面是一個(gè)簡單的例子：
/*------------主線程 index.js---------------*/
var data = {"name": "主線程", index: 1};
var myWorker = new Worker("subworker.js");
// 主線程監(jiān)聽消息事件
myWorker.addEventListener("message", function (oEvent) {
console.log("工作線程的結(jié)果：" + oEvent.data["name"] + oEvent.data["index"]);
}, false);
// 客戶端發(fā)送消息
myWorker.postMessage(data);
$("#stop").click(function () {
// 停止web worker
myWorker.terminate();
});
/*------------子線程 subworker.js---------------*/
// 子線程監(jiān)聽消息事件
onmessage = function (oEvent) {
var data = oEvent.data;
data["name"] = "我是子線程";
// 子線程向主線程發(fā)送消息
postMessage(data);
};
下一節(jié)：HTML5簡明教程（七）其他新技術(shù)
