搞了两天google和百度都搜不到完整解决方案，只能靠自己啦~~~还好搞出来啦！！！！开心呢~希望对你有帮助
安装worker-loader
参考：https://github.com/webpack-contrib/worker-loader
1 | npm install worker-loader --save-dev |
配置vue.config.js
1 2 3 4 5 6 7 8 9 | chainWebpack: (config) => {<!-- --> config.module .rule('worker') .test(/_worker\.js$/) .use('worker-loader') .loader('worker-loader') .tap(options => ({<!-- --> worker: 'SharedWorker' })) .end() }) |
worker.js，放在与main.js同级的文件夹
1 2 3 4 5 6 7 8 9 10 11 | onconnect = (e) => {<!-- --> var port = e.ports[0] portList.push(port) port.onmessage = ({<!-- --> data }) => {<!-- --> console.log('worker got message', data) if (data === 'open') {<!-- --> port.postMessage('oooook') } } } |
main.js
1 2 3 4 5 6 7 | import Worker from './worker' const worker = new Worker() worker.port.onmessage = ({<!-- --> data }) => {<!-- --> console.log('收到消息: ', data) } worker.port.start() worker.port.postMessage('open') |
升级版：worker中加入websocket，ws_worker.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | let websocket const portList = [] console.log('hello from worker') var initSocket = () => {<!-- --> if (websocket == null) {<!-- --> websocket = new WebSocket('ws://localhost:8080') //WebSocket服务端地址 } websocket.onopen = (event) => {<!-- --> portList.map(item => {<!-- --> item.postMessage(event.data) }) } websocket.onmessage = (events) => {<!-- --> portList.map(item => {<!-- --> // item!=port&&item.postMessage(workerResult); /**不发给自己 */ item.postMessage(events.data) }) } websocket.onclose = (event) => {<!-- --> console.log('关闭websocket!') } websocket.onerror = (event) => {<!-- --> console.log('websocket异常!') } } onconnect = (e) => {<!-- --> var port = e.ports[0] portList.push(port) port.onmessage = ({<!-- --> data }) => {<!-- --> console.log('worker got message', data) if (data === 'open') {<!-- --> port.postMessage('oooook') initSocket() } } } |