Web Sockets

Clone the code or follow along in the online editor.

We are going to make a simple chat app. There will be a text field so you can type things in and a region that shows all the messages we have received so far. Web sockets are great for this scenario because they let us set up a persistent connection with the server. This means:

  1. You can send messages cheaply whenever you want.
  2. The server can send you messages whenever it feels like it.

In other words, WebSocket is one of the rare libraries that makes use of both commands and subscriptions.

This program happens to be pretty short, so here is the full thing:

  1. import Html exposing (..)
  2. import Html.Attributes exposing (..)
  3. import Html.Events exposing (..)
  4. import WebSocket
  7. main =
  8.   Html.program
  9.     { init = init
  10.     , view = view
  11.     , update = update
  12.     , subscriptions = subscriptions
  13.     }
  16. -- MODEL
  18. type alias Model =
  19.   { input : String
  20.   , messages : List String
  21.   }
  24. init : (Model, Cmd Msg)
  25. init =
  26.   (Model "" [], Cmd.none)
  29. -- UPDATE
  31. type Msg
  32.   = Input String
  33.   | Send
  34.   | NewMessage String
  37. update : Msg -> Model -> (Model, Cmd Msg)
  38. update msg {input, messages} =
  39.   case msg of
  40.     Input newInput ->
  41.       (Model newInput messages, Cmd.none)
  43.     Send ->
  44.       (Model "" messages, WebSocket.send "ws://echo.websocket.org" input)
  46.     NewMessage str ->
  47.       (Model input (str :: messages), Cmd.none)
  50. -- SUBSCRIPTIONS
  52. subscriptions : Model -> Sub Msg
  53. subscriptions model =
  54.   WebSocket.listen "ws://echo.websocket.org" NewMessage
  57. -- VIEW
  59. view : Model -> Html Msg
  60. view model =
  61.   div []
  62.     [ div [] (List.map viewMessage model.messages)
  63.     , input [onInput Input] []
  64.     , button [onClick Send] [text "Send"]
  65.     ]
  68. viewMessage : String -> Html msg
  69. viewMessage msg =
  70.   div [] [ text msg ]

The interesting parts are probably the uses of WebSocket.send and WebSocket.listen.

For simplicity we will target a simple server that just echos back whatever you type. So you will not be able to have the most exciting conversations in the basic version, but that is why we have exercises on these examples!