Tutorial by Examples | RIP Tutorial

Overview

A module, that is using Ports should have port keyword in it's module definition. port module Main exposing (..) It is impossible to use ports with Html.App.beginnerProgram, since it does not allow using Subscriptions or Commands. Ports are integrated in to update loop of Html.App.program or Ht...

Elm Language • Ports (JS interop)

Outgoing

Outgoing ports are used as Commands, that you return from your update function. Elm side Define outgoing port: port output : () -> Cmd msg In this example we send an empty Tuple, just to trigger a subscription on the JavaScript side. To do so, we have to apply output function with an empty...

Elm Language • Ports (JS interop)

Incoming

Incoming data from JavaScript is going through Subscriptions. Elm side First, we need to define an incoming port, using the following syntax: port input : (Int -> msg) -> Sub msg We can use Sub.batch if we have multiple subscriptions, this example will only contain one Subscription to in...

Elm Language • Ports (JS interop)

Immediate outgoing message on start-up in 0.17.0

To send an immediate message with data to JavaScript, you have to trigger an action from your init. init : ( Model, Cmd Msg ) init = ( Model 0, send SendOutgoing ) send : msg -> Cmd msg send msg = Task.perform identity identity (Task.succeed msg)

Elm Language • Ports (JS interop)

Get started

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trying out ports</title> </head> <body> <div id="app"></div> <script src="elm.js"></script> ...

Elm Language • Ports (JS interop)