choonkeat / elm-webapp / Webapp.Client

The README is better for getting an understanding and for getting started. In general we'd just use the code generated by elm-webapp cli without the need to reference here.

Definition


type alias Ports msg =
{ websocketConnected : (Basics.Int -> FrameworkMsg msg) -> Platform.Sub.Sub (FrameworkMsg msg)
, websocketIn : (String -> FrameworkMsg msg) -> Platform.Sub.Sub (FrameworkMsg msg) 
}

Hook up ports to use websockets for passing serverMsg and clientMsg

websocketConnected port receives an Int for time now in milliseconds. Currently Webapp.Client does not use this information for anything.

websocketIn port receives the raw string from websocket event.data which will be parsed as a Result x serverMsg (see sendToServer)


type alias Protocol serverMsg clientMsg model msg x =
{ updateFromServer : serverMsg -> model -> ( model
, Platform.Cmd.Cmd msg )
, clientMsgEncoder : clientMsg -> Json.Encode.Value
, serverMsgDecoder : Json.Decode.Decoder serverMsg
, errorDecoder : Json.Decode.Decoder x
, httpEndpoint : String 
}

A set of required protocols.

- `updateFromServer` is called when `serverMsg` is received, e.g. as response of `sendToServer`
- `clientMsgEncoder` encodes outgoing `clientMsg`, e.g. via `sendToServer`
- `serverMsgDecoder` decodes replies from Server
- `errorDecoder` decodes error replies from Server


type alias Program flags model msg =
Platform.Program flags model (FrameworkMsg msg)

Exported type to enable apps to write their type signature of main, e.g.

main : Webapp.Client.Program Flags Model Msg
main =
    webapp.element

Common Helpers

element : { element : { init : flags -> ( model, Platform.Cmd.Cmd msg ), view : model -> Html msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg }, ports : Ports msg, protocol : Protocol serverMsg clientMsg model msg x } -> { element : Platform.Program flags model (FrameworkMsg msg), sendToServer : clientMsg -> Platform.Task Http.Error (Result x serverMsg) }

Returns a Browser.element to use as main in your client app and a sendToServer function to send clientMsg with

main =
    webapp.element

document : { document : { init : flags -> ( model, Platform.Cmd.Cmd msg ), view : model -> Browser.Document msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg }, ports : Ports msg, protocol : Protocol serverMsg clientMsg model msg x } -> { document : Platform.Program flags model (FrameworkMsg msg), sendToServer : clientMsg -> Platform.Task Http.Error (Result x serverMsg) }

Returns a Browser.document to use as main in your client app and a sendToServer function to send clientMsg with

main =
    webapp.document

application : { application : { init : flags -> Url -> Browser.Navigation.Key -> ( model, Platform.Cmd.Cmd msg ), view : model -> Browser.Document msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, onUrlRequest : Browser.UrlRequest -> msg, onUrlChange : Url -> msg }, ports : Ports msg, protocol : Protocol serverMsg clientMsg model msg x } -> { application : Platform.Program flags model (FrameworkMsg msg), sendToServer : clientMsg -> Platform.Task Http.Error (Result x serverMsg) }

Returns a Browser.application to use as main in your client app and a sendToServer function to send clientMsg with

main =
    webapp.application