Client talking to server

2 files changed, 31 insertions, 6 deletions

diff --git a/client/index.html b/client/index.html
index 3803738..75ee56d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -9,6 +9,17 @@
     <script type="text/JavaScript" src="/assets/client.js"></script>
     <script>
       var app = Elm.Client.init({node: document.querySelector("main")});
+
+      var roomId = document.location.pathname.split("/")[2];
+      var url = "ws://" + document.location.host +
+        "/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>
diff --git a/client/src/Client.elm b/client/src/Client.elm
index cc144e2..f4247f7 100644
--- a/client/src/Client.elm
+++ b/client/src/Client.elm
@@ -1,11 +1,16 @@
-module Client exposing (main)
+port module Client exposing (main)
 
 import Browser
 import Html exposing (Html)
 import Url exposing (Url)
 
-type Message
+port webSocketIn : (String -> msg) -> Sub msg
+port webSocketOut : String -> Cmd msg
+
+type Msg
     = Ignore
+    | Send
+    | WebSocketIn String
 
 type Model
     = Error String
@@ -18,7 +23,7 @@ parseRoomId url = case String.split "/" url.path of
     _ :: "rooms" :: roomId :: _ -> Ok roomId
     _ -> Err <| "Invalid path: " ++ url.path
 
-view : Model -> List (Html Message)
+view : Model -> List (Html Msg)
 view model = case model of
     Error str ->
         [ Html.h1 [] [Html.text "Error"]
@@ -28,13 +33,22 @@ view model = case model of
         [ Html.h1 [] [Html.text <| "Room " ++ room.id]
         ]
 
-main : Program () Model Message
+subscriptions : Model -> Sub Msg
+subscriptions model = webSocketIn WebSocketIn
+
+update : Msg -> Model -> (Model, Cmd Msg)
+update msg model = case msg of
+    Ignore -> (model, Cmd.none)
+    Send -> (model, webSocketOut "Hi")
+    WebSocketIn str -> Debug.log str (model, Cmd.none)
+
+main : Program () Model Msg
 main = Browser.application
     { init = \() url key -> case parseRoomId url of
         Err str -> (Error <| "Could not parse room ID: " ++ str, Cmd.none)
         Ok roomId -> (JoinRoom {id = roomId}, Cmd.none)
-    , update = \_ model -> (model, Cmd.none)
-    , subscriptions = \_ -> Sub.none
+    , update = update
+    , subscriptions = subscriptions
     , view = \model -> {title = "Client", body = view model}
     , onUrlChange = \url -> Ignore
     , onUrlRequest = \urlRequest -> Ignore