エルム-サブスクリプション

前の章で、ビューがコマンドを使用して他のコンポーネントと対話することについて説明しました。同様に、コンポーネント（E.g. WebSocket）は、サブスクリプションを使用してビューと通信できます。サブスクリプションは、Elmアプリケーションがキーボードイベント、タイマーイベント、WebSocketイベントなどの外部入力を受信できる方法です。

次の図は、Elmアプリケーションでのサブスクリプションの役割を説明しています。ユーザーは、メッセージを介してElmアプリケーションと対話します。指定されたアプリケーションはWebSocketを使用し、2つの操作モードがあります-

コマンドを使用してクライアント側のデータをソケットサーバーに送信する
サブスクリプション経由でソケットサーバーからいつでもデータを受信する

ソケットサーバー

構文

サブスクリプションを定義するための構文は以下のとおりです-

type Sub msg

図

簡単な例を使用してサブスクリプションを理解しましょう。

以下の例では、アプリケーションはサーバーにメッセージを送信します。サーバーはエコーサーバーで、同じメッセージでクライアントに応答します。すべての受信メッセージは、後でリストに表示されます。 WebSocket（wssプロトコル）を使用して、サーバーからのメッセージを継続的にリッスンできるようにします。 WebSocketはコマンドを使用してサーバーにユーザー入力を送信し、サブスクリプションを使用してサーバーからメッセージを受信します。

アプリケーションのさまざまなコンポーネントを以下に示します-

エコーサーバー

エコーサーバーには、wssプロトコルを使用してアクセスできます。エコーサーバーは、ユーザー入力をアプリケーションに送り返します。エコーサーバーを定義するためのコードは次のとおりです-

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

モデル

モデルは、ユーザー入力と、ソケットサーバーからの着信メッセージのリストを表します。モデルを定義するためのコードは以下のとおりです-

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

メッセージ

メッセージタイプには、ユーザーからテキスト入力を取得するための入力が含まれます。ユーザーがボタンをクリックしてWebSocketサーバーにメッセージを送信すると、送信メッセージが生成されます。 NewMessageは、エコーサーバーからメッセージが到着したときに使用されます。

type Msg
   = Input String
   | Send
   | NewMessage String

View

アプリケーションのビューには、ユーザー入力をサーバーに送信するためのテキストボックスと送信ボタンが含まれています。サーバーからの応答は、_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 ]

更新

更新機能は、メッセージとモデルコンポーネントを受け取ります。メッセージタイプに基づいてモデルを更新します。

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)

Sr. No.	Method	Signature	Description
1	WebSocket.listen	listen : String → (String → msg) → Sub msg	Subscribes to any incoming messages on a websocket.
2	WebSocket.send	send : String → String → Cmd msg	Sends a wss request to a server address. It is important that you are also subscribed to this address with listen. If you are not, the web socket will be created to send one message and then closed.

サブスクリプション関数は、モデルオブジェクトを受け取ります。 WebSocketサーバーからメッセージを受信するには、_WebSocket.listen_を呼び出して、メッセージを_NewMessage_として渡します。サーバーから新しいメッセージが届くと、updateメソッドが呼び出されます。

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

main

主な機能は、次に示すようにelmアプリケーションへのエントリポイントです。

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

すべてを一緒に入れて

ステップ1 *-ディレクトリSubscriptionAppを作成し、ファイルSubscriptionDemo.elmを追加します。

ステップ2 *-次の内容を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 ]

ステップ3 *-elmパッケージマネージャーを使用してwebsocketsパッケージをインストールします。

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

ステップ4 *-以下に示すように、indexlファイルをビルドして生成します。

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

ステップ5 *-実行すると、次の出力が生成されます-

SubscriptionApp

Elm-subscriptions

目次