Use ws-backend in website

Author: qti3e

bin/bin.ts

@@ -23,7 +23,6 @@
 import { fork, isMaster } from "cluster";
 import * as opn from "opn";
 import * as WebSocket from "ws";
-import { ClusterRPC } from "../src/rpc";
 import { createHTTPServer } from "./server";
 
 // Constants
@@ -38,33 +37,37 @@ if (isMaster) {
     // For now, let's create a new process for each connection and load
     // sandbox.ts in there.
     const worker = fork();
-    const rpc = new ClusterRPC(worker, true);
-    // To prevent "channel not active." error.
-    rpc.start({});
     // Route all messages from child process to client.
     worker.on("message", msg => {
       const message = JSON.stringify(msg);
       ws.send(message);
     });
+    // Handle worker exit.
+    worker.on("exit", () => {
+      console.log("[%s] Worker exited.", worker.process.pid);
+      if (ws.readyStatus === ws.OPEN) {
+        ws.close();
+      }
+    });
     // Route all valid messages to the child process.
     ws.on("message", rawData => {
       try {
         const data = JSON.parse(String(rawData));
-        rpc.call(data.type, data);
+        worker.send(data);
       } catch (e) {
         console.error(e);
       }
     });
     // Kill a child process whenever user disconnects.
     ws.on("close", () => {
-      rpc.stop();
       worker.kill();
     });
   });
 
   server.listen(PORT, () => {
     console.log("Propel server started on port %s.", PORT);
-    opn(`http://localhost:${PORT}/?ws=${PORT}`);
+    const wsUrl = `ws://localhost:${PORT}`;
+    opn(`http://localhost:${PORT}/#ws/${encodeURIComponent(wsUrl)}`);
   });
 } else {
   console.log("[%s] Worker started.", process.pid);

src/app.tsx

@@ -18,6 +18,7 @@ import * as db from "./db";
 import { push, Router } from "./router";
 import * as types from "./types";
 import { equal } from "./util";
+import { VM } from "./vm";
 
 import { ErrorPage } from "./components/error";
 import { GlobalHeader } from "./components/header";
@@ -190,6 +191,25 @@ export const NotebookPage = bind(Notebook, {
 });
 
 export const HomePage = bind(Home as any, {});
+
+// TODO remove any
+export class WSSetupPage extends Component<any> {
+  componentWillMount() {
+    // TODO maybe /notebook/ws ?
+    setTimeout(() => push("/notebook/anonymous"), 2000);
+    console.log(this.props);
+    const ws = decodeURIComponent(this.props.matches.server);
+    VM.wsServer = ws;
+  }
+
+  render() {
+    return (
+      <div>
+        Use websocket server. { VM.wsServer }
+      </div>
+    );
+  }
+}
 // tslint:enable:variable-name
 
 export interface AppState {
@@ -226,6 +246,7 @@ export class App extends Component<{}, AppState> {
           <RecentPage path="/notebook" userInfo={userInfo} />
           <NotebookPage path="/notebook/:nbId" userInfo={userInfo} />
           <ProfilePage path="/user/:userId" userInfo={userInfo} />
+          <WSSetupPage path="/ws/:server" />
           <ErrorPage message="The page you're looking for doesn't exist." />
         </Router>
       </div>

src/rpc.ts

@@ -224,7 +224,7 @@ export class ClusterRPC extends RPCBase {
   }
 
   private receive = (message: Message) => {
-      super.onMessage(message);
+    super.onMessage(message);
   }
 
   start(handlers: RpcHandlers): void {
@@ -236,6 +236,6 @@ export class ClusterRPC extends RPCBase {
 
   stop(): void {
     super.stop();
-    this.process.removeListener("message");
+    this.process.removeListener("message", this.receive);
   }
 }

src/vm.ts

@@ -15,8 +15,8 @@
 
 import { escape } from "he";
 import { OutputHandlerDOM } from "./output_handler_dom";
-import { RPC, WindowRPC } from "./rpc";
-import { randomString } from "./util";
+import { RPC, WebSocketRPC, WindowRPC } from "./rpc";
+import { createResolvable, randomString } from "./util";
 
 function createIframe(rpcChannelId): HTMLIFrameElement {
   const base = new URL("/sandbox", window.document.baseURI).href;
@@ -49,32 +49,48 @@ export type CellId = number | string;
 export class VM {
   private iframe: HTMLIFrameElement;
   private RPC: RPC;
+  private ws: WebSocket;
   readonly id: string;
+  static wsServer = null;
 
   constructor(private rpcHandler) {
     this.id = randomString();
   }
 
-  init() {
+  async init() {
     if (this.RPC) return;
-    this.iframe = createIframe(this.id);
-    this.RPC = new WindowRPC(this.iframe.contentWindow, this.id);
-    this.RPC.start(this.rpcHandler);
+    if (VM.wsServer) {
+      console.log("Connecting to ws-backend: %s.", VM.wsServer);
+      const wsPromise = createResolvable();
+      this.ws = new WebSocket(VM.wsServer);
+      this.ws.onopen = wsPromise.resolve;
+      await wsPromise;
+      this.RPC = new WebSocketRPC(this.ws);
+      this.RPC.start(this.rpcHandler);
+    } else {
+      this.iframe = createIframe(this.id);
+      this.RPC = new WindowRPC(this.iframe.contentWindow, this.id);
+      this.RPC.start(this.rpcHandler);
+    }
   }
 
   async exec(code: string, id: CellId) {
-    this.init();
+    await this.init();
     await this.RPC.call("runCell", code, id);
   }
 
   destroy() {
     if (!this.RPC) return;
     this.RPC.stop();
-    if (this.iframe.parentNode) {
+    if (this.iframe && this.iframe.parentNode) {
       this.iframe.parentNode.removeChild(this.iframe);
     }
+    if (this.ws) {
+      this.ws.close();
+    }
     this.RPC = null;
     this.iframe = null;
+    this.ws = null;
   }
 }