problem

• How many workers are suitable to exist at the same time?

• How do multiple workers work together?

• How should messages be handled?

• What technology is requested? Still using axios or fetch?

• How is global configuration handled, such as request headers?

• Cross domain issues?

• How to mix the code of worker with compression?

1. adopt

   Yes web-worker The configuration is as follows

   // Integrate worker loader based on vue-cli3
   config.module
       .rule('worker')
       .test(/\.worker\.js$/)
       .use('worker-loader')
       .loader('worker-loader')
       .end()
   config.module.rule('js').exclude.add(/\.worker\.js$/)
   

Realization

The whole idea will be divided into two parts

• The thread group work group holds all the active work instances, provides message forwarding, balance algorithm support, callback mechanism implementation, and contains

  • interceptor refers to axios' pre and post interception mechanism, providing default requests, corresponding processing and external exposure

  export const interceptors = {
    // Pre adaptation conversion data type
    transfer(config) {
      return {
        url: `${window.location.origin}${process.env.VUE_APP_BASE_API}${config.url}${config.params ? '?' + param(config.params) : ''}`,
        options: {
          body: config.data ? JSON.stringify(config.data) : undefined,
          cache: config.cache,
          headers: config.headers || {},
          method: config.method || 'GET'
        }
      }
    },
    // Request filtering
    request(config) {
      if (store.getters.token) {
        config.options.headers['Auth'] = getToken()
      }
      return config
    },
    // Response filtering
    async response(res) {
      return res
    }
  }
  

  • The realization of load balancing in balance

  const balance = (function() {
    let index = 0
    /** Equalization algorithm */
    const BALANCE_ALGORITHM = {
      /** Poll subscript */
      ROUND_ROBIN() {
        const next = workers[index % workers.length]
        index++
        return next
      }
    }
    const tasks = {}
    const addTask = (option, resolve, reject) => {
      const id = uuid()
      option.id = id
      tasks[id] = {
        resolve: resolve,
        reject: reject
      }
    }
    return {
      next() {
        return BALANCE_ALGORITHM.ROUND_ROBIN()
      },
      postMessage(option, resolve, reject) {
        addTask(option, resolve, reject)
        this.next().postMessage(option)
      },
      popTask(id) {
        const task = tasks[id]
        delete task[id]
        return task
      }
    }
  })()
  

  • Workers workers are grouped with corresponding instances

  const workers = new Array(4)
  for (let i = 0; i < workers.length; i++) {
    const worker = new Worker()
    worker.onmessage = receive
    workers[i] = worker
  }
  

• The internal working group of the working group implements the queue mechanism, and the received tasks consume replies one by one. Through the queue mechanism, the peak of high concurrent requests is prevented. Through a reasonable mechanism, the peak of requests is cut, and the browser has a upper limit on single domain requests (take Chrome as an example, the upper limit is 6). So the internal part is actually a state machine, which includes:

  • Queue request task queue

  const queue = []
  

  • State current running state, idle by default

  /** In operation */
  const RUNNING = 'RUNNING'
  /** free */
  const IDLE = 'IDLE'
  /** current state */
  let state = IDLE
  

  • Request request function

    /**
     * Execute request
     * Send the request through the fetch and send the feedback to the main thread
     * Check queue after end
     * @param event event main-thread message
     */
    const request = (event) => {
      state = RUNNING
      const { data } = event
      fetch(data.url, data.options)
      .then(response => response.json())
      .then(json => {
        postMessage({ success: true, response: json, id: data.id })
      })
      .catch(reason => {
        postMessage({ error: true, message: reason.message, id: data.id })
      })
      .finally(() => {
        const next = queue.pop()
        if (next) {
          request(next)
        } else {
          state = IDLE
        }
      })
    }
  

Insufficient

• How to deal with overtime and other problems?
• How to handle file upload?
• Add load policy beyond polling?