Elm - Suscripciones

En el capítulo anterior, discutimos que una Vista interactúa con otros componentes usando Comandos. Del mismo modo, un componente (por ejemplo, WebSocket) puede comunicarse con una vista mediante suscripciones. Las suscripciones son una forma en que una aplicación Elm puede recibir entradas externas como eventos de teclado, eventos de temporizador y eventos de WebSocket.

La siguiente figura explica la función de las suscripciones en una aplicación de Elm. El usuario interactúa con una aplicación de Elm a través de mensajes. La aplicación dada usa WebSocket y tiene dos modos de operación:

Enviar datos del lado del cliente al servidor de socket a través de Command
Reciba datos en cualquier momento desde el servidor de socket mediante suscripción

Sintaxis

La sintaxis para definir una suscripción se da a continuación:

type Sub msg

Ilustración

Entendamos las suscripciones con un ejemplo sencillo.

En el ejemplo que se muestra a continuación, la aplicación envía un mensaje al servidor. El servidor es un servidor de eco, que responde al cliente con el mismo mensaje. Todos los mensajes entrantes se muestran más tarde en una lista. Usaremos WebSocket (protocolo wss) para poder escuchar continuamente los mensajes del servidor. WebSocket enviará la entrada del usuario al servidor mediante comandos, mientras que utilizará la suscripción para recibir mensajes del servidor.

Los diversos componentes de la aplicación se dan a continuación:

Servidor de eco

Se puede acceder al servidor de eco utilizando el protocolo wss. El servidor de eco devuelve la entrada del usuario a la aplicación. El código para definir un servidor de eco se proporciona a continuación:

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

Modelo

El modelo representa la entrada del usuario y una lista de mensajes entrantes del servidor de socket. El código para definir el modelo es el siguiente:

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

Mensajes

El tipo de mensaje contendrá Entrada para tomar la entrada de texto del usuario. El mensaje Enviar se generará cuando el usuario haga clic en el botón para enviar el mensaje al servidor WebSocket. El NewMessage se utiliza cuando llega un mensaje del servidor de eco.

type Msg
   = Input String
   | Send
   | NewMessage String

Ver

La vista de la aplicación contiene un cuadro de texto y un botón de envío para enviar la entrada del usuario al servidor. La respuesta del servidor se muestra en la Vista usando una etiqueta div .

view : Model -> Html Msg
view model =
   div []
      [ input [onInput Input, value model.input] []
      , button [onClick Send] [text "Send"]
      , div [] (List.map viewMessage (List.reverse model.messages))
      ]

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

Actualizar

La función de actualización toma el mensaje y los componentes del modelo. Actualiza el modelo según el tipo de mensaje.

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
   case msg of
      Input newInput ->
         (Model newInput messages, Cmd.none)

   Send ->
      (Model "" messages, WebSocket.send echoServer input)

   NewMessage str ->
      (Model input (str :: messages), Cmd.none)

No Señor.	Método	Firma	Descripción
1	WebSocket.listen	escuchar: Cadena -> (Cadena -> msg) -> Sub msg	Se suscribe a cualquier mensaje entrante en un websocket.
2	WebSocket.send	enviar: Cadena -> Cadena -> Cmd msg	Envía una solicitud wss a una dirección de servidor. Es importante que también estés suscrito a esta dirección con listen. Si no es así, se creará el conector web para enviar un mensaje y luego se cerrará.

Suscripción

La función de suscripción incluye el objeto modelo. Para recibir los mensajes del servidor WebSocket, llamamos WebSocket.listen pasando el mensaje como NewMessage . Cuando llega un mensaje nuevo del servidor, se llama al método de actualización.

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

principal

La función principal es el punto de entrada a la aplicación elm como se muestra a continuación.

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

Poniendolo todo junto

Step 1 - Cree un directorio, SubscriptionApp y agregue un archivo, SubscriptionDemo.elm.

Step 2 - Agregue el siguiente contenido al archivo SubscriptionDemo.elm -

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import WebSocket

main =
   Html.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
   = Input String
   | Send
   | NewMessage String

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
   case msg of
      Input newInput ->
      (Model newInput messages, Cmd.none)

   Send ->
      (Model "" messages, WebSocket.send echoServer input)

   NewMessage str ->
      (Model input (str :: messages), Cmd.none)

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

-- VIEW
view : Model -> Html Msg
view model =
   div []
      [ input [onInput Input, value model.input] []
      , button [onClick Send] [text "Send"]
      , div [] (List.map viewMessage (List.reverse model.messages))
      ]

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

Step 3 - Instale el paquete websockets usando elm package manager.

C:\Users\dell\elm\SubscriptionApp> elm-package install elm-lang/websocket

Step 4 - Construya y genere el archivo index.html como se muestra a continuación.

C:\Users\dell\elm\SubscriptionApp> elm make .\SubscriptionDemo.elm

Step 5 - Tras la ejecución, se generará la siguiente salida -

↰ Previous page