Inline worker. Updated docs

Author: Gabe Fiji

README.md

@@ -38,26 +38,16 @@ Connection Manager `io.Manager` is not yet supported
 
 ```js
 var ws = wio('http://localhost:8000/')
-ws.useWorker('shared-worker.js')
+ws.start() // use default SharedWorker script URL
 
-ws.on('connect', function() {
+// same as socket.io-client api: https://github.com/socketio/socket.io-client
+ws.on('connect', () => {
     console.log('connected!')
-    
-    ws.on('message', function (data) {
-        console.log('message', data)
-    })
-
     ws.emit('message', 'Hi There!')
 })
-
-ws.on('disconnect', function() {
-    console.log('disconnected!')
-})
-
-ws.on('error', function (data) {
-    console.log('error', data)
-})
-
+ws.on('message', data => console.log('received message', data))
+ws.on('disconnect', () => console.log('disconnected!'))
+ws.on('error', data => console.log('error', data))
 ```
 
 ## Install
@@ -68,41 +58,68 @@ Install locally using npm. (Alternatively clone the repo and look at `index.html
 npm install --save socketio-shared-webworker
 ```
 
-To use in your nodejs project:
-
-First make sure `node_modules/socketio-shared-webworker/dist/shared-worker.js` is served by your server. 
-As an example see `server.js` for an example `express` and `socket.io` server serving `dist/shared-worker.js` as `shared-worker.js` via `express.static`.
-
-You can also copy `dist/shared-worker.js` into your `public/` directory and serve that with `app.use(express.static('./public'))`.
+### To use in your nodejs project:
 
 ```js
 var wio = require('socketio-shared-webworker')
 var ws = wio('http://localhost:8000/')
-ws.useWorker('node_modules/socketio-shared-webworker/dist/shared-worker.js') // or just shared-worker.js if placed in public/
+ws.start() // use default SharedWorker script URL
+
+// same as socket.io-client
 ws.on('connect', () => {
     console.log('connected!')
     ws.emit('message', 'Hi There!')
 })
+
 ws.on('message', data => console.log('received message', data))
 ws.on('disconnect', () => console.log('disconnected!'))
 ws.on('error', data => console.log('error', data))
 ```
 
-Or to use in HTML `wio` is global.
+### To use in HTML `wio` is global.
 
 ```html
 <script src="socket.io-worker.js"></script>
 <script>
 var ws = wio('http://localhost:8000/')
-ws.useWorker('node_modules/socketio-shared-webworker/dist/shared-worker.js')
-// use wio like io
+ws.start() // use default SharedWorker script URL
+
+// same as socket.io-client
+ws.on('connect', () => {
+    console.log('connected!')
+    ws.emit('message', 'Hi There!')
+})
+ws.on('message', data => console.log('received message', data))
+ws.on('disconnect', () => console.log('disconnected!'))
+ws.on('error', data => console.log('error', data))
 </script>
+```
+
+## Using a specific `SharedWorker` script
+
+When using `ws.start()` the default worker located in `build/shared-worker-inline.js` is used. This worker is served inline using `URL.createObjectURL()` instead of being served over HTTP. This is limited to `Worker` and `SharedWorker` since `ServiceWorker` requires the same domain. (`ServiceWorker` is not yet supported)
 
+In order to specify the Worker script URL manually use: 
+
+```
+ws.useWorker('http/same/domain/url/to/shared-worker.js')
 ```
 
-Note: `ws.useWorker('node_modules/socketio-shared-webworker/shared-worker.js')` should point to the shared-worker.js url relative to your HTML page base URL. Shared webworkers can only be loaded from the same domain like CORS. 
+Note: `ws.useWorker('shared-worker.js')` should point to the `shared-worker.js` url relative to your HTML page base URL. 
+Shared webworkers can only be loaded from the same domain similar to CORS. 
+When installed into a project with `npm i socketio-shared-webworker` you will find the script in: `node_modules/socketio-shared-webworker/build/shared-worker.js`
+
+You may copy `dist/shared-worker.js` to your `public/` directory and serve using `express.static`. 
+An example of this is found in `server.js`. 
+You can also serve it as a regular JS file with Apache, Nginx etc. 
+
+```js
+var wio = require('socketio-shared-webworker')
+var ws = wio('http://localhost:8000/')
+ws.useWorker('shared-worker.js') // use a specific SharedWorker script URL
+// same as socket.io-client
+```
 
-See `index.html` for an example. 
 
 ### Using a Worker instead of SharedWorker
 
@@ -113,7 +130,8 @@ If you want to specify using `Worker` specifically then use:
 var wio = require('socketio-shared-webworker')
 var ws = wio('http://localhost:8000/')
 ws.setWorkerType(Worker)
-ws.useWorker('node_modules/socketio-shared-webworker/dist/shared-worker.js')
+ws.start()
+// same as socket.io-client
 ```
 
 At the moment only `SharedWorker` and `Worker` are supported. `ServiceWorker` is not. 

dist/shared-worker-inline.js

@@ -0,0 +1,101 @@
+'use strict';
+
+const SharedWorker = () => {
+    const log = console.log.bind(console)
+
+    log('Loading shared worker', self.name)
+
+    try {
+        importScripts(self.name + 'socket.io/socket.io.js')
+    } catch(e) {
+        window.io = require('socket.io-client')
+    }
+
+    let socket = io(self.name),
+        ports = [],
+        socketConnected = false
+
+    // handle shared webworker clients already with ports
+    socket.on('connect', function(msg) {
+        socketConnected = true
+        ports.forEach(function(port) {
+            port.postMessage({
+                type: 'connect',
+                message: msg
+            })
+        })
+    })
+    socket.on('disconnect', function(msg) {
+        socketConnected = false
+        ports.forEach(function(port) {
+            port.postMessage({
+                type: 'disconnect',
+                message: msg
+            })
+        })
+    })
+
+    // shared worker handle new clients
+    addEventListener('connect', function(event) {
+        const port = event.ports[0]
+        ports.push(port)
+        port.start()
+
+        log('client connected to shared worker', event)
+
+        port.addEventListener('message', event => handleMessage(event, port))
+    })
+
+    // regular worker handle messages
+    addEventListener('message', event => handleMessage(event, self))
+    if (typeof Worker !== 'undefined') {
+        setTimeout(() => postMessage({
+            type: 'connect',
+            message: null
+        }))
+    }
+
+    // handle messages
+    function handleMessage(event, port) {
+            
+        const model = event.data
+        log('port received message', model.eventType, model.event, model.data)
+        switch(model.eventType) {
+            case 'on':
+                const eventName = model.event
+                if (eventName == 'connect') {
+                    if (socketConnected) {
+                        port.postMessage({
+                            type: eventName
+                        })
+                    }
+                    break;
+                }
+                if (eventName == 'disconnect') {
+                    break;
+                }
+                socket.on(eventName, function(msg) {
+                    log('socket received message', msg)
+                    port.postMessage({
+                        type: eventName,
+                        message: msg
+                    })
+                })
+            break;
+            case 'emit':
+                socket.emit(model.event, model.data) // todo: ack cb
+            break;
+        }
+
+    }
+}
+
+if (typeof window === 'object') {
+    window.SocketIoSharedWorker = SharedWorker
+}
+
+if (typeof module === 'object') {
+    module.exports = SharedWorker
+} else {
+    SharedWorker()
+}

dist/shared-worker.js

@@ -3,10 +3,9 @@
 const wio = require('../src/socket.io-worker')
 
 const ws = wio('http://localhost:3000/')
-const workerType = confirm('Use SharedWorker? (Will use Worker if no)') ? SharedWorker : Worker
-
-ws.setWorkerType(workerType)
-ws.useWorker('dist/shared-worker.js')
+//const workerType = confirm('Use SharedWorker? (Will use Worker if no)') ? SharedWorker : Worker
+//ws.setWorkerType(workerType)
+ws.start()
 console.log('connecting...')
 
 ws.on('connect', function() {

dist/shared-worker.js.map

@@ -1,5 +1,6 @@
-var path = require('path');
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'development',
@@ -34,12 +35,21 @@ module.exports = {
     }
   }, 
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new CopyPlugin({
+      patterns: [
+        { 
+          from: 'src/shared-worker.js',
+          to: 'dist/shared-worker-inline.js'
+        }
+      ],
+    }),
   ],
   module: {
+    noParse: /\/dist\/.*/,
     rules: [{
       test: /\.m?js$/,
-      exclude: /(node_modules|bower_components)/,
+      exclude: /(node_modules|bower_components|dist)/,
       use: {
         loader: 'babel-loader',
         options: {