共享线程 SharedWorker

最新推荐文章于 2024-05-08 16:17:50 发布

ForxJs

最新推荐文章于 2024-05-08 16:17:50 发布

阅读量6.2k

点赞数 4

文章标签： html javascript SharedWork

本文链接：https://blog.csdn.net/qq_38177681/article/details/82048895

版权

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

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

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

首先创建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

<!DOCTYPE html>
<html lang="zh-cn">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>work 服务</title>
</head>

<body>
 <div class="news"></div>
 <input type="text" class="input">
 <button class="submit">提交</button>
 <a href="./work2.html" target="_black">2</a>
</body>
<script>
 function showNews(obj) {
   document.querySelector('.news').innerText = JSON.stringify(obj);
 }
 var work = new SharedWorker('./work/worker.js', 'work'),
   worker = work.port;
 worker.start();
 worker.addEventListener('message', function (e) {
   showNews(e.data)
 });
 worker.postMessage({
   status: 0,
 });
 document.querySelector('.submit').addEventListener('click', function (e) {
   worker.postMessage({
     status: 2,
     data: {
       value: document.querySelector('.input').value
     }
   });
 })
</script>

</html>

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~