worker与socket

[yyman001]

web worker 作为浏览器线程(系统级别), 一般可用于后台处理大数据,图像,音频 web soket 作为ajax请求的升级版,持久连接.客户端可主动向用户端发起消息

web worker

在主线程中(一般指浏览器环境), 创建一个worker 线程任务(一般为一个js文件) 创建一个 worker 对象

// 浏览器环境
const worker = new Worker('同源js文件路径')

worker.onmessage = function (data) {
// 接受 worker 线程发来的消息
}

worker.error = function (error) (
// 错误事件触发
}

// 发送一个初始化消息
worker.postMessage('init worker~')

// 主线程销毁 线程
worker.terminate()

// 还可以一引入其他脚本,一般可以存放些共享的工具类
importScripts('其他js脚本文件')

worker.js 线程文件, 线程作用域顶部是 self 自己而非window, 一般线程把主线程传递过来的数据进行处理,处理完毕后返回给主线程

// worker.js
self.onmessage = function (e) {
// 接受 worker 主线程发来的消息
// 向 worker 主线程发送消息
    self.postMessage()
}
// 线程自己主动关闭线程
self.close()

具体api

主线程

Worker.onerror：指定 error 事件的监听函数。
Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
Worker.postMessage()：向 Worker 线程发送消息。
Worker.terminate()：立即终止 Worker 线程。

Worker 线程

self.name： Worker 的名字。该属性只读，由构造函数指定。
self.onmessage：指定message事件的监听函数。
self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
self.close()：关闭 Worker 线程。
self.postMessage()：向产生这个 Worker 线程发送消息。
??? self.importScripts()：加载 JS 脚本。

websocket

具有持久连接

var ws = new WebSocket("wss://ip:prot");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

参考资料

MDN WebSocket MDN 使用 Web Workers Web Worker 使用教程 - 阮一峰