Skip to content

Commit e1abf8e

Browse files
viglucciviglucci
committed
chore: update dependencies in webpack examples + update webpack broswer-bundle example
Signed-off-by: Kevin Viglucci <[email protected]>
1 parent a83353e commit e1abf8e

File tree

15 files changed

+3284
-775
lines changed

15 files changed

+3284
-775
lines changed

‎packages/rsocket-examples/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"rsocket-tcp-server": "^1.0.0-alpha.3",
4040
"rsocket-websocket-client": "^1.0.0-alpha.3",
4141
"rsocket-websocket-server": "^1.0.0-alpha.3",
42-
"ws": "~8.2.3"
42+
"ws": "^8.18"
4343
},
4444
"devDependencies": {
4545
"rimraf": "~3.0.2",

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,24 @@ browser context without NPM or other bundling tools.
88

99
__rsocket.js__
1010

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
11+
[src/rsocket.js](src/rsocket.js) demonstrates how to write a "library" that exposes functionality for creating an RSocket
12+
connection using the WebSocket transport. Additionally this "library" exposes a function for creating a buffer from a
1313
given value.
1414

1515
For your own use cases you will likely need to alter the implementation to expose the functionality you need.
1616

1717
__webpack.config.js__
1818

1919
[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.
20+
from the [src/rsocket.js](src/rsocket.js) in the global scope of any HTML file which loads the built library file.
2121

2222
__index.html__
2323

24-
[index.html](./index.html) demonstrates how to use the global `rsocket` variable which is exposed by the `rsocket.js` library built by Webpack.
24+
[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.
2525

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.
26+
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.
2727

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.
28+
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.
2929

3030
## Run the server
3131

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

Lines changed: 0 additions & 103 deletions
This file was deleted.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
"serve": "webpack serve"
1414
},
1515
"engines": {
16-
"node": "^16.17.0"
16+
"node": "^18"
1717
},
1818
"devDependencies": {
1919
"buffer": "^6.0.3",
2020
"rsocket-adapter-rxjs": "^1.0.0-alpha.4",
2121
"rsocket-composite-metadata": "^1.0.0-alpha.3",
2222
"rsocket-core": "^1.0.0-alpha.3",
2323
"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"
24+
"webpack": "^5",
25+
"webpack-cli": "^5",
26+
"webpack-dev-server": "^5"
2727
},
2828
"dependencies": {
2929
"html-webpack-plugin": "^5.5.3"

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
var state = "CONNECTING";
2+
var outputDiv = document.querySelector("#output");
3+
var _rsocket = null;
4+
var errorColor = "#eb4034";
5+
var infoColor = "#348CEBFF";
6+
var messageColor = "#2ccd20";
7+
8+
function sendMessage(message) {
9+
if (state !== "CONNECTED") {
10+
const div = document.createElement("div");
11+
div.textContent = `[${new Date().toISOString()}] not connected. cannot send messages!`;
12+
div.style.color = errorColor;
13+
outputDiv.appendChild(div);
14+
return;
15+
}
16+
const bufferData = rsocket.createBuffer(message || "");
17+
_rsocket.requestResponse(
18+
{
19+
data: bufferData,
20+
},
21+
{
22+
onError: function (e) {
23+
console.error(e);
24+
},
25+
onNext: function (payload, isComplete) {
26+
const div = document.createElement("div");
27+
div.textContent = `[${new Date().toISOString()}] received: payload[data: ${
28+
payload.data
29+
}; metadata: ${payload.metadata}]|${isComplete}`;
30+
div.style.color = messageColor;
31+
outputDiv.appendChild(div);
32+
},
33+
onComplete: function () {
34+
const div = document.createElement("div");
35+
div.textContent = `Stream completed...`;
36+
outputDiv.appendChild(div);
37+
},
38+
onExtension: function () {},
39+
}
40+
);
41+
}
42+
43+
var sendButton = document.querySelector("#send-button");
44+
sendButton.addEventListener("click", function () {
45+
var input = document.querySelector("#input-field");
46+
var value = input.value;
47+
if (!value.length) {
48+
const div = document.createElement("div");
49+
div.textContent = `[${new Date().toISOString()}] please include a message!`;
50+
div.style.color = errorColor;
51+
outputDiv.appendChild(div);
52+
return;
53+
}
54+
const div = document.createElement("div");
55+
div.textContent = `[${new Date().toISOString()}] sending: ${value}`;
56+
div.style.color = infoColor;
57+
outputDiv.appendChild(div);
58+
sendMessage(value);
59+
});
60+
61+
rsocket
62+
.connect({
63+
url: "ws://localhost:9090",
64+
})
65+
.then(function (_r) {
66+
state = "CONNECTED";
67+
_rsocket = _r;
68+
const div = document.createElement("div");
69+
div.textContent = `[${new Date().toISOString()}] connected!`;
70+
div.style.color = infoColor;
71+
outputDiv.appendChild(div);
72+
})
73+
.catch(function (err) {
74+
const errorMessage =
75+
err?.message ||
76+
"failed to connect to rsocket! check the console for more details.";
77+
if (err) {
78+
console.error("failed to connect rsocket: " + err.message);
79+
} else {
80+
console.error("failed to connect rsocket!");
81+
}
82+
const div = document.createElement("div");
83+
div.textContent = `[${new Date().toISOString()}] ${errorMessage}`;
84+
div.style.color = errorColor;
85+
outputDiv.appendChild(div);
86+
});

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
<form action="javascript:void(0);">
10+
<label>Message:</label>
11+
<input type="text" id="input-field" />
12+
<button id="send-button">send</button>
13+
</form>
14+
<div id="output" style="margin-top: 20px;"></div>
15+
</body>
16+
</html>

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

File renamed without changes.

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,19 @@ const webpack = require("webpack");
33
const HtmlWebpackPlugin = require("html-webpack-plugin");
44

55
module.exports = {
6-
entry: "./rsocket.js",
76
mode: "development",
7+
entry: {
8+
rsocket: {
9+
import: "./src/rsocket.js",
10+
library: {
11+
type: "window",
12+
name: "rsocket",
13+
},
14+
},
15+
app: "./src/app.js",
16+
},
817
output: {
9-
filename: "rsocket.js",
10-
library: "rsocket",
18+
filename: "[name].js", // [name] will be replaced by 'app' or 'library'
1119
path: path.resolve(__dirname, "dist"),
1220
},
1321
devtool: "source-map",
@@ -25,8 +33,8 @@ module.exports = {
2533
},
2634
plugins: [
2735
new HtmlWebpackPlugin({
28-
template: "./index.html",
29-
inject: "head",
36+
template: "./src/index.html",
37+
inject: "footer",
3038
scriptLoading: "blocking",
3139
}),
3240
new webpack.ProvidePlugin({

0 commit comments

Comments
 (0)