Merge pull request #29 from jcoady/master

Add websocket support through proxied server

Author: jcoady

labextension/vpython/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vpython",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "VPython extension for Jupyterlab",
   "keywords": [
     "jupyter",
@@ -27,10 +27,11 @@
     "jpinstall": "jupyter labextension install ."
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.1.2",
-    "@jupyterlab/apputils": "^1.1.2",
-    "@jupyterlab/docregistry": "^1.1.2",
-    "@jupyterlab/notebook": "^1.1.2",
+    "@jupyterlab/application": "^1.1.3",
+    "@jupyterlab/apputils": "^1.1.3",
+    "@jupyterlab/coreutils": "^3.1.0",
+    "@jupyterlab/docregistry": "^1.1.3",
+    "@jupyterlab/notebook": "^1.1.3",
     "@phosphor/disposable": "^1.3.0",
     "script-loader": "^0.7.2"
   },

labextension/vpython/src/glowcommlab.d.ts

@@ -1,3 +1,3 @@
 export function onmessage (msg: any): void;
-export function setupWebsocket (msg: any): void;
+export function setupWebsocket (msg: any, serviceUrl: any): void;
 export var comm: any;

labextension/vpython/src/glowcommlab.js

@@ -15,17 +15,31 @@ var isopen = false
 
 console.log('START OF GLOWCOMM')
 
-export function createWebsocket(msg) {
+export function createWebsocket(msg, serviceUrl) {
     if (msg.content.data.wsport !== undefined) {
         // create websocket instance
-		var port = msg.content.data.wsport
-		var uri = msg.content.data.wsuri
-        ws = new WebSocket("ws://localhost:" + port + uri);
-	    ws.binaryType = "arraybuffer";
+        var port = msg.content.data.wsport
+        var uri = msg.content.data.wsuri
+        var loc = document.location, new_uri, url;
+			
+        if (loc.protocol === "https:") {
+           new_uri = "wss:";
+        } else {
+           new_uri = "ws:";
+        }
+        if (document.location.hostname.includes("localhost")){
+           url = "ws://localhost:" + port + uri;
+        }
+        else {
+           new_uri += '//' + document.location.host + service_url + uri;
+           url = new_uri
+        }
+        ws = new WebSocket(url);
+        ws.binaryType = "arraybuffer";
 
         // Handle incoming websocket message callback
         ws.onmessage = function(evt) {
-            console.log("WebSocket Message Received: " + evt.data)
+		console.log("WebSocket Message Received: " + evt.data)
         };
 
         // Close Websocket callback

labextension/vpython/src/index.ts

@@ -14,7 +14,7 @@ import {
   NotebookPanel, INotebookModel
 } from '@jupyterlab/notebook';
 
-
+import { PageConfig } from '@jupyterlab/coreutils';
 
 /**
  * The plugin registration information.
@@ -47,8 +47,13 @@ class VPythonExtension implements DocumentRegistry.IWidgetExtension<NotebookPane
 					glowcommlab.comm = vp_comm
 					vp_comm.onMsg = glowcommlab.onmessage
 
-					glowcommlab.setupWebsocket(commMsg)
+					// Get base URL of current notebook server
+					let baseUrl = PageConfig.getBaseUrl()
+
+					// Construct URL of our proxied service
+					let serviceUrl = base_url + 'proxy/' + port;
 
+					glowcommlab.setupWebsocket(commMsg, serviceUrl)					
 				});
 
 				vp_comm.onClose = (msg) => {console.log("comm onClose");};

requirements.txt

@@ -1,3 +1,3 @@
 Cython
-vpnotebook
 vpython
+jupyter-server-proxy

vpython/vpython_libraries/glowcomm.js

@@ -1,6 +1,7 @@
-define(["nbextensions/vpython_libraries/plotly.min",
+define(["base/js/utils",
+        "nbextensions/vpython_libraries/plotly.min",
         "nbextensions/vpython_libraries/glow.min",
-        "nbextensions/vpython_libraries/jquery-ui.custom.min"], function(Plotly) {
+        "nbextensions/vpython_libraries/jquery-ui.custom.min"], function(utils, Plotly) {
 
 var comm
 var ws = null
@@ -20,11 +21,30 @@ IPython.notebook.kernel.comm_manager.register_target('glow',
         comm.on_close(function(msg) {console.log("glow comm channel closed")});
 
         if (msg.content.data.wsport !== undefined) {
-            // create websocket instance
-		    var port = msg.content.data.wsport
-		    var uri = msg.content.data.wsuri
-            ws = new WebSocket("ws://localhost:" + port + uri);
-	        ws.binaryType = "arraybuffer";
+           // create websocket instance
+           var port = msg.content.data.wsport
+           var uri = msg.content.data.wsuri
+           var loc = document.location, new_uri, url;
+		
+           // Get base URL of current notebook server
+           var base_url = utils.get_body_data('baseUrl');
+           // Construct URL of our proxied service
+           var service_url = base_url + 'proxy/' + port + uri;
+
+           if (loc.protocol === "https:") {
+              new_uri = "wss:";
+           } else {
+              new_uri = "ws:";
+           }
+           if (document.location.hostname.includes("localhost")){
+              url = "ws://localhost:" + port + uri;
+           }
+           else {
+              new_uri += '//' + document.location.host + service_url;
+              url = new_uri
+           }
+           ws = new WebSocket(url);
+           ws.binaryType = "arraybuffer";
 
             // Handle incoming websocket message callback
             ws.onmessage = function(evt) {
@@ -992,4 +1012,4 @@ function handle_attrs(dattrs) {
 }
 console.log("END OF GLOWCOMM")
 
-});
+});