共享线程 SharedWorker

最近在看书时,偶然瞥到一下SharedWorker,当时粗略的看了一下,大约和WebWorker差不多,就随意瞄了一眼,但是...

SharedWorker的实质在于share，不同的线程可以共享一个线程，他们的数据也是共享的。

这个东西引起了我的兴趣,于是赶紧学了一下...

1. 首先创建SharedWorker 对象

main.js

var work = new SharedWorker('./work/worker.js', 'work'),
    worker = work.port;

新建了一个./work/worker.js 的SharedWorker服务,第二个参数为配置,可以为object对象可以是字符串(配置项中的name值)配置相同就使用同一个进程,同时在worker环境可以通过self.name获取

请牢记同源策略

work.port是MessagePort对象

MessagePort接口代表MessageChannel的两个端口之一，允许从一个端口发送消息并监听它们到达另一个端口。

接口的port属性SharedWorker返回MessagePort用于通信和控制共享工作程序的对象。

也就是说,咱们的所有通信都是从 .port对象实现的

SharedWorker 服务

既然是多线程,肯定会有其他线程的js,看,搁这儿呢↓

worker.js

self.addEventListener('connect', function (e) {
    // code...
});

上述代码在worker线程中,不能通过console和debugger查看,先允许我骂一声娘(虽然...但是...!)

oh!!! shift!!!!!

首先,姆们先监听事件onconnect,宝宝们注意了,不是onmessage事件哦!这个适用于监听链接事件的,当你有web开始链接这个共享进程,这个事件就会被调用

可以通过事件的ports参数引用连接端口; 此引用可以onmessage附加一个处理程序来处理通过端口传入的消息，其postMessage()方法可用于使用worker将消息发送回主线程。

//...上方代码
   var port = e.ports[0];
   port.onmessage = function(e) {
     port.postMessage('ojbk');
   }
//...下方代码

 

这样就能在接受和返回信息了~

e.ports是啥东西?我不知道,毕竟不能cosole和debugger,我也没找到对应的资料,看上下文应该是当前链接的端口(纯属瞎猜)

同时还提供了关闭功能close(),具体不再细诉;

 

以上就是入门级知识,就是这么多,我自己研究了一下午,写了一个通用分发的demo

---

华丽的分割线

功能: 同一个浏览器环境下,可以实现一个页面发消息,所有页面可以跟随改变数据

1.html

 
 
 
 



 

 
 提交
 2

work.js

var connectList = [];
var textlist = [],
  connectList = [];
self.addEventListener('connect', function (e) {
  var port = e.ports[0]
  port.start();
  port.addEventListener('message', function (e) {
    // obj.target = e.currentTarget;
    var worker = e.currentTarget,
      res = e.data;
    if (connectList.indexOf(worker) === -1) {
      connectList.push(worker)
    }
    switch (res.status) {
      case 0:
        inform(function (item) {
          if (item != worker) {
            item.postMessage('有新用户加入');
          } else {
            item.postMessage('我是新用户');
          }
        });
        break;

      default:
        textlist.push(res.data.value);
        inform(textlist);
        break;
    }
  })
});
// 分发消息
function inform(obj) {
  var cb = (typeof obj === 'function') ? obj : function (item) {
    item.postMessage(obj);
  }
  connectList.forEach(cb);
}

第一次发文章,很激动~,有不对的地方还请告知,mie~