VDMDI/UDN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add channel communication

Browse Source
This commit is contained in:
marlonerler
2024-07-04 17:27:46 +02:00
parent 2770d9b07d
commit 9649e3e522
5 changed files with 239 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/dist/index.js
Vendored
+54 -3
View File
@@ -1,5 +1,27 @@
(() => {
// node_modules/bloatless-react/index.ts
var State = class {
_value;
_bindings = /* @__PURE__ */ new Set();
constructor(initialValue) {
this._value = initialValue;
}
get value() {
return this._value;
}
set value(newValue) {
if (this._value == newValue) return;
this._value = newValue;
this.callSubscriptions();
}
callSubscriptions() {
this._bindings.forEach((fn) => fn(this._value));
}
subscribe(fn) {
this._bindings.add(fn);
fn(this._value);
}
};
function createElement(tagName, attributes = {}, ...children) {
const element = document.createElement(tagName);
if (attributes != null)
@@ -58,7 +80,36 @@
// src/index.tsx
var ws = new WebSocket(`ws://${window.location.host}`);
ws.onopen = () => ws.send("Hello!");
ws.onmessage = (data) => console.log(data);
document.querySelector("main").append(/* @__PURE__ */ createElement("h1", null, "Hello there!"));
ws.addEventListener("message", (message) => {
receivedMessage.value = message.data;
});
function send(object) {
const stringified = JSON.stringify(object);
ws.send(stringified);
}
var receivedMessage = new State("");
var subscriptionChannel = new State("");
var messageChannel = new State("");
var messageBody = new State("");
function subscribe() {
send({ subscribeChannel: subscriptionChannel.value });
}
function unsubscribe() {
send({ unsubscribeChannel: subscriptionChannel.value });
}
function sendMessage() {
send({
messageChannel: messageChannel.value,
messageBody: messageBody.value
});
}
document.querySelector("main").append(
/* @__PURE__ */ createElement("article", null, /* @__PURE__ */ createElement("header", null, "UDN Test"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, "Received message"), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": receivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Subscribe to channel"), /* @__PURE__ */ createElement(
"input",
{
placeholder: "my-channel",
"bind:value": subscriptionChannel
}
))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, "Unsubscribe"), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, "Subscribe", /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Channel"), /* @__PURE__ */ createElement("input", { placeholder: "my-channel", "bind:value": messageChannel }))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Message"), /* @__PURE__ */ createElement("input", { placeholder: "Hello, world!", "bind:value": messageBody }))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": sendMessage }, "Send", /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))))
);
})();