chore: expand the webpack example (#282)

* chore: expand the webpack example
---------

Signed-off-by: Kevin Viglucci <[email protected]>

Author: viglucci

packages/rsocket-examples/src/webpack/browser-bundle/README.md

@@ -26,3 +26,41 @@ __index.html__
 Note: `index.html` does not show how to load the built `rsocket.js` file as that will be up to you/your implementation to decide.
 
 Note: when running the `serve` npm script webpack will automatically host the `index.html` file and inject the `rsocket.js` script into the `<head/>` block.
+
+## Run the server
+
+**Open a terminal:**
+
+Open a terminal in the `simple/server` directory one level up from this README.
+
+**Install dependencies:**
+
+```bash
+npm install
+```
+
+**Run the server:**
+
+```bash
+npm run start
+```
+
+## Run the client
+
+**Open a terminal in this folder and install dependencies:**
+
+```bash
+npm install
+```
+
+**Run the NPM server script:**
+
+```
+npm run serve
+```
+
+The above script will run the webpack dev server, which will first compile the "app" and then host the index.html.
+
+**Open in browser:**
+
+Visit [localhost:9000](http://localhost:9000).

packages/rsocket-examples/src/webpack/browser-bundle/index.html

@@ -15,9 +15,18 @@ <h1>RSocket Webpack Example</h1>
         var state = 'CONNECTING';
         var outputDiv = document.querySelector("#output");
         var _rsocket = null;
+        var errorColor = '#eb4034';
+        var infoColor = '#348CEBFF';
+        var messageColor = '#2ccd20';
 
         function sendMessage(message) {
-          if (state !== 'CONNECTED') return;
+          if (state !== 'CONNECTED') {
+            const div = document.createElement("div");
+            div.textContent = `[${new Date().toISOString()}] not connected. cannot send messages!`;
+            div.style.color = errorColor;
+            outputDiv.appendChild(div);
+            return;
+          }
           const bufferData = rsocket.createBuffer(message || "");
           _rsocket.requestResponse(
             {
@@ -29,9 +38,10 @@ <h1>RSocket Webpack Example</h1>
               },
               onNext: function(payload, isComplete) {
                 const div = document.createElement("div");
-                div.textContent = `[${new Date().toISOString()}] payload[data: ${
+                div.textContent = `[${new Date().toISOString()}] received: payload[data: ${
                   payload.data
                 }; metadata: ${payload.metadata}]|${isComplete}`;
+                div.style.color = messageColor;
                 outputDiv.appendChild(div);
               },
               onComplete: function() {
@@ -48,7 +58,17 @@ <h1>RSocket Webpack Example</h1>
         sendButton.addEventListener("click", function() {
           var input = document.querySelector("#input-field");
           var value = input.value;
-          if (!value.length) return;
+          if (!value.length) {
+            const div = document.createElement("div");
+            div.textContent = `[${new Date().toISOString()}] please include a message!`;
+            div.style.color = errorColor;
+            outputDiv.appendChild(div);
+            return;
+          }
+          const div = document.createElement("div");
+          div.textContent = `[${new Date().toISOString()}] sending: ${value}`;
+          div.style.color = infoColor;
+          outputDiv.appendChild(div);
           sendMessage(value);
         });
 
@@ -59,14 +79,23 @@ <h1>RSocket Webpack Example</h1>
           .then(function (_r) {
             state = 'CONNECTED';
             _rsocket = _r;
+            const div = document.createElement("div");
+            div.textContent = `[${new Date().toISOString()}] connected!`;
+            div.style.color = infoColor;
+            outputDiv.appendChild(div);
           })
           .catch(function (err) {
+            const errorMessage = err?.message || "failed to connect to rsocket! check the console for more details.";
             if (err) {
               console.error("failed to connect rsocket: " + err.message)
             }
             else {
               console.error("failed to connect rsocket!")
             }
+            const div = document.createElement("div");
+            div.textContent = `[${new Date().toISOString()}] ${errorMessage}`;
+            div.style.color = errorColor;
+            outputDiv.appendChild(div);
           });
       })();
     </script>

packages/rsocket-examples/src/webpack/simple/server/server.js

@@ -19,11 +19,11 @@ const server = new RSocketServer({
           () =>
             responderStream.onNext(
               {
-                data: Buffer.concat([Buffer.from("Echo: "), payload.data]),
+                data: Buffer.concat([Buffer.from("ECHO: "), payload.data]),
               },
               true
             ),
-          1000
+          100
         );
         return {
           cancel: () => {