Elm Language Ports (JS interop) Outgoing


Example

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 Tuple as argument, to get a Command for sending the outgoing data from Elm.

update msg model =
    case msg of
        TriggerOutgoing data ->
            ( model, output () )

JavaScript side

Initialize the application:

var root = document.body;
var app = Elm.Main.embed(root);

Subscribe to a port with a corresponding name:

app.ports.output.subscribe(function () {
    alert('Outgoing message from Elm!');
});

Note

As of 0.17.0, immediate outgoing message to JavaScript from your initial state will have no effect.

init : ( Model, Cmd Msg )
init =
    ( Model 0, output () ) -- Nothing will happen

See the workaround in the example below.