Move from WS to SSE

hotreload.cpp

@@ -5,45 +5,34 @@ int main() {
     struct PerSocketData {
         /* Fill with user data */
     };
-    uWS::WebSocket<false, true> *global_ws = nullptr;
-    
+    uWS::HttpResponse<false> *global_res = nullptr;
+
     uWS::App()
-      .get("/", [&global_ws](auto *res, auto *req) {
-          if (global_ws != nullptr) {
-            global_ws->send("refresh", uWS::OpCode::TEXT);
-          }
-          res->end("");
-      })
-      .ws<PerSocketData>("/*", {
-        /* Settings */
-        .compression = uWS::SHARED_COMPRESSOR,
-        .maxPayloadLength = 16 * 1024,
-        .idleTimeout = 10,
-        .maxBackpressure = 1 * 1024 * 1024,
-        /* Handlers */
-        .open = [&global_ws](auto *ws) {
-            /* Open event here, you may access ws->getUserData() which points to a PerSocketData struct */
-            global_ws = ws;
-        },
-        .message = [](auto *ws, std::string_view message, uWS::OpCode opCode) {
-            // Echo
-            ws->send(message, opCode, true);
-        },
-        .drain = [](auto *ws) {
-            /* Check ws->getBufferedAmount() here */
-        },
-        .ping = [](auto *ws) {
-            /* Not implemented yet */
-        },
-        .pong = [](auto *ws) {
-            /* Not implemented yet */
-        },
-        .close = [&global_ws](auto *ws, int code, std::string_view message) {
-            global_ws = nullptr;
-        }
-    }).listen(9001, [](auto *token) {
-        if (token) {
-            std::cout << "Listening on port " << 9001 << std::endl;
-        }
-    }).run();
+        .get("/",
+             [ &global_res](auto *res, auto *req) {
+               std::cout << "here\n";
+               if (global_res != nullptr) {
+                 global_res->write("data: reload\n\n");
+               } else {
+               }
+               res->end("");
+             })
+        .get("/eventsource",
+             [&global_res](auto *res, auto *req) {
+               res->writeHeader("Content-Type", "text/event-stream");
+               res->writeHeader("Cache-Control", "no-cache");
+               res->writeHeader("Connection", "keep-alive");
+               res->writeHeader("Access-Control-Allow-Origin", "*");
+               global_res = res;
+               res->onAborted([&global_res]() {
+                   global_res = nullptr;
+                   });
+             })
+        .listen(9001,
+                [](auto *token) {
+                  if (token) {
+                    std::cout << "Listening on port " << 9001 << std::endl;
+                  }
+                })
+        .run();
 }

template/custom-dev.html

@@ -67,31 +67,24 @@ <h2 class="author">$author$</h2>
 </section>
 </body>
 <script>
-  var intervalId;
-  // Ping every 5s to keep this WS connection alive.
-  // Otherwise the browser will terminate this connection.
-  function keepalive(s) {
-    intervalId = setInterval(function() {
-      s.send("keepalive");
-    }, 5000);
-  }
-  var s = new WebSocket("ws://localhost:9001");
-  s.onopen = function(even) {
-    console.log("WebSocket connection open.");
-    keepalive(s);
-  };
-  s.onclose = function(even) {
-    console.log("WebSocket connection closed.");
-    clearInterval(intervalId);
-  };
-  s.onerror = function(event) {
-    console.error("WebSocket error observed:", event);
-    clearInterval(intervalId);
-  };
-  s.onmessage = function(event) {
-    if (event.data === "refresh") {
+  var source = new EventSource('http://localhost:9001/eventsource');
+
+  source.addEventListener('message', function(e) {
+    if (e.data === 'reload') {
       location.reload();
     }
-  };
+  }, false);
+
+  source.addEventListener('open', function(e) {
+    // Connection was opened.
+  }, false);
+
+  source.addEventListener('error', function(e) {
+    console.log(e);
+    console.log('close');
+    if (e.readyState == EventSource.CLOSED) {
+      // Connection was closed.
+    }
+  }, false);
 </script>
 </html>