2 min read
December 22, 2020
The first thing we will need to do in accomplishing sending a message from our application is to define our outgoing port.
port sendButtonClickedMessage : String -> Cmd Msg
From the definition of the function we can see that this simple port will send out a
String value. We will send messages through this port when a user clicks a button in our application.
So how do we connect this outgoing port to our code in the Elm lifecycle? We will start by writing the
view code where this button resides.
view we have a
Html.button that when clicked, causes the
update function to be called with the
type Msg = SomeOtherMessage | SendOutgoingMessage String update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of SomeOtherMessage -> … SendOutgoingMessage messageToSend -> ( model, sendButtonClickedMessage messageToSend )
update function proceeds to call the port and supply the
index.html file that we learned about in yesterday's post.
We might want to send out a little more complicated messages than just a
String type. In these other cases we can use Json-encoder to turn the desired Elm values into a json structure.