updated websocket example with example html page.

chimurai · chimurai · commit 1a8fe3722224 · 2015-08-30T20:49:39.000+02:00
diff --git a/README.md b/README.md
@@ -22,21 +22,23 @@ var proxy = proxyMiddleware('/api', {target: 'http://www.example.org'});
 //                          context              options
 
 // 'proxy' is now ready to be used in a server.
-
-// shorthand syntax for the example above:
-// proxyMiddleware('http://www.example.org/api');
-
 ```
 * **context**: matches provided context against request-urls' path.
     Matching requests will be proxied to the target host.
     Example: `'/api'` or `['/api', '/ajax']`. (more about [context matching](#context-matching))
 * **options.target**: target host to proxy to.
     Check out available [proxy middleware options](#options).
 
+``` javascript
+// shorthand syntax for the example above:
+var proxy = proxyMiddleware('http://www.example.org/api');
+
+```
+More about the [shorthand configuration](#shorthand).
 
 
 ### Example
-A simple example with express server.
+An example with express server.
 ```javascript
 // include dependencies
 var express = require('express');
@@ -97,7 +99,7 @@ Request URL's [ _path-absolute_ and _query_](https://tools.ietf.org/html/rfc3986
 
 
 ### Shorthand
-Use the shorthand syntax for simple use cases. The `context` and `option.target` will be automatically configured when shorthand is used. Options can still be used if needed.
+Use the shorthand syntax when verbose configuration is not needed. The `context` and `option.target` will be automatically configured when shorthand is used. Options can still be used if needed.
 
 ```javascript
 proxyMiddleware('http://www.example.org:8000/api');
@@ -147,7 +149,7 @@ var server = app.listen(3000);
     }
     ```
 
-* **option.proxyTable**: object, re-target `option.target` based on the request header `host` parameter. `host` can be used in conjunction with `path`. The order of the configuration matters.
+* **option.proxyTable**: object, re-target `option.target` based on the request header `host` parameter. `host` can be used in conjunction with `path`. Only one instance of the proxy will be used. The order of the configuration matters.
     ```javascript
     {
         "integration.localhost:3000" : "http://localhost:8001",    // host only
@@ -216,9 +218,9 @@ $ node examples/connect
 ```
 
   Or just explore the proxy examples' sources:
- * `examples/connect` - [connect proxy middleware example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/connect/index.js)
- * `examples/express` - [express proxy middleware example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/express/index.js)
- * `examples/browser-sync` - [browser-sync proxy middleware example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/browser-sync/index.js)
+ * `examples/connect` - [connect proxy example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/connect/index.js)
+ * `examples/express` - [express proxy example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/express/index.js)
+ * `examples/browser-sync` - [browser-sync proxy example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/browser-sync/index.js)
  * `examples/websocket` - [websocket proxy example](https://github.com/chimurai/http-proxy-middleware/tree/master/examples/websocket/index.js) with express
 
 
diff --git a/examples/websocket/index.html b/examples/websocket/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>http-proxy-middleware - WebSocket example</title>
+    <style>
+        fieldset {
+            border: 0;
+        }
+        label {
+            display: inline-block;
+            width: 5em;
+            vertical-align: top;
+        }
+        code {
+            background-color: #eee;
+        }
+    </style>
+</head>
+
+<body>
+
+    <h2>WebSocket demo</h2>
+
+    <p>
+        Proxy <code>ws://localhost:3000</code> to <code>ws://echo.websocket.org</code>
+    </p>
+
+    <fieldset id="configuration">
+        <p>
+            <label for="location">location:</label>
+            <input id="location" type="text" disabled="disabled" value="ws://localhost:3000">
+            <button id="connect">connect</button>
+            <button id="disconnect" disabled="disabled">disconnect</button>
+        </p>
+    </fieldset>
+    <fieldset id="messaging" disabled="disabled">
+        <p>
+            <label for="message">message:</label>
+            <input type="text" id="message" value="Hello WebSocket">
+            <button id="send">send</button>
+        </p>
+        <p>
+            <label for="logger">log:</label>
+            <textarea id="logger" cols="30" rows="10"></textarea>
+        </p>
+    </fieldset>
+
+    <script>
+    window.onload = function () {
+        // elements
+        var configuration = document.getElementById('configuration');
+        var location      = document.getElementById('location');
+        var connect       = document.getElementById('connect');
+        var disconnect    = document.getElementById('disconnect');
+        var messaging     = document.getElementById('messaging');
+        var message       = document.getElementById('message');
+        var send          = document.getElementById('send');
+        var logger        = document.getElementById('logger');
+
+        // ws
+        var socket;
+
+        connect.onclick = function () {
+            connect.disabled = true;
+            disconnect.disabled = false;
+            messaging.disabled = false;
+
+            socket = new WebSocket('ws://localhost:3000');
+            socket.onopen    = function () { log('CONNECTED'); };
+            socket.onclose   = function () { log('DISCONNECTED'); };
+            socket.onerror   = function () { log('SOCKET ERROR OCCURED'); };
+            socket.onmessage = function (msg) { log('RECEIVED:' + msg.data); };
+        }
+
+        disconnect.onclick = function () {
+            connect.disabled = false;
+            disconnect.disabled = true;
+            messaging.disabled = true;
+            socket.close();
+        }
+
+        send.onclick = function () {
+            log('SEND: ' + message.value);
+            socket.send(message.value);
+        };
+
+        function log (message) {
+            logger.value = logger.value + message + '\n'
+        }
+
+    }
+    </script>
+
+</body>
+</html>
diff --git a/examples/websocket/index.js b/examples/websocket/index.js
@@ -8,7 +8,6 @@ var proxyMiddleware = require('../../index');                      // require('h
 // context: '/' will proxy all requests
 var proxy = proxyMiddleware('/', {
                 target: 'http://echo.websocket.org',
-                // target: 'ws://echo.websocket.org',   // alternative way to provide target with ws:// protocol
                 // pathRewrite: {
                 //  '^/websocket' : '/socket',          // rewrite path.
                 //  '^/removepath' : ''                 // remove path.
@@ -19,20 +18,23 @@ var proxy = proxyMiddleware('/', {
             });
 
 var app = express();
+app.use('/', express.static(__dirname));                // demo page
 app.use(proxy);                                         // add the proxy to express
 
-app.listen(3000);
+var server = app.listen(3000);
+server.on('upgrade', proxy.upgrade);                    // optional: upgrade externally
 
 console.log('listening on port 3000');
 console.log('try:');
+console.log('  http://localhost:3000 for a demo');
 console.log('  ws://localhost:3000 requests will be proxied to ws://echo.websocket.org');
 
 /**
  * Example:
- * Open http://localhost:3000 in WebSocket compatible browser.      // don't mind the 404 page...
+ * Open http://localhost:3000 in WebSocket compatible browser.
  * In browser console:
  * 1. `var socket = new WebSocket('ws://localhost:3000');`          // create new WebSocket
  * 2. `socket.onmessage = function (msg) {console.log(msg)};`       // listen to socket messages
- * 3. `socket.send('hello world')`;                                 // send message
+ * 3. `socket.send('hello world');`                                 // send message
  * >  {data: "hello world"}                                         // server should echo back your message.
  **/
