Web Socket和Web Worker只相差一個(gè)單詞，但是，含義大不相同。

HTML5的Web Socket可以讓服務(wù)器主動(dòng)向客戶端發(fā)送消息，非常適合開發(fā)聊天室，多人游戲等協(xié)作應(yīng)用。

Web Worker能夠讓JavaScript正真意義上實(shí)現(xiàn)多線程，并擅長(zhǎng)處理大數(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)前后臺(tái)通信。

以前，為了實(shí)現(xiàn)客戶端和服務(wù)端長(zhǎng)連接，一般采用setInterval/setTimout輪詢，或者XmlHttpRequest長(zhǎng)輪詢，但是這些方案不算是真正意義上的服務(wù)器推送。Web Socket出現(xiàn)之后，讓網(wǎng)頁和Web服務(wù)器保持持久連接，并且，Web服務(wù)器可以隨時(shí)讓客戶端推送消息。

實(shí)現(xiàn)的核心就是WebSocket對(duì)象，監(jiān)聽事件的API有：onopen，onmessage，onclose，onerror，觸發(fā)事件的API有：send，close。下面是一個(gè)簡(jiǎn)單的客戶端例子：

var socket; 
$("#connect").click(function(event){ 
  // 初始化WebSocket對(duì)象
  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)行在后臺(tái)，適合做費(fèi)時(shí)的大數(shù)據(jù)計(jì)算。特點(diǎn)有：

• 無法訪問window或者document對(duì)象
• 不能和前臺(tái)頁面共享數(shù)據(jù)
• 不影響前臺(tái)頁面任何操作
• 可以創(chuàng)建多個(gè)worker線程，每個(gè)worker代碼都要放在一個(gè)獨(dú)立的JS文件中

HTML5提供Worker對(duì)象創(chuàng)建新線程，主頁面與Web Worker線程通過postMessage傳遞；通過添加onmessage事件監(jiān)聽消息變化，獲取接受到的消息。下面是一個(gè)簡(jiǎn)單的例子：

/*------------主線程 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簡(jiǎn)明教程（七）其他新技術(shù)