Skip to content

Commit fd885b5

Browse files
viglucciviglucci
committed
feat: add example for using webpack to produce a browser compatible libray bundle
1 parent d3b79c3 commit fd885b5

File tree

6 files changed

+2554
-0
lines changed

6 files changed

+2554
-0
lines changed

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

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
# Webpack Browser Bundle Example
3+
4+
This folder provides and example of using Webpack to create a "library" which can be loaded in an HTML file or used in a
5+
browser context without NPM or other bundling tools.
6+
7+
## Files
8+
9+
__rsocket.js__
10+
11+
[rsocket.js](./rsocket.js) demonstrates how to write a "library" that exposes functionality for creating an RSocket
12+
connection using the WebSocket transport. Aditionally this "library" exposes a function for creating a buffer from a
13+
given value.
14+
15+
For your own use cases you will likely need to alter the implementation to expose the functionality you need.
16+
17+
__webpack.config.js__
18+
19+
[webpack.config.js](./webpack.config.js) demonstrates how to configure webpack to create a library file which exposes the exports
20+
from the [./rsocket.js](./rsocket.js) in the global scope of any HTML file which loads the built library file.
21+
22+
__index.html__
23+
24+
[index.html](./index.html) demonstrates how to use the global `rsocket` variable which is exposed by the `rsocket.js` library built by Webpack.
25+
26+
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.
27+
28+
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.

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

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>RSocket Webpack Example</title>
6+
</head>
7+
<body>
8+
<h1>RSocket Webpack Example</h1>
9+
<label>Message:</label>
10+
<input type="text" id="input-field" />
11+
<button id="send-button">send</button>
12+
<div id="output" style="margin-top: 20px;"></div>
13+
<script>
14+
(function() {
15+
var state = 'CONNECTING';
16+
var outputDiv = document.querySelector("#output");
17+
var _rsocket = null;
18+
19+
function sendMessage(message) {
20+
if (state !== 'CONNECTED') return;
21+
const bufferData = rsocket.createBuffer(message || "");
22+
_rsocket.requestResponse(
23+
{
24+
data: bufferData,
25+
},
26+
{
27+
onError: function (e) {
28+
console.error(e);
29+
},
30+
onNext: function(payload, isComplete) {
31+
const div = document.createElement("div");
32+
div.textContent = `[${new Date().toISOString()}] payload[data: ${
33+
payload.data
34+
}; metadata: ${payload.metadata}]|${isComplete}`;
35+
outputDiv.appendChild(div);
36+
},
37+
onComplete: function() {
38+
const div = document.createElement("div");
39+
div.textContent = `Stream completed...`;
40+
outputDiv.appendChild(div);
41+
},
42+
onExtension: function() {},
43+
}
44+
);
45+
}
46+
47+
var sendButton = document.querySelector("#send-button");
48+
sendButton.addEventListener("click", function() {
49+
var input = document.querySelector("#input-field");
50+
var value = input.value;
51+
if (!value.length) return;
52+
sendMessage(value);
53+
});
54+
55+
rsocket
56+
.connect({
57+
url: "ws://localhost:9090",
58+
})
59+
.then(function (_r) {
60+
state = 'CONNECTED';
61+
_rsocket = _r;
62+
})
63+
.catch(function (err) {
64+
if (err) {
65+
console.error("failed to connect rsocket: " + err.message)
66+
}
67+
else {
68+
console.error("failed to connect rsocket!")
69+
}
70+
});
71+
})();
72+
</script>
73+
</body>
74+
</html>

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "rsocket-examples-websocket-simple-client",
3+
"version": "0.0.0",
4+
"license": "Apache-2.0",
5+
"private": true,
6+
"files": [
7+
"dist",
8+
"LICENSE"
9+
],
10+
"scripts": {
11+
"test": "echo \"Error: no test specified\" && exit 1",
12+
"build": "webpack",
13+
"serve": "webpack serve"
14+
},
15+
"engines": {
16+
"node": "^16.17.0"
17+
},
18+
"devDependencies": {
19+
"buffer": "^6.0.3",
20+
"rsocket-adapter-rxjs": "^1.0.0-alpha.4",
21+
"rsocket-composite-metadata": "^1.0.0-alpha.3",
22+
"rsocket-core": "^1.0.0-alpha.3",
23+
"rsocket-websocket-client": "^1.0.0-alpha.3",
24+
"webpack": "^5.74.0",
25+
"webpack-cli": "^4.10.0",
26+
"webpack-dev-server": "^4.11.0"
27+
},
28+
"dependencies": {
29+
"html-webpack-plugin": "^5.5.3"
30+
}
31+
}

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { RSocketConnector } from "rsocket-core";
2+
import { WebsocketClientTransport } from "rsocket-websocket-client";
3+
4+
export async function connect(transportOptions) {
5+
const connector = new RSocketConnector({
6+
transport: new WebsocketClientTransport({
7+
wsCreator: (url) => new WebSocket(url),
8+
...transportOptions,
9+
}),
10+
});
11+
12+
return connector.connect();
13+
}
14+
15+
export function createBuffer(value) {
16+
return Buffer.from(value);
17+
}

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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const HtmlWebpackPlugin = require("html-webpack-plugin");
4+
5+
module.exports = {
6+
entry: "./rsocket.js",
7+
mode: "development",
8+
output: {
9+
filename: "rsocket.js",
10+
library: "rsocket",
11+
path: path.resolve(__dirname, "dist"),
12+
},
13+
devtool: "source-map",
14+
devServer: {
15+
static: {
16+
directory: path.join(__dirname, "dist"),
17+
},
18+
compress: false,
19+
port: 9000,
20+
},
21+
resolve: {
22+
fallback: {
23+
buffer: require.resolve("buffer/"),
24+
},
25+
},
26+
plugins: [
27+
new HtmlWebpackPlugin({
28+
template: "./index.html",
29+
inject: "head",
30+
scriptLoading: "blocking",
31+
}),
32+
new webpack.ProvidePlugin({
33+
Buffer: ["buffer", "Buffer"],
34+
}),
35+
],
36+
};

0 commit comments

Comments
 (0)