web Worker和web Socket

首先介绍下他们的用途:

        web socket 可以让服务器主动向客户端发送消息,适合开发聊天,多人游戏等协作类的应用.

        web Work能够让javascript实现多线程,擅长处理大数据计算

具体用法的效果:

1.web Socket 是一种协议,本质和http,tcp一样.它的前缀是ws://或者wss://,后者是加密的.为了使用web Socket,需要在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");
    }
})

2.Web Worker 是一个独立的javascript 线程,运行在后台,适合做费时的大数据计算.

特点:无法访问window或者document对象,不能和前台页面共享数据,不影响前台页面任何操作,可以创建多个worker 线程,每个work代码都要放在一个独立的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("工作线程的结果:"+onEvent.data["name"]+oEvent.data["index"]);
}.false);

//客户端发送消息
myWorker.postMessage(data);

$("#stop").click(function(){
    //停止web worker
    myWorker.terminate();
});

/*----子线程----*/
onmessage = function(oEvent){
    var data = oEvent.data;
    data["name"] = "我是子线程";
    //子线程向主线程发送消息
    postMessgae(data);
}