finos · texodus · Mar 17, 2020 · Mar 13, 2020 · Mar 16, 2020
diff --git a/examples/remote-express-typescript/assets/index.css b/examples/remote-express-typescript/assets/index.css
@@ -0,0 +1,31 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+ perspective-viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@media (max-width: 600px) {
+    html {
+        overflow: hidden;
+    }
+
+    body {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+        touch-action: none;
+    }
+}
diff --git a/examples/remote-express-typescript/assets/index.html b/examples/remote-express-typescript/assets/index.html
@@ -0,0 +1,69 @@
+<!--
+
+   Copyright (c) 2017, the Perspective Authors.
+
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <script src="perspective-viewer.js"></script>
+    <script src="perspective-viewer-hypergrid.js"></script>
+    <script src="perspective-viewer-d3fc.js"></script>
+
+    <script src="perspective.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="material.dark.css">
+
+</head>
+
+<body>
+
+    <perspective-viewer 
+        id="view1"
+        plugin="d3_heatmap"
+        row-pivots='["client"]'
+        columns='["chg"]'
+        column-pivots='["name"]'>
+
+    </perspective-viewer>
+
+    <script>
+
+        window.addEventListener('WebComponentsReady', async function() {
+
+            // Create two perspective interfaces, one remotely via WebSocket, 
+            // and one local via WebWorker.
+
+            const websocket = perspective.websocket(`${window.location.origin.replace("http", "ws")}/subscribe`);
+            const worker = perspective.worker();
+            worker.initialize_profile_thread();
+
+            // Get a proxy for a view named "data_source_one", registered on
+            // the server with a reciprocal call to `host_view()`.
+            // No data is transferred, `view` is a virtual handle for data on
+            // the server.
+            const table = websocket.open_table('remote_table');
+
+            // Create a `table` from this, owned by the local WebWorker.
+            // Data is transferred from `view` to the local WebWorker, both
+            // the current state and all future updates, as Arrows.
+            // const table = worker.table(view, {limit: 10000});
+
+            // Load this in the `<perspective-viewer>`.
+            document.getElementById('view1').load(table);
+        });
+
+    </script>
+
+</body>
+
+</html>
diff --git a/examples/remote-express-typescript/package.json b/examples/remote-express-typescript/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "remote-express-typescript",
+    "private": true,
+    "version": "0.4.5",
+    "description": "An example of 2 Perspectives, one client and one server, streaming via Apache Arrow.",
+    "scripts": {
+        "start": "tsc && node dist/server.js"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.4.5",
+        "@finos/perspective-viewer": "^0.4.5",
+        "@finos/perspective-viewer-d3fc": "^0.4.5",
+        "@finos/perspective-viewer-hypergrid": "^0.4.5"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.3",
+        "@types/express-ws": "^3.0.0"
+    }
+}
diff --git a/examples/remote-express-typescript/src/server.ts b/examples/remote-express-typescript/src/server.ts
@@ -0,0 +1,28 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+import {WebSocketManager, perspective_assets, Table} from "@finos/perspective";
+import path from "path";
+import express from "express";
+import expressWs from "express-ws";
+import {AddressInfo} from "net";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import {securities} from "../../datasources";
+
+const app = expressWs(express()).app;
+
+const manager = new WebSocketManager();
+securities().then((table: Table) => manager.host_table("remote_table", table));
+
+app.ws("/subscribe", ws => manager.add_connection(ws));
+app.use("/", perspective_assets([path.resolve(__dirname, "../assets")], true));
+
+const server = app.listen(8080, () => console.log(`Listening on port ${(server.address() as AddressInfo).port}`));
diff --git a/examples/remote-express-typescript/tsconfig.json b/examples/remote-express-typescript/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "target": "es6",
+        "noImplicitAny": true,
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "outDir": "./dist",
+        "baseUrl": ".",
+        "strict": true,
+        "alwaysStrict": true,
+    },
+    "include": [
+        "src/server.ts"
+    ],
+    "exclude": [
+        "node_modules",
+    ]
+}
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
         "@babel/plugin-transform-runtime": "^7.8.3",
         "@babel/polyfill": "^7.8.3",
         "@babel/preset-env": "^7.8.4",
+        "@types/ws": "^7.2.2",
         "@typescript-eslint/eslint-plugin": "^2.4.0",
         "@typescript-eslint/parser": "^2.4.0",
         "arraybuffer-loader": "^1.0.2",