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!