ServiceWorkerStream and ServiceWorkerGlobalListener

This a utility for creating streams between the page and a servive worker.

在页面也服务器中创建流

usage

in page

pass the registered service worker to create a duplex stream.

传递一个登录的service worker去创建一个双工流

const duplex = SwStream({ serviceWorker: this.serviceWorker.controller })

There is an optional context property that will be passed along on the initial handshake and retreivable from the messageEvent.data.context received from the SwGlobalListener.

context参数是可选的，它将会在第一次握手时传递并且会被从SwGlobalListener检索得到的messageEvent.data.context检索到

const duplex = SwStream({ serviceWorker, context })

in ServiceWorker

listen for client connections

const connectionListener = new SwGlobalListener(self)

connectionListener.on('remote', (portStream, messageEvent) => {
  // ...
})

看测试了解使用：

sw-stream/test/service-worker.js （即background.js）

const SwGlobalListener = require('../lib/sw-global-listener')
const swGlobal = self

// setup ServiceWorkerGlobal and capture clients

swGlobal.addEventListener('activate', function(event) {
  event.waitUntil(swGlobal.clients.claim())
})

swGlobal.oninstall = function (event) {
  event.waitUntil(swGlobal.skipWaiting())
}

// listen for clients

const connectionListener = new SwGlobalListener(swGlobal)

connectionListener.on('remote', (portStream, messageEvent) => {
  console.log('got a remote connection!')
  remoteStream.on('data', (message) => {
    console.log('message:', message)
    // example: double value and then send back
    let newValue = message.value * 2
    remoteStream.write({ value: newValue })
  })
})

sw-stream/lib/sw-global-listener.js

const EventEmitter = require('events')
const PortStream = require('./message-channel-port-stream')


class SwGlobalListener extends EventEmitter {

  constructor (swGlobal) {
    super()
    swGlobal.addEventListener('message', (messageEvent) => {
      // validate port
      if (!messageEvent.data) return
      if (messageEvent.data.action !== 'handshake') return
      // process message
      const port = messageEvent.ports[0]
      if (!port) throw new Error('Handshake missing port...')
      // create new portStream
      const portStream = new PortStream(port)
      // announce new connection
      this.emit('remote', portStream, messageEvent)
    })
  }

}

module.exports = SwGlobalListener

sw-stream/lib/message-channel-port-stream.js

const Duplex = require('readable-stream').Duplex
const inherits = require('util').inherits

module.exports = MessageChannelPortDuplexStream


inherits(MessageChannelPortDuplexStream, Duplex)

function MessageChannelPortDuplexStream (port) {
  Duplex.call(this, {
    objectMode: true,
  })
  this._port = port
  port.onmessage = this._onMessage.bind(this)
}

// private

MessageChannelPortDuplexStream.prototype._onMessage = function (event) {
  const msg = event.data
  if (Buffer.isBuffer(msg)) {
    delete msg._isBuffer
    var data = new Buffer(msg)
    this.push(data)
  } else {
    this.push(msg)
  }
}

// stream plumbing

MessageChannelPortDuplexStream.prototype._read = noop

MessageChannelPortDuplexStream.prototype._write = function (msg, encoding, cb) {
  try {
    if (Buffer.isBuffer(msg)) {
      var data = msg.toJSON()
      data._isBuffer = true
      this._port.postMessage(data)
    } else {
      this._port.postMessage(msg)
    }
  } catch (err) {
    return cb(new Error('MessageChannelPortDuplexStream - disconnected'))
  }
  cb()
}

// util

function noop () {}

sw-stream/test/sw-launcher.js

const EventEmitter = require('events')
const SwStream = require('../lib/sw-stream')


module.exports = class ServiceWorkerLauncher extends EventEmitter {
  constructor (opts) {
    super()
    this.serviceWorker = navigator.serviceWorker
    this.startWorker()
    .then(registeredWorker => {
      console.log('setting up stream...')
      const duplex = SwStream(registeredWorker)
      duplex.on('data', (chunk) => {console.log('controller saw:', chunk) })
      duplex.on('error', (chunk) => {console.log('controller saw:', chunk) })
      duplex.write({ value: 42 })
    })
    .catch(err => {
      this.handleError(err)
    })
  }

  startWorker () {
    // check to see if their is a preregistered service worker
    if (!this.serviceWorker.controller) {
      console.log('registering...')
      return Promise.resolve(this.registerWorker())
    } else {
      console.log('ready')
      return Promise.resolve(this.serviceWorker.ready)
    }
  }

  registerWorker () {
    return this.serviceWorker.register('sw-bundle.js')
    .then(sw => {
      return sw
    })
  }

  handleError (err, contextMessage) {
    if (!err) {
      console.error(contextMessage)
      this.emit('error', contextMessage)
    } else {
      console.error(err)
      this.emit('error', err)
    }
  }
}

sw-stream/lib/sw-stream.js

const PortStream = require('./message-channel-port-stream')

module.exports = SericeWorkerStream


function SericeWorkerStream({ serviceWorker, context }) {
  // create message channel for communication
  const messageChannel = new MessageChannel()
  // send handshake including port to respond on
  serviceWorker.postMessage({ action: 'handshake', context }, [messageChannel.port2])
  // construct stream around local message channel port
  const portStream = new PortStream(messageChannel.port1)
  return portStream
}