Elm - การสมัครสมาชิก

ในบทที่แล้วเราได้พูดถึงว่า View โต้ตอบกับส่วนประกอบอื่น ๆ โดยใช้ Commands ในทำนองเดียวกันคอมโพเนนต์ (เช่น WebSocket) สามารถพูดคุยกับ View โดยใช้การสมัครสมาชิก การสมัครสมาชิกเป็นวิธีที่แอปพลิเคชัน Elm สามารถรับอินพุตภายนอกเช่นเหตุการณ์แป้นพิมพ์เหตุการณ์ตัวจับเวลาและเหตุการณ์ WebSocket

รูปต่อไปนี้อธิบายถึงบทบาทของการสมัครสมาชิกในแอปพลิเคชัน Elm ผู้ใช้โต้ตอบกับแอปพลิเคชัน Elm ผ่านข้อความ แอปพลิเคชันที่ให้มาใช้ WebSocket และมีโหมดการทำงานสองโหมด -

• ส่งข้อมูลฝั่งไคลเอ็นต์ไปยังเซิร์ฟเวอร์ซ็อกเก็ตผ่านคำสั่ง
• รับข้อมูลได้ตลอดเวลาจากเซิร์ฟเวอร์ซ็อกเก็ตผ่านการสมัครสมาชิก

ไวยากรณ์

ไวยากรณ์สำหรับการกำหนดการสมัครสมาชิกแสดงไว้ด้านล่าง -

type Sub msg

ภาพประกอบ

ให้เราเข้าใจการสมัครสมาชิกโดยใช้ตัวอย่างง่ายๆ

ในตัวอย่างที่ระบุด้านล่างแอปพลิเคชันจะส่งข้อความไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์เป็นเซิร์ฟเวอร์ echo ซึ่งตอบสนองต่อไคลเอ็นต์ด้วยข้อความเดียวกัน ข้อความขาเข้าทั้งหมดจะปรากฏในรายการในภายหลัง เราจะใช้ WebSocket (โปรโตคอล wss) เพื่อให้สามารถรับฟังข้อความจากเซิร์ฟเวอร์ได้อย่างต่อเนื่อง WebSocket จะส่งอินพุตของผู้ใช้ไปยังเซิร์ฟเวอร์โดยใช้คำสั่งในขณะที่ใช้การสมัครสมาชิกเพื่อรับข้อความจากเซิร์ฟเวอร์

ส่วนประกอบต่างๆของแอปพลิเคชันมีดังต่อไปนี้ -

เซิร์ฟเวอร์ Echo

เซิร์ฟเวอร์ echo สามารถเข้าถึงได้โดยใช้โปรโตคอล wss เซิร์ฟเวอร์ echo จะส่งอินพุตของผู้ใช้กลับไปยังแอ็พพลิเคชัน รหัสสำหรับกำหนดเซิร์ฟเวอร์ echo มีให้ด้านล่าง -

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

รุ่น

Model แสดงถึงอินพุตของผู้ใช้และรายการข้อความขาเข้าจากเซิร์ฟเวอร์ซ็อกเก็ต รหัสสำหรับการกำหนด Model มีดังต่อไปนี้ -

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

ข้อความ

ประเภทข้อความจะมีอินพุตสำหรับการป้อนข้อความจากผู้ใช้ ข้อความส่งจะถูกสร้างขึ้นเมื่อผู้ใช้คลิกปุ่มเพื่อส่งข้อความไปยังเซิร์ฟเวอร์ WebSocket NewMessage ถูกใช้เมื่อมีข้อความมาจากเซิร์ฟเวอร์ echo

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)

เลขที่	วิธี	ลายเซ็น	คำอธิบาย
1	WebSocket.listen	ฟัง: String -> (String -> msg) -> Sub msg	สมัครรับข้อความขาเข้าบน websocket
2	WebSocket.send	ส่ง: String -> String -> Cmd msg	ส่งคำขอ wss ไปยังที่อยู่เซิร์ฟเวอร์ สิ่งสำคัญคือคุณต้องสมัครรับข้อมูลที่อยู่นี้ด้วยฟัง หากคุณไม่เป็นเช่นนั้นเว็บซ็อกเก็ตจะถูกสร้างขึ้นเพื่อส่งข้อความเดียวแล้วปิด

การสมัครสมาชิก

ฟังก์ชั่นการสมัครใช้งานจะอยู่ในวัตถุโมเดล ที่จะได้รับข้อความจากเซิร์ฟเวอร์ WebSocket เราเรียกWebSocket.listenผ่านในข้อความเป็นNewMessage เมื่อมีข้อความใหม่มาจากเซิร์ฟเวอร์ระบบจะเรียกวิธีการอัพเดต

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

หลัก

ฟังก์ชั่นหลักคือจุดเข้าสู่แอปพลิเคชัน elm ดังที่แสดงด้านล่าง

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 - ติดตั้งแพ็คเกจ websockets โดยใช้ตัวจัดการแพ็คเกจ elm

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 - เมื่อดำเนินการผลลัพธ์ต่อไปนี้จะถูกสร้างขึ้น -