Skip to content

Instantly share code, notes, and snippets.

@evancz evancz/Chat.elm
Created Aug 13, 2016

Embed
What would you like to do?
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 ]
{
"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"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.