@kitware/wslink 2.5.0

package/src/WebsocketConnection/session.js

@@ -0,0 +1,284 @@
+// Helper borrowed from paraviewweb/src/Common/Core
+import CompositeClosureHelper from "../CompositeClosureHelper";
+import { UnChunker, generateChunks } from "./chunking";
+import { Encoder, Decoder } from "@msgpack/msgpack";
+
+function defer() {
+  const deferred = {};
+
+  deferred.promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+
+  return deferred;
+}
+
+function Session(publicAPI, model) {
+  const CLIENT_ERROR = -32099;
+  let msgCount = 0;
+  const inFlightRpc = {};
+  // matches 'rpc:client3:21'
+  // client may be dot-separated and include '_'
+  // number is message count - unique.
+  // matches 'publish:dot.separated.topic:42'
+  const regexRPC = /^(rpc|publish|system):(\w+(?:\.\w+)*):(?:\d+)$/;
+  const subscriptions = {};
+  let clientID = null;
+  let MAX_MSG_SIZE = 512 * 1024;
+  const unchunker = new UnChunker();
+
+  // --------------------------------------------------------------------------
+  // Private helpers
+  // --------------------------------------------------------------------------
+
+  function onCompleteMessage(payload) {
+    if (!payload) return;
+    if (!payload.id) return;
+    if (payload.error) {
+      const deferred = inFlightRpc[payload.id];
+      if (deferred) {
+        deferred.reject(payload.error);
+      } else {
+        console.error("Server error:", payload.error);
+      }
+    } else {
+      const match = regexRPC.exec(payload.id);
+      if (match) {
+        const type = match[1];
+        if (type === "rpc") {
+          const deferred = inFlightRpc[payload.id];
+          if (!deferred) {
+            console.log(
+              "session message id without matching call, dropped",
+              payload
+            );
+            return;
+          }
+          deferred.resolve(payload.result);
+        } else if (type == "publish") {
+          console.assert(
+            inFlightRpc[payload.id] === undefined,
+            "publish message received matching in-flight rpc call"
+          );
+          // regex extracts the topic for us.
+          const topic = match[2];
+          if (!subscriptions[topic]) {
+            return;
+          }
+          // for each callback, provide the message data. Wrap in an array, for back-compatibility with WAMP
+          subscriptions[topic].forEach((callback) =>
+            callback([payload.result])
+          );
+        } else if (type == "system") {
+          // console.log('DBG system:', payload.id, payload.result);
+          const deferred = inFlightRpc[payload.id];
+          if (payload.id === "system:c0:0") {
+            clientID = payload.result.clientID;
+            MAX_MSG_SIZE = payload.result.maxMsgSize || MAX_MSG_SIZE;
+            if (deferred) deferred.resolve(clientID);
+          } else {
+            console.error("Unknown system message", payload.id);
+            if (deferred)
+              deferred.reject({
+                code: CLIENT_ERROR,
+                message: `Unknown system message ${payload.id}`,
+              });
+          }
+        } else {
+          console.error("Unknown rpc id format", payload.id);
+        }
+      }
+    }
+    delete inFlightRpc[payload.id];
+  }
+
+  // --------------------------------------------------------------------------
+  // Public API
+  // --------------------------------------------------------------------------
+
+  publicAPI.onconnect = (event) => {
+    // send hello message
+    const deferred = defer();
+    const id = "system:c0:0";
+    inFlightRpc[id] = deferred;
+
+    const wrapper = {
+      wslink: "1.0",
+      id,
+      method: "wslink.hello",
+      args: [{ secret: model.secret }],
+      kwargs: {},
+    };
+
+    const encoder = new CustomEncoder();
+    const packedWrapper = encoder.encode(wrapper);
+
+    for (let chunk of generateChunks(packedWrapper, MAX_MSG_SIZE)) {
+      model.ws.send(chunk, { binary: true });
+    }
+
+    return deferred.promise;
+  };
+
+  // --------------------------------------------------------------------------
+
+  publicAPI.call = (method, args = [], kwargs = {}) => {
+    // create a promise that we will use to notify the caller of the result.
+    const deferred = defer();
+    // readyState OPEN === 1
+    if (model.ws && clientID && model.ws.readyState === 1) {
+      const id = `rpc:${clientID}:${msgCount++}`;
+      inFlightRpc[id] = deferred;
+
+      const wrapper = { wslink: "1.0", id, method, args, kwargs };
+
+      const encoder = new CustomEncoder();
+      const packedWrapper = encoder.encode(wrapper);
+
+      for (let chunk of generateChunks(packedWrapper, MAX_MSG_SIZE)) {
+        model.ws.send(chunk, { binary: true });
+      }
+    } else {
+      deferred.reject({
+        code: CLIENT_ERROR,
+        message: `RPC call ${method} unsuccessful: connection not open`,
+      });
+    }
+    return deferred.promise;
+  };
+
+  // --------------------------------------------------------------------------
+
+  publicAPI.subscribe = (topic, callback) => {
+    const deferred = defer();
+    if (model.ws && clientID) {
+      // we needs to track subscriptions, to trigger callback when publish is received.
+      if (!subscriptions[topic]) subscriptions[topic] = [];
+      subscriptions[topic].push(callback);
+      // we can notify the server, but we don't need to, if the server always sends messages unconditionally.
+      // model.ws.send(JSON.stringify({ wslink: '1.0', id: `subscribe:${msgCount++}`, method, args: [] }));
+      deferred.resolve({ topic, callback });
+    } else {
+      deferred.reject({
+        code: CLIENT_ERROR,
+        message: `Subscribe call ${topic} unsuccessful: connection not open`,
+      });
+    }
+    return {
+      topic,
+      callback,
+      promise: deferred.promise,
+      unsubscribe: () => publicAPI.unsubscribe({ topic, callback }),
+    };
+  };
+
+  // --------------------------------------------------------------------------
+
+  publicAPI.unsubscribe = (info) => {
+    const deferred = defer();
+    const { topic, callback } = info;
+    if (!subscriptions[topic]) {
+      deferred.reject({
+        code: CLIENT_ERROR,
+        message: `Unsubscribe call ${topic} unsuccessful: not subscribed`,
+      });
+      return deferred.promise;
+    }
+    const index = subscriptions[topic].indexOf(callback);
+    if (index !== -1) {
+      subscriptions[topic].splice(index, 1);
+      deferred.resolve();
+    } else {
+      deferred.reject({
+        code: CLIENT_ERROR,
+        message: `Unsubscribe call ${topic} unsuccessful: callback not found`,
+      });
+    }
+    return deferred.promise;
+  };
+
+  // --------------------------------------------------------------------------
+
+  publicAPI.close = () => {
+    const deferred = defer();
+    // some transports might be able to close the session without closing the connection. Not true for websocket...
+    model.ws.close();
+    unchunker.releasePendingMessages();
+    deferred.resolve();
+    return deferred.promise;
+  };
+
+  // --------------------------------------------------------------------------
+
+  function createDecoder() {
+    return new Decoder();
+  }
+
+  publicAPI.onmessage = async (event) => {
+    const message = await unchunker.processChunk(event.data, createDecoder);
+
+    if (message) {
+      onCompleteMessage(message);
+    }
+  };
+
+  // --------------------------------------------------------------------------
+
+  publicAPI.addAttachment = (payload) => {
+    // Deprecated method, keeping it to avoid breaking compatibility
+    // Now that we use msgpack to pack/unpack messages,
+    // We can have binary data directly in the object itself,
+    // without needing to transfer it separately from the rest.
+    //
+    // If an ArrayBuffer is passed, ensure it gets wrapped in
+    // a DataView (which is what the encoder expects).
+    if (payload instanceof ArrayBuffer) {
+      return new DataView(payload);
+    }
+
+    return payload;
+  };
+}
+
+const DEFAULT_VALUES = {
+  secret: "wslink-secret",
+  ws: null,
+};
+
+export function extend(publicAPI, model, initialValues = {}) {
+  Object.assign(model, DEFAULT_VALUES, initialValues);
+
+  CompositeClosureHelper.destroy(publicAPI, model);
+  CompositeClosureHelper.isA(publicAPI, model, "Session");
+
+  Session(publicAPI, model);
+}
+
+// ----------------------------------------------------------------------------
+
+export const newInstance = CompositeClosureHelper.newInstance(extend);
+
+// ----------------------------------------------------------------------------
+
+export default { newInstance, extend };
+
+class CustomEncoder extends Encoder {
+  // Unfortunately @msgpack/msgpack only supports
+  // views of an ArrayBuffer (DataView, Uint8Array,..),
+  // but not an ArrayBuffer itself.
+  // They suggest using custom type extensions to support it,
+  // but that would yield a different packed payload
+  // (1 byte larger, but most importantly it would require
+  // dealing with the custom type when unpacking on the server).
+  // Since this type is too trivial to be treated differently,
+  // and since I don't want to rely on the users always wrapping
+  // their ArrayBuffers in a view, I'm subclassing the encoder.
+  encodeObject(object, depth) {
+    if (object instanceof ArrayBuffer) {
+      object = new DataView(object);
+    }
+
+    return super.encodeObject.call(this, object, depth);
+  }
+}

package/src/index.js

@@ -0,0 +1,11 @@
+import CompositeClosureHelper from "./CompositeClosureHelper";
+import ProcessLauncher from "./ProcessLauncher";
+import SmartConnect from "./SmartConnect";
+import WebsocketConnection from "./WebsocketConnection";
+
+export {
+  CompositeClosureHelper,
+  ProcessLauncher,
+  SmartConnect,
+  WebsocketConnection,
+};

package/test/simple.js

@@ -0,0 +1,185 @@
+/* global document */
+import WebsocketConnection from "../src/WebsocketConnection";
+import SmartConnect from "../src/SmartConnect";
+
+// this template allows us to use HtmlWebpackPlugin
+// in webpack to generate our index.html
+// expose-loader makes our 'export' functions part of the 'app' global
+const htmlContent = `<button onClick="app.connect()">Connect</button>
+<button onClick="app.wsclose()">Disconnect</button>
+<br/>
+<input type="text" value="1,2,3,4,5" class="input" />
+<button onClick="app.sendInput('add')">Send Add</button>
+<button onClick="app.sendInput('mult')">Send Mult</button>
+<button onClick="app.sendImage('unwrapped.image')">Send Image</button>
+<button onClick="app.testNesting()">Test Nesting</button>
+<button onClick="app.toggleStream()">Sub/Unsub</button>
+<button onClick="app.sendMistake()">Mistake</button>
+<button onClick="app.sendInput('special')">Test NaN</button>
+<button onClick="app.sendServerQuit()">Server Quit</button>
+<br/>
+<textarea class="output" rows="12" cols="50"></textarea>
+<br/>
+<canvas class="imageCanvas" width="300px" height="300px"></canvas>
+`;
+
+const rootContainer = document.querySelector("body");
+const controlContainer = document.createElement("div");
+rootContainer.appendChild(controlContainer);
+controlContainer.innerHTML = htmlContent;
+
+const inputElement = document.querySelector(".input");
+const logOutput = document.querySelector(".output");
+let ws = null;
+let subscription = false;
+let session = null;
+
+function log(msg) {
+  console.log(msg);
+  logOutput.innerHTML += msg;
+  logOutput.innerHTML += "\n";
+}
+function logerr(err) {
+  console.error(err);
+  logOutput.innerHTML += `error: ${err.code}, "${err.message}", ${err.data}`;
+  logOutput.innerHTML += "\n";
+}
+
+export function sendInput(type) {
+  if (!session) return;
+  const data = JSON.parse("[" + inputElement.value + "]");
+  session.call(`myprotocol.${type}`, [data]).then(
+    (result) => log("result " + result),
+    (err) => logerr(err)
+  );
+}
+export function sendImage(type) {
+  if (!session) return;
+  session.call(`myprotocol.${type}`, []).then(
+    (result) => {
+      log("result " + result);
+      handleMessage(result);
+    },
+    (err) => logerr(err)
+  );
+}
+function handleMessage(inData) {
+  let data = Array.isArray(inData) ? inData[0] : inData;
+  let blob = data.blob || data;
+  if (blob instanceof Blob) {
+    const canvas = document.querySelector(".imageCanvas");
+    const ctx = canvas.getContext("2d");
+
+    const img = new Image();
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      img.onload = () => ctx.drawImage(img, 0, 0);
+      img.src = e.target.result;
+    };
+    reader.readAsDataURL(blob);
+  } else {
+    log("result " + blob);
+  }
+}
+
+export function testNesting() {
+  if (!session) return;
+  session.call("myprotocol.nested.image", []).then(
+    (data) => {
+      if (data["image"]) handleMessage(data["image"]);
+      const onload = (e) => {
+        const arr = new Uint8Array(e.target.result);
+        if (arr.length === 4) {
+          arr.forEach((d, i) => {
+            if (d !== i + 1) console.error("mismatch4", d, i);
+          });
+        } else if (arr.length === 6) {
+          arr.forEach((d, i) => {
+            if (d !== i + 5) console.error("mismatch4", d, i);
+          });
+        } else {
+          console.error("Size mismatch", arr.length);
+        }
+      };
+      data.bytesList.forEach((bl) => {
+        const reader = new FileReader();
+        reader.onload = onload;
+        reader.readAsArrayBuffer(bl);
+      });
+
+      console.log("Nesting:", data);
+    },
+    (err) => logerr(err)
+  );
+}
+
+export function sendMistake() {
+  if (!session) return;
+  session
+    .call("myprotocol.mistake.TYPO", ["ignored"])
+    .then(handleMessage, (err) => logerr(err));
+}
+
+export function sendServerQuit() {
+  if (!session) return;
+  session.call("application.exit.later", [5]).then(
+    (result) => log("result " + result),
+    (err) => logerr(err)
+  );
+}
+
+export function toggleStream() {
+  if (!subscription) {
+    subscription = session.subscribe("image", handleMessage);
+    session.call("myprotocol.stream", ["image"]).then(
+      (result) => log("result " + result),
+      (err) => logerr(err)
+    );
+  } else {
+    session.call("myprotocol.stop", ["image"]).then(
+      (result) => log("result " + result),
+      (err) => logerr(err)
+    );
+    // session.unsubscribe(subscription);
+    subscription.unsubscribe();
+    subscription = null;
+  }
+}
+
+export function wsclose() {
+  if (!session) return;
+  session.close();
+  // it's fine to destroy the WebsocketConnection, but you won't get the WS close message.
+  // if (ws) ws.destroy();
+  // ws = null;
+}
+
+export function connect(direct = false) {
+  ws = null;
+  if (direct) {
+    ws = WebsocketConnection.newInstance({ urls: "ws://localhost:8080/ws" });
+  } else {
+    const config = { application: "simple" };
+    ws = SmartConnect.newInstance({ config });
+  }
+  ws.onConnectionReady(() => {
+    log("WS open");
+    if (!session) {
+      session = ws.getSession();
+    }
+    const canvas = document.querySelector(".imageCanvas");
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, 300, 300);
+  });
+
+  ws.onConnectionClose(() => {
+    log("WS close");
+  });
+
+  ws.onConnectionError((event) => {
+    log("WS error");
+    console.error(event);
+  });
+
+  session = ws.connect();
+}

package/vite.config.js

@@ -0,0 +1,15 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.js"),
+      name: "wslink",
+      fileName: "wslink",
+    },
+  },
+});