backend/src/landing.rs

@@ -8,7 +8,7 @@ pub enum DownMsg {
 }
 
 
-#[derive(Serialize)]
+#[derive(Deserialize)]
 pub enum UpMsg {
     RequestGreet(String)
 }

backend/src/main.rs

@@ -14,6 +14,11 @@ enum DownMsg {
     Landing(landing::DownMsg),
 }
 
+#[derive(Deserialize)]
+enum UpMsg {
+    Landing(landing::UpMsg),
+}
+
 /// WebSocket actor
 struct MyWebSocket;
 
@@ -39,12 +44,31 @@ impl StreamHandler<Result<ws::Message, ws::ProtocolError>> for MyWebSocket {
         msg: Result<ws::Message, ws::ProtocolError>,
         ctx: &mut ws::WebsocketContext<Self>,
     ) {
-        if let Ok(ws::Message::Ping(msg)) = msg {
+        match msg {
-            ctx.pong(&msg);
+            Ok(ws::Message::Text(text)) => {
+                // Attempt to decode the incoming message
+                if let Ok(up_msg) = serde_json::from_str::<UpMsg>(&text) {
+                    match up_msg {
+                        UpMsg::Landing(landing::UpMsg::RequestGreet(name)) => {
+                            let greeting = format!("Hello, {}!", name);
+                            let response = DownMsg::Landing(landing::DownMsg::Greeting(greeting));
+
+                            if let Ok(json_response) = serde_json::to_string(&response) {
+                                ctx.text(json_response);
+                            }
+                        }
+                    }
+                }
+            }
+            Ok(ws::Message::Ping(msg)) => {
+                ctx.pong(&msg);
+            }
+            _ => {}
         }
     }
 }
 
+
 async fn websocket_handler(req: HttpRequest, stream: web::Payload) -> Result<HttpResponse, Error> {
     ws::start(MyWebSocket {}, &req, stream)
 }

frontend/src/Page/Landing.elm

@@ -17,7 +17,8 @@ import Element.Background
 
 type alias Model = {
     time : String,
-    greetWidgetText : String
+    greetWidgetText : String,
+    greeting : String
     }
 type DownMsgLanding
     = Greeting String
@@ -25,14 +26,20 @@ type DownMsgLanding
 
 decodeDownMsgLanding : Decode.Decoder DownMsgLanding
 decodeDownMsgLanding =
-    Decode.oneOf
+    let
-        [ Decode.map Greeting (Decode.field "Greeting" Decode.string)
+        t = Decode.map Greeting (Decode.field "Greeting" Decode.string)
-        , Decode.map TimeUpdate (Decode.field "TimeUpdate" Decode.string)
+    in
-        ]
+        Decode.oneOf
+            [ Decode.map Greeting (Decode.field "Greeting" Decode.string)
+            , Decode.map TimeUpdate (Decode.field "TimeUpdate" Decode.string)
+            ]
 
 decodeDownMsg : Decode.Decoder Msg
 decodeDownMsg =
-    Decode.map DownMsg decodeDownMsgLanding
+    let
+        decoder = Decode.field "Landing" decodeDownMsgLanding
+    in
+        Decode.map DownMsg decoder
 
 type UpMsgLanding = RequestGreet String
 
@@ -41,7 +48,10 @@ encodeUpMsgLanding msg =
     case msg of
         RequestGreet name ->
             Encode.object
-                [ ( "RequestGreet", Encode.string name ) ]
+                [ ( "Landing", Encode.object
+                    [ ( "RequestGreet", Encode.string name ) ]
+                  )
+                ]
 
 type Msg
     = DownMsg DownMsgLanding
@@ -53,7 +63,8 @@ type Msg
 init : () -> Model
 init flags = {
     time = "time not yet set",
-    greetWidgetText = ""
+    greetWidgetText = "",
+    greeting = ""
     }
 
 subscriptions : Model -> Sub Msg
@@ -75,35 +86,48 @@ update : Msg -> Model -> (Model, Cmd Msg)
 update msg model =
     case msg of
         DownMsg (TimeUpdate time) -> ( {model | time = time}, Cmd.none )
+        DownMsg (Greeting greeting) -> ( {model | greeting = greeting}, Cmd.none)
+        UpMsg upMsgLanding -> (
+            model, 
+            upMsgLanding |> encodeUpMsgLanding |> Ports.socketSend
+            )
         GreetWidgetText text -> ( {model | greetWidgetText = text}, Cmd.none )
         _ -> (model, Cmd.none)
 
 greetWidget : Model -> Element Msg
 greetWidget model =
     let
-        idleBlue = Element.Background.color     <| Element.rgb255 18 147 217
+        idleBlue = Element.rgb255 18 147 217
-        focusBlue = Element.Background.color    <| Element.rgb255 18 125 184
+        focusBlue = Element.rgb255 18 125 184
 
         myButton = Element.Input.button
-            [ idleBlue
+            [ Element.Background.color idleBlue
-            , Element.focused [ focusBlue ]
+            , Element.mouseOver [Element.Background.color focusBlue]
+            , Element.width (Element.fill |> Element.maximum 100)
+            , Element.height (Element.fill |> Element.maximum 50)
             ]
-            { onPress = Just <| DownMsg <| Greeting model.greetWidgetText
+            { onPress = Just <| UpMsg <| RequestGreet model.greetWidgetText
-            , label = Element.text "My Button"
+            , label = Element.text "Greet"
             }
         placeholder  = case model.greetWidgetText of
             "" -> Just <| Element.Input.placeholder [] <| Element.text "Type Your Name"
             _ -> Just <| Element.Input.placeholder [] <| Element.text ""
         textInput =
-            Element.Input.text []
+            Element.Input.text 
+            [ Element.width (Element.fill |> Element.maximum 400)
+            , Element.height Element.fill 
+            ]
                 { onChange = GreetWidgetText
                 , text = model.greetWidgetText
                 , placeholder = placeholder
-                , label = Element.Input.labelHidden "Greet"
+                , label = Element.Input.labelHidden "Enter your name"
                 }
+        nameInput = Element.row [] [ textInput , myButton]
     in
-        Element.row []
+        Element.column []
-            [ textInput ]
+            [ nameInput 
+            , Element.text model.greeting
+            ]
 
 view : Model -> Element Msg
 view model =