Chat.elm

import Dom
import Dom.Scroll
import Html exposing (..)
import Html.App as App
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Process
import Task
import WebSocket



main =
  App.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }


echoServer : String
echoServer =
  "wss://echo.websocket.org"



-- MODEL


type alias Model =
  { input : String
  , messages : List String
  }


init : (Model, Cmd Msg)
init =
  (Model "" [], Cmd.none)



-- UPDATE


type Msg
  = NoOp
  | Input String
  | Send
  | NewMessage String


update : Msg -> Model -> (Model, Cmd Msg)
update msg ({input, messages} as model) =
  case msg of
    NoOp ->
      model ! []

    Input newInput ->
      Model newInput messages
        ! []

    Send ->
      Model "" messages
        ! [ Task.perform (always NoOp) (always NoOp) (Dom.focus "word-hole")
          , WebSocket.send echoServer input
          ]

    NewMessage str ->
      Model input (str :: messages)
        ! [ Task.perform (always NoOp) (always NoOp) (Dom.Scroll.toBottom "words")
          ]



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  WebSocket.listen echoServer NewMessage



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ input [id "word-hole", onInput Input, value model.input] []
    , button [onClick Send] [text "Send"]
    , div
        [ id "words"
        , style
            [ ("height", "100px")
            , ("width", "300px")
            , ("padding", "10px")
            , ("background", "#ccc")
            , ("overflow-y", "scroll")
            ]
        ]
        (List.map viewMessage (List.reverse model.messages))
    ]


viewMessage : String -> Html msg
viewMessage msg =
  div [] [ text msg ]

elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.5 <= v < 5.0.0",
        "elm-lang/dom": "1.1.0 <= v < 2.0.0",
        "elm-lang/html": "1.1.0 <= v < 2.0.0",
        "elm-lang/websocket": "1.0.1 <= v < 2.0.0"
    },
    "elm-version": "0.17.1 <= v < 0.18.0"
}