<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Client</title> <link rel="stylesheet" type="text/css" href="$CAFP_BASE/assets/style.css"> </head> <body> <div id="main"></div> <script type="text/JavaScript" src="$CAFP_BASE/assets/client.js"></script> <script> var app = Elm.Client.init({node: document.querySelector("main")}); var protocol = "ws:"; if(document.location.protocol == "https:") { protocol = "wss:" } var path = document.location.pathname; if(path.startsWith("$CAFP_BASE")) { path = path.substr("$CAFP_BASE".length); } var roomId = path.split("/")[2]; var url = protocol + "//" + document.location.host + "$CAFP_BASE/rooms/" + roomId + "/events"; var socket = new WebSocket(url); app.ports.webSocketOut.subscribe(function(message) { socket.send(message); }); socket.addEventListener("message", function(event) { app.ports.webSocketIn.send(event.data); }); </script> </body> </html>