Elm Ports Example
| port module FakeChat exposing (..) | |
| import Html exposing (Html, div, input, text, button, ul, li) | |
| import Html.Events exposing (onClick, onInput) | |
| import Html.Attributes exposing (type_, placeholder, value) | |
| main = | |
| Html.program | |
| { view = view | |
| , update = update | |
| , init = init | |
| , subscriptions = subscriptions | |
| } | |
| type alias Model = | |
| { input : String | |
| , messages : List String | |
| } | |
| type Msg | |
| = InputChange String | |
| | SendToJS | |
| | NewMessage String | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| ( Model "" [], Cmd.none ) | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case Debug.log "[elm]" msg of | |
| InputChange newInput -> | |
| ( { model | input = newInput }, Cmd.none ) | |
| SendToJS -> | |
| ({ model | input = "" }, toJS model.input) | |
| NewMessage incoming -> | |
| ({ model | messages = model.messages ++ [incoming] }, Cmd.none) | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| toElm NewMessage | |
| view : Model -> Html Msg | |
| view model = | |
| div [] | |
| [ viewMessages model.messages | |
| , input [ type_ "text" | |
| , placeholder "Type a message" | |
| , onInput InputChange | |
| , value model.input | |
| ] [] | |
| , button [ onClick SendToJS ] [ text "Send to JS" ] | |
| ] | |
| viewMessages : List String -> Html Msg | |
| viewMessages messages = | |
| ul [] | |
| (List.map viewMessage messages) | |
| viewMessage : String -> Html Msg | |
| viewMessage message = | |
| li [] | |
| [ text message ] | |
| port toJS : String -> Cmd msg | |
| port toElm : (String -> msg) -> Sub msg |
| <!DOCTYPE html> | |
| <html> | |
| <head></head> | |
| <body> | |
| <script type="text/javascript" src="ports.js"></script> | |
| <script type="text/javascript"> | |
| const fakeChat = Elm.FakeChat.fullscreen() | |
| const names = ["Alice", "Bob", "John"] | |
| fakeChat.ports.toJS.subscribe(function (msg) { | |
| console.log('[elm-to-js]', msg) | |
| const name = names[Math.floor(Math.random() * names.length)] | |
| fakeChat.ports.toElm.send(`<${name}> ${msg}`) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment