webworker中用ajax,WebWorker与WebSocket实现前端消息总线(示例代码)

Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。将二者一结合，业务系统信息流转通知功能完全就可以剥离出来。

架构图

JS Worker

Worker工作在一个专用的作用域DedicatedWorkerGlobalScope,在这个作用域中，不能直接操作DOM节点，不能使用Window对象的默认方法和属性。不过对于网络的访问是完全没有问题的。具体能使用那些对象和方法请点击这里查看

从上图中可明显的看出，Worker在当前架构中实现一个桥梁的左右，上连接socket端中的数据，下负责分发socket中的数据。此处我们先了解下Worker本身的功能实现。

主线程与Worker线程通过方法postMessage相互传递信息

主线程与Worker线程通过事件onmessage接收相互传递的消息

Worker中引入第三方js使用方法importScripts([url,])

主线程调用worker.terminate()结束线程

Worker线程通过调用this.close()结束自身线程

新建一个webworker.js文件，并在其中编写如下代码

//author:herbert qq:464884492

onmessage = function (event) {

if (event.data.code) {

var code = event.data.code.toLowerCase();

switch (code) {

case "init":

var userId = event.data.loggedUserId;

var sessionId = event.data.sessionid;

if (!sessionId) {

this.close();

return;

}

postMessage({ code: "codeone", msg: "你好，组件1" });

postMessage({ code: "codetwo", msg: "你好，组件2" });

break;

default:

break;

}

}

}

注意:在 onmessage 前不能加var否则在IE下会接收不了消息。IE真是让人充满挫败感的浏览器

新建一个index.html页面，在script块中编写以下代码，实现与webworker.js通讯

//author:herbert qq:464884492

var work = new Worker(‘webworker.js‘)

, textone = document.querySelector("#textone")

, textTwo = document.querySelector("#texttwo")

textAll = document.querySelector("#textAll");

work.onmessage = function (event) {

var data = event.data;

if (!!data.code) {

switch (data.code) {

case