एल्म - सदस्यता

पिछले अध्याय में, हमने चर्चा की कि एक दृश्य कमांड का उपयोग करते हुए अन्य घटकों के साथ बातचीत करता है। इसी तरह, एक घटक (उदाहरण के लिए WebSocket) सदस्यता का उपयोग कर एक दृश्य से बात कर सकता है। सदस्यता एक ऐसा तरीका है जिससे एल्म एप्लिकेशन को कीबोर्ड ईवेंट, टाइमर इवेंट और वेबसॉकेट इवेंट जैसे बाहरी इनपुट प्राप्त हो सकते हैं।

निम्नलिखित आंकड़ा एक एल्म आवेदन में सदस्यता की भूमिका की व्याख्या करता है। उपयोगकर्ता संदेशों के माध्यम से एल्म एप्लिकेशन के साथ सहभागिता करता है। दिए गए एप्लिकेशन WebSocket का उपयोग करता है और इसके संचालन के दो तरीके हैं -

क्लाइंट-साइड डेटा को कमांड के माध्यम से सॉकेट सर्वर पर भेजें
सदस्यता के माध्यम से सॉकेट सर्वर से कभी भी डेटा प्राप्त करें

वाक्य - विन्यास

सदस्यता को परिभाषित करने का सिंटैक्स नीचे दिया गया है -

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 : 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)

अनु क्रमांक।	तरीका	हस्ताक्षर	विवरण
1	WebSocket.listen	सुनो: स्ट्रिंग -> (स्ट्रिंग -> संदेश) -> उप संदेश	किसी वेबसैट पर आने वाले किसी भी संदेश की सदस्यता।
2	WebSocket.send	भेजें: स्ट्रिंग -> स्ट्रिंग -> सीएमडी संदेश	एक सर्वर पते के लिए एक wss अनुरोध भेजता है। यह महत्वपूर्ण है कि आप सुनने के साथ इस पते पर भी सदस्यता लें। यदि आप नहीं हैं, तो एक संदेश भेजने और फिर बंद करने के लिए वेब सॉकेट बनाया जाएगा।

अंशदान

सदस्यता फ़ंक्शन मॉडल ऑब्जेक्ट में लेता है। WebSocket सर्वर से संदेश प्राप्त करने के लिए, हम NewMessage के रूप में संदेश में गुजर रहे WebSocket.listen को कॉल करते हैं । जब सर्वर से एक नया संदेश आता है, तो अपडेट विधि कहा जाता है।

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

मुख्य

मुख्य कार्य एल्म आवेदन के लिए प्रवेश बिंदु है जैसा कि नीचे दिखाया गया है।

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

यह सब एक साथ डालें

Step 1 - एक डायरेक्टरी, SubscriptionApp बनाएं और उसमें एक फाइल, SubscriptionDemo.elm डालें।

Step 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 ]

Step 3 - एल्म पैकेज मैनेजर का उपयोग करके वेबसोकेट पैकेज स्थापित करें।

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

Step 4 नीचे दिए गए अनुसार index.html फ़ाइल बनाएँ और जनरेट करें।

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

Step 5 - निष्पादन के बाद, निम्न आउटपुट उत्पन्न होगा -