index.js

// send a value to incoming port

var Elm = require('./Main.elm');
var root  = document.getElementById('root');
var app = Elm.Main.embed(root);

var num = 0;
setInterval(function () {
  num = num + 1
  app.ports.tick.send(num)
},1000);

Main.elm

module Main exposing (..)

import Html exposing (Html, button, div, text)

import Html.App
import Widget
import Ports

-- MODEL


type alias AppModel =
    { widgetModel : Widget.Model
    }


initialModel : AppModel
initialModel =
    { widgetModel = Widget.initialModel}


init : ( AppModel, Cmd Msg )
init =
    ( initialModel, Cmd.none )


-- MESSAGES


type Msg
    = WidgetMsg Widget.Msg


-- VIEW

view : AppModel -> Html Msg
view model =
    Html.div []
        [
            Html.App.map WidgetMsg (Widget.view model.widgetModel)
        ]
        

-- UPDATE


update : Msg -> AppModel -> ( AppModel, Cmd Msg )
update message model =
    case message of
        WidgetMsg subMsg ->
            let
                ( updatedWidgetModel, widgetCmd ) =
                    Widget.update subMsg model.widgetModel
            in
                ( { model | widgetModel = updatedWidgetModel }, Cmd.map WidgetMsg widgetCmd )



-- SUBSCRIPTIONS
-- Send the value of `Ports.tick` to Widget
--

subscriptions : AppModel -> Sub Msg
subscriptions model =
    Ports.tick WidgetMsg
        

-- APP


main : Program Never
main =
    Html.App.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

Ports.elm

port module Ports exposing (..)

port tick : (Int -> msg) -> Sub msg

Widget.elm

module Widget exposing (..)

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


-- MODEL


type alias Model =
    { count : Int
    , tickValue : Int
    }


initialModel : Model
initialModel =
    { count = 0
    , tickValue = 0
    }



-- MESSAGES


type Msg
    = Increase
    | Tick Int


-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ div [] [ text ("Widget: " ++ (toString model.count)) ]
        , button [ onClick Increase ] [ text "Click" ]
        ]



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
    case message of
        Increase ->
            ( { model | count = model.count + 1 }, Cmd.none )

        Tick val ->
            ({model | tickValue = val}, Cmd.none)