feat: add example for using webpack to produce a browser compatible l…

…ibray bundle
rsocket · Sep 19, 2023 · fd885b5 · fd885b5
1 parent d3b79c3
commit fd885b5
Show file tree

Hide file tree

Showing 6 changed files with 2,554 additions and 0 deletions.
diff --git a/packages/rsocket-examples/src/webpack/browser-bundle/README.md b/packages/rsocket-examples/src/webpack/browser-bundle/README.md
@@ -0,0 +1,28 @@
+
+# Webpack Browser Bundle Example
+
+This folder provides and example of using Webpack to create a "library" which can be loaded in an HTML file or used in a
+browser context without NPM or other bundling tools.
+
+## Files
+
+__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
+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.
+
+__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.
+
+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.
diff --git a/packages/rsocket-examples/src/webpack/browser-bundle/index.html b/packages/rsocket-examples/src/webpack/browser-bundle/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>RSocket Webpack Example</title>
+  </head>
+  <body>
+    <h1>RSocket Webpack Example</h1>
+    <label>Message:</label>
+    <input type="text" id="input-field" />
+    <button id="send-button">send</button>
+    <div id="output" style="margin-top: 20px;"></div>
+    <script>
+      (function() {
+        var state = 'CONNECTING';
+        var outputDiv = document.querySelector("#output");
+        var _rsocket = null;
+
+        function sendMessage(message) {
+          if (state !== 'CONNECTED') 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()}] payload[data: ${
+                  payload.data
+                }; metadata: ${payload.metadata}]|${isComplete}`;
+                outputDiv.appendChild(div);
+              },
+              onComplete: function() {
+                const div = document.createElement("div");
+                div.textContent = `Stream completed...`;
+                outputDiv.appendChild(div);
+              },
+              onExtension: function() {},
+            }
+          );
+        }
+
+        var sendButton = document.querySelector("#send-button");
+        sendButton.addEventListener("click", function() {
+          var input = document.querySelector("#input-field");
+          var value = input.value;
+          if (!value.length) return;
+          sendMessage(value);
+        });
+
+        rsocket
+          .connect({
+            url: "ws://localhost:9090",
+          })
+          .then(function (_r) {
+            state = 'CONNECTED';
+            _rsocket = _r;
+          })
+          .catch(function (err) {
+            if (err) {
+              console.error("failed to connect rsocket: " + err.message)
+            }
+            else {
+              console.error("failed to connect rsocket!")
+            }
+          });
+      })();
+    </script>
+  </body>
+</html>
diff --git a/packages/rsocket-examples/src/webpack/browser-bundle/package.json b/packages/rsocket-examples/src/webpack/browser-bundle/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "rsocket-examples-websocket-simple-client",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "serve": "webpack serve"
+  },
+  "engines": {
+    "node": "^16.17.0"
+  },
+  "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"
+  },
+  "dependencies": {
+    "html-webpack-plugin": "^5.5.3"
+  }
+}
diff --git a/packages/rsocket-examples/src/webpack/browser-bundle/rsocket.js b/packages/rsocket-examples/src/webpack/browser-bundle/rsocket.js
@@ -0,0 +1,17 @@
+import { RSocketConnector } from "rsocket-core";
+import { WebsocketClientTransport } from "rsocket-websocket-client";
+
+export async function connect(transportOptions) {
+  const connector = new RSocketConnector({
+    transport: new WebsocketClientTransport({
+      wsCreator: (url) => new WebSocket(url),
+      ...transportOptions,
+    }),
+  });
+
+  return connector.connect();
+}
+
+export function createBuffer(value) {
+  return Buffer.from(value);
+}
diff --git a/packages/rsocket-examples/src/webpack/browser-bundle/webpack.config.js b/packages/rsocket-examples/src/webpack/browser-bundle/webpack.config.js
@@ -0,0 +1,36 @@
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./rsocket.js",
+  mode: "development",
+  output: {
+    filename: "rsocket.js",
+    library: "rsocket",
+    path: path.resolve(__dirname, "dist"),
+  },
+  devtool: "source-map",
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "dist"),
+    },
+    compress: false,
+    port: 9000,
+  },
+  resolve: {
+    fallback: {
+      buffer: require.resolve("buffer/"),
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./index.html",
+      inject: "head",
+      scriptLoading: "blocking",
+    }),
+    new webpack.ProvidePlugin({
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
+};