https://github.com/kumavis/sw-stream

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 *

    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[]

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

    })

    .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

}

巴特西

sw-stream

ServiceWorkerStream and ServiceWorkerGlobalListener

usage

in page

in ServiceWorker

最新文章

热门文章