Vue-cli中使用sharedworker & websocket

搞了两天google和百度都搜不到完整解决方案，只能靠自己啦~~~还好搞出来啦！！！！开心呢~希望对你有帮助

安装worker-loader

参考：https://github.com/webpack-contrib/worker-loader

npm install worker-loader --save-dev

配置vue.config.js

  chainWebpack: (config) => {
    config.module
      .rule('worker')
      .test(/_worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .tap(options => ({ worker: 'SharedWorker' }))
      .end()
  })

worker.js，放在与main.js同级的文件夹

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

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

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()
    }
  }
}