final-app.elm

module App exposing
  ( Model
  , defaultModel
  , view
  , update
  , subscriptions
  )

import Html exposing (Html)
import Html.Attributes as Attr
import Html.Events as Event
import WebSocket
import Json.Decode as Json

type Msg
  = WebSocketMessage String
  | SendMessage
  | MessageUpdate String

type alias Model =
  { items : List String
  , message : String
  }

defaultModel : Model
defaultModel =
  { items = []
  , message = ""
  }

view : Model -> Html Msg
view model =
  Html.div []
    [ Html.input [ Attr.id "message-field", Event.onInput MessageUpdate ] []
    , Html.button [ Attr.id "send-button", Event.onClick SendMessage ] []
    , Html.ul [ Attr.id "items" ] <| List.map renderItem model.items
    ]

renderItem : String -> Html Msg
renderItem text =
  Html.li []
    [ Html.text text ]

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    MessageUpdate message ->
      ( { model | message = message }, Cmd.none )
    SendMessage ->
      ( model, WebSocket.send "ws://testserver.com" model.message )
    WebSocketMessage wsMessage ->
      ( { model | items = parseItems wsMessage }, Cmd.none )

parseItems : String -> List String
parseItems json =
  Json.decodeString (Json.list Json.string) json
    |> Result.withDefault []

subscriptions : Model -> Sub Msg
subscriptions model =
  WebSocket.listen "ws://testserver.com" WebSocketMessage