kageurufu/websockets

A fairly ergonomic elm websockets implementation.

See example/ for a simple Websocket chat demo

Getting started

Reference ports.websocket.js in your html (For deployment, you copy this somewhere into your application).

<script src="//raw.githubusercontent.com/kageurufu/elm-websockets/master/dist/ports.websocket.js"></script>
<script>
  var app = Elm.Main.init();
  initWebsockets(app);
</script>

Define the two necessary ports

-- src/Ports.elm
port module Ports exposing (socket)

import Websockets


port webSocketCommand : Websockets.CommandPort msg


port webSocketEvent : Websockets.EventPort msg

Then get your Command and Event methods

socket : Websockets.Methods msg
socket =
    Websockets.withPorts
        { command = webSocketCommand
        , event = webSocketEvent
        }

Define your messages and subscriptions

type Msg
    = -- ...
    | SocketOpened Websockets.WebsocketOpened
    | SocketMessage Websockets.WebsocketMessage
    | SocketClosed Websockets.WebsocketClosed
    | SocketError Websockets.WebsocketError
    | NoOp

subscriptions model =
    socket.onEvent
        { onOpened = SocketOpened
        , onClosed = SocketClosed
        , onError = SocketError
        , onMessage = SocketMessage
        , onDecodeError = always NoOp
        }

And start using Websockets!

encodeMessage = Encode.string
decodeMessage = Decode.decodeString Decode.String

init flags =
    ({ messages : List String }
    , socket.open "chat" "wss://my-socket-url/ws" [("metadata","chat")])

update msg model =
    case msg of
        SocketOpened { name } ->
            (model, socket.send name (encodeMessage "I opened a socket!"))
        SocketMessage { name, data } ->
            case decodeMessage of
                Ok message ->
                    ( { model | messages = model.messages ++ [message] }
                    , Cmd.none
                    )
        -- ...