Web Socket和Web Worker只相差一个单词，但是，含义大不相同。
HTML5的Web Socket可以让服务器主动向客户端发送消息，非常适合开发聊天室，多人游戏等协作应用。
Web Worker能够让JavaScript正真意义上实现多线程，并擅长处理大数据计算。
1. Web Socket
websocket是一种协议，本质和http，tcp一样。它的url前缀是ws:// 或者wss://，后者是加密的。为了使用Web Socket，需要在Web服务器上运行特殊程序，负责协调前后台通信。
以前，为了实现客户端和服务端长连接，一般采用setInterval/setTimout轮询，或者XmlHttpRequest长轮询，但是这些方案不算是真正意义上的服务器推送。Web Socket出现之后，让网页和Web服务器保持持久连接，并且，Web服务器可以随时让客户端推送消息。
实现的核心就是WebSocket对象，监听事件的API有：onopen，onmessage，onclose，onerror，触发事件的API有：send，close。下面是一个简单的客户端例子：
var socket;
$("#connect").click(function(event){
// 初始化WebSocket对象
socket = new WebSocket("ws://127.0.0.1:8080/getLog");
// 连接建立后触发
socket.onopen = function(){
console.log("Socket has been opened");
}
// 从服务器收到消息后触发
socket.onmessage = function(msg){
console.log("get log: " ＋ msg.data);
}
// 连接关闭时触发
socket.onclose = function() {
alert("Socket has been closed");
}
// 连接出现问题时触发
socket.onerror = function() {
console.log(“Web Socket Error!”);
}
});
$("#send").click(function(event){
// 客户端向服务端发送消息
socket.send("send from client"); }
);
$("#close").click(function(event){
// 关闭连接
socket.close();
})
可以利用Node.js搭建Web服务器，socket.io插件实现Web Socket，做一些更有趣的实验（https://github.com/etianqq/node_chatroom 是一个简单的聊天室应用，有兴趣可以参考）。
2. Web Worker
Web Worker是一个独立的JavaScript线程，运行在后台，适合做费时的大数据计算。特点有：
- 无法访问
window或者document对象 - 不能和前台页面共享数据
- 不影响前台页面任何操作
- 可以创建多个worker线程，每个worker代码都要放在一个独立的JS文件中
HTML5提供Worker对象创建新线程，主页面与Web Worker线程通过postMessage传递；通过添加onmessage事件监听消息变化，获取接受到的消息。下面是一个简单的例子：
/*------------主线程 index.js---------------*/
var data = {"name": "主线程", index: 1};
var myWorker = new Worker("subworker.js");
// 主线程监听消息事件
myWorker.addEventListener("message", function (oEvent) {
console.log("工作线程的结果：" + oEvent.data["name"] + oEvent.data["index"]);
}, false);
// 客户端发送消息
myWorker.postMessage(data);
$("#stop").click(function () {
// 停止web worker
myWorker.terminate();
});
/*------------子线程 subworker.js---------------*/
// 子线程监听消息事件
onmessage = function (oEvent) {
var data = oEvent.data;
data["name"] = "我是子线程";
// 子线程向主线程发送消息
postMessage(data);
};
微信公众号：
网友评论