chore: webpack example update + bump dependency versions

packages/rsocket-examples/package.json

@@ -39,7 +39,7 @@
     "rsocket-tcp-server": "^1.0.0-alpha.3",
     "rsocket-websocket-client": "^1.0.0-alpha.3",
     "rsocket-websocket-server": "^1.0.0-alpha.3",
-    "ws": "~8.2.3"
+    "ws": "^8.18"
   },
   "devDependencies": {
     "rimraf": "~3.0.2",

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

@@ -8,24 +8,24 @@ browser context without NPM or other bundling tools.
 
 __rsocket.js__
 
-[rsocket.js](./rsocket.js) demonstrates how to write a "library" that exposes functionality for creating an RSocket
-connection using the WebSocket transport. Aditionally this "library" exposes a function for creating a buffer from a
+[src/rsocket.js](src/rsocket.js) demonstrates how to write a "library" that exposes functionality for creating an RSocket
+connection using the WebSocket transport. Additionally this "library" exposes a function for creating a buffer from a
 given value.
 
 For your own use cases you will likely need to alter the implementation to expose the functionality you need.
 
 __webpack.config.js__
 
 [webpack.config.js](./webpack.config.js) demonstrates how to configure webpack to create a library file which exposes the exports
-from the [./rsocket.js](./rsocket.js) in the global scope of any HTML file which loads the built library file.
+from the [src/rsocket.js](src/rsocket.js) in the global scope of any HTML file which loads the built library file.
 
 __index.html__
 
-[index.html](./index.html) demonstrates how to use the global `rsocket` variable which is exposed by the `rsocket.js` library built by Webpack.
+[src/app.js](src/app.js) demonstrates how to use the global `rsocket` variable which is exposed by the `rsocket.js` library built by Webpack.
 
-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: `src/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.
+Note: For this example, when running the `serve` npm script webpack will automatically host the `index.html` file and inject the `rsocket.js` and `app.js` scripts into the footer of the page.
 
 ## Run the server
 

packages/rsocket-examples/src/webpack/browser-bundle/package.json

@@ -13,17 +13,17 @@
     "serve": "webpack serve"
   },
   "engines": {
-    "node": "^16.17.0"
+    "node": "^18"
   },
   "devDependencies": {
     "buffer": "^6.0.3",
     "rsocket-adapter-rxjs": "^1.0.0-alpha.4",
     "rsocket-composite-metadata": "^1.0.0-alpha.3",
     "rsocket-core": "^1.0.0-alpha.3",
     "rsocket-websocket-client": "^1.0.0-alpha.3",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.0"
+    "webpack": "^5",
+    "webpack-cli": "^5",
+    "webpack-dev-server": "^5"
   },
   "dependencies": {
     "html-webpack-plugin": "^5.5.3"

packages/rsocket-examples/src/webpack/browser-bundle/src/app.js

@@ -0,0 +1,86 @@
+let state = "CONNECTING";
+let outputDiv = document.querySelector("#output");
+let _rsocket = null;
+let errorColor = "#eb4034";
+let infoColor = "#348CEBFF";
+let messageColor = "#2ccd20";
+
+function sendMessage(message) {
+  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(
+    {
+      data: bufferData,
+    },
+    {
+      onError: function (e) {
+        console.error(e);
+      },
+      onNext: function (payload, isComplete) {
+        const div = document.createElement("div");
+        div.textContent = `[${new Date().toISOString()}] received: payload[data: ${
+          payload.data
+        }; metadata: ${payload.metadata}]|${isComplete}`;
+        div.style.color = messageColor;
+        outputDiv.appendChild(div);
+      },
+      onComplete: function () {
+        const div = document.createElement("div");
+        div.textContent = `Stream completed...`;
+        outputDiv.appendChild(div);
+      },
+      onExtension: function () {},
+    }
+  );
+}
+
+let sendButton = document.querySelector("#send-button");
+sendButton.addEventListener("click", function () {
+  let input = document.querySelector("#input-field");
+  let value = input.value;
+  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);
+});
+
+rsocket
+  .connect({
+    url: "ws://localhost:9090",
+  })
+  .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);
+  });

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

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>RSocket Webpack Example</title>
+  </head>
+  <body>
+    <h1>RSocket Webpack Example</h1>
+    <form action="javascript:void(0);">
+      <label>Message:</label>
+      <input type="text" id="input-field" />
+      <button id="send-button">send</button>
+    </form>
+    <div id="output" style="margin-top: 20px;"></div>
+  </body>
+</html>

packages/rsocket-examples/src/webpack/browser-bundle/webpack.config.js

@@ -3,11 +3,19 @@ const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-  entry: "./rsocket.js",
   mode: "development",
+  entry: {
+    rsocket: {
+      import: "./src/rsocket.js",
+      library: {
+        type: "window",
+        name: "rsocket",
+      },
+    },
+    app: "./src/app.js",
+  },
   output: {
-    filename: "rsocket.js",
-    library: "rsocket",
+    filename: "[name].js", // [name] will be replaced by 'app' or 'rsocket'
     path: path.resolve(__dirname, "dist"),
   },
   devtool: "source-map",
@@ -25,8 +33,8 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: "./index.html",
-      inject: "head",
+      template: "./src/index.html",
+      inject: "footer",
       scriptLoading: "blocking",
     }),
     new webpack.ProvidePlugin({