HTML5简明教程（六）Web Socket和Web Worker

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);
};

下一节：HTML5简明教程（七）其他新技术

更多高阶内容，可移步《小专栏-娜姐聊前端》。