From f974ff86ac15f89195bbfcd64ec3f0a1b3641b57 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Fri, 1 May 2020 01:19:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=A6=20Fix=20WebSocket=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/client.js           | 34 ++++++++++++++--------------------
 assets/editor.js           | 23 ++++++++++-------------
 sample/ui.jl               | 11 +++++------
 src/webserver/WebServer.jl | 20 ++++++++++++++------
 4 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/assets/client.js b/assets/client.js
index fccac71685..166d72074f 100644
--- a/assets/client.js
+++ b/assets/client.js
@@ -80,17 +80,7 @@ class PlutoConnection {
     }
     
     handleMessage(event) {
-        
-        var onFailure = (e) => {
-            console.warn("Failed to get updates!")
-            console.log(e)
-    
-            this.waitForOnline()
-        }
-    
-        try {
-            const update = JSON.parse(event.data)
-    
+        event.data.text().then((msg) => JSON.parse(msg)).then((update) => {
             const forMe = !(("notebookID" in update) && (update.notebookID != this.notebookID))
             if (!forMe) {
                 console.log("Update message not meant for this notebook")
@@ -109,9 +99,12 @@ class PlutoConnection {
             }
 
             this.onUpdate(update, byMe)
-        } catch (error) {
-            onFailure(error)
-        }
+        }).catch((ex) => {
+            console.error("Failed to get updates!", ex)
+            console.log(event)
+    
+            this.waitForOnline()
+        })
     }
     
     startSocketConnection(onSucces) {
@@ -120,8 +113,7 @@ class PlutoConnection {
             this.handleMessage(e)
         }
         this.psocket.onerror = (e) => {
-            console.error("SOCKET ERROR")
-            console.log(e)
+            console.error("SOCKET ERROR", e)
     
             if (this.psocket.readyState != WebSocket.OPEN && this.psocket.readyState != WebSocket.CONNECTING) {
                 this.waitForOnline()
@@ -139,7 +131,6 @@ class PlutoConnection {
             console.log(e)
     
             this.waitForOnline()
-            // startSocketConnection(onSucces)
         }
         this.psocket.onopen = () => {
             this.sendreceive("connect", {}).then(u => {
@@ -157,7 +148,7 @@ class PlutoConnection {
     }
     
     tryCloseSocketConnection() {
-        this.psocket.close()
+        this.psocket.close(1000, "byebye")
     }
 
     initialize(){
@@ -185,14 +176,17 @@ class PlutoConnection {
         this.clientID = this.getUniqueShortID()
         this.sentRequests = {}
 
-        window.addEventListener("unload", e => {
-            this.send("disconnect", {})
+        window.addEventListener("beforeunload", e => {
+            //this.send("disconnect", {})
+            this.psocket.onclose = undefined
+            this.tryCloseSocketConnection()
         })
     }
 
     fetchPlutoVersions(){
         const githubPromise = fetch("https://api.github.com/repos/fonsp/Pluto.jl/releases", {
             method: 'GET',
+            mode: 'cors',
             cache: 'no-cache',
             headers: {
                 'Content-Type': 'application/json',
diff --git a/assets/editor.js b/assets/editor.js
index d93ccd1fa6..8a19b2ffe3 100644
--- a/assets/editor.js
+++ b/assets/editor.js
@@ -194,25 +194,22 @@ document.addEventListener("DOMContentLoaded", () => {
                 // based on https://stackoverflow.com/a/26716182
                 // to execute all scripts in the output html:
                 try {
-                    var scripts = Array.prototype.slice.call(outputNode.getElementsByTagName("script"))
-                    for (var i = 0; i < scripts.length; i++) {
-                        if (scripts[i].src != "") {
-                            if (!Array.prototype.map.call(document.head.querySelectorAll("script"), s => s.src).includes(scripts[i])) {
-                                var tag = document.createElement("script")
-                                tag.src = scripts[i].src
+                    Array.from(outputNode.querySelectorAll("script")).map((script) => {
+                        if (script.src != "") {
+                            if (!Array.from(document.head.querySelectorAll("script")).map(s => s.src).includes(script)) {
+                                const tag = document.createElement("script")
+                                tag.src = script.src
                                 document.head.appendChild(tag)
                             }
                         } else {
-                            var result = Function(scripts[i].innerHTML).bind(outputNode)()
-                            if (!scripts[i].previousElementSibling && !scripts[i].nextElementSibling) {
-                                if (result && result.nodeType === Node.ELEMENT_NODE) {
-                                    scripts[i].parentElement.insertBefore(result, scripts[i])
-                                }
+                            const result = Function(script.innerHTML).bind(outputNode)()
+                            if (result && result.nodeType === Node.ELEMENT_NODE) {
+                                script.parentElement.insertBefore(result, script)
                             }
                         }
-                    }
+                    })
                 } catch (err) {
-                    console.error("Couldn't execute all scripts:")
+                    console.error("Couldn't execute script:")
                     console.error(err)
                     // TODO: relay to user
                     // might be wise to wait after adding scripts to head
diff --git a/sample/ui.jl b/sample/ui.jl
index 51664c35e6..4d9bf3b3c9 100644
--- a/sample/ui.jl
+++ b/sample/ui.jl
@@ -87,17 +87,18 @@ Try drawing a rectangle in the canvas below 👇 and notice that the `area` vari
 
 # ╔═╡ 7f4b0e1e-7f16-11ea-02d3-7955921a70bd
 @bind dims html"""
-<canvas id="drawboard" width="200" height="200"></canvas>
+<canvas width="200" height="200" style="position: relative"></canvas>
 
 <script>
-const canvas = document.querySelector("canvas#drawboard")
+// 🐸 `this` is the cell output wrapper - we use it to select elements 🐸 //
+const canvas = this.querySelector("canvas")
 const ctx = canvas.getContext("2d")
 
 var startX = 80
 var startY = 40
 
 function onmove(e){
-	// 🐸 This is how we send the value back to Julia 🐸 //
+	// 🐸 We send the value back to Julia 🐸 //
 	canvas.value = [e.layerX - startX, e.layerY - startY]
 	canvas.dispatchEvent(new CustomEvent("input"))
 
@@ -108,6 +109,7 @@ function onmove(e){
 }
 
 canvas.onmousedown = e => {
+	console.log(e)
 	startX = e.layerX
 	startY = e.layerY
 	canvas.onmousemove = onmove
@@ -117,9 +119,6 @@ canvas.onmouseup = e => {
 	canvas.onmousemove = null
 }
 
-// To prevent this code block from showing and hiding
-canvas.onclick = e => e.stopPropagation()
-
 // Fire a fake mousemoveevent to show something
 onmove({layerX: 130, layerY: 160})
 
diff --git a/src/webserver/WebServer.jl b/src/webserver/WebServer.jl
index e23211cbf1..d654622969 100644
--- a/src/webserver/WebServer.jl
+++ b/src/webserver/WebServer.jl
@@ -71,7 +71,8 @@ function flushclient(client::Client)
         try
             if client.stream !== nothing
                 if isopen(client.stream)
-                    write(client.stream, serialize_message(next_to_send))
+                    client.stream.frame_type = HTTP.WebSockets.WS_BINARY
+                    write(client.stream, serialize_message(next_to_send) |> codeunits)
                 else
                     @info "Client $(client.id) stream closed."
                     put!(flushtoken, token)
@@ -117,7 +118,7 @@ const MSG_DELIM = "IUUQ.km jt ejggjdvmu vhi" # riddle me this, Julius
 This will start the static HTTP server and a WebSocket server. Pluto Notebooks will be started dynamically (by user input)."""
 function run(port = 1234, launchbrowser = false)
     serversocket = Sockets.listen(UInt16(port))
-    @async HTTP.serve(Sockets.localhost, UInt16(port), stream = true, server = serversocket) do http::HTTP.Stream
+    servertask = @async HTTP.serve(Sockets.localhost, UInt16(port), stream = true, server = serversocket) do http::HTTP.Stream
         # messy messy code so that we can use the websocket on the same port as the HTTP server
 
         if HTTP.WebSockets.is_upgrade(http.message)
@@ -134,6 +135,14 @@ function run(port = 1234, launchbrowser = false)
                                 # For some reason, long (>256*512 bytes) WS messages get split up - `readavailable` only gives the first 256*512 
                                 data = ""
                                 while !endswith(data, MSG_DELIM)
+                                    if(eof(clientstream))
+                                        if data == ""
+                                            return
+                                        end
+                                        @warn "Unexpected eof after" data
+                                        data = data * MSG_DELIM
+                                        break
+                                    end
                                     data = data * String(readavailable(clientstream))
                                 end
                                 JSON.parse(SubString(data, 1:(lastindex(data)-length(MSG_DELIM))))
@@ -186,9 +195,10 @@ function run(port = 1234, launchbrowser = false)
                 HTTP.startwrite(http)
                 write(http, request.response.body)
             catch e
-                if isa(e, HTTP.IOError) || isa(e, ArgumentError)
+                if isa(e, Base.IOError) || isa(e, ArgumentError)
                     @warn "Attempted to write to a closed stream at $(request.target)"
                 else
+                    @show e, typeof(e), fieldnames(e)
                     rethrow(e)
                 end
             end
@@ -205,9 +215,7 @@ function run(port = 1234, launchbrowser = false)
     
     # create blocking call:
     try
-        while true
-            sleep(typemax(UInt64))
-        end
+        wait(servertask)
     catch e
         if isa(e, InterruptException)
             println("\n\nClosing Pluto... Restart Julia for a fresh session. \n\nHave a nice day! 🎈")