Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple example of using Ports in Elm
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0",
"evancz/elm-effects": "2.0.1 <= v < 3.0.0",
"evancz/elm-html": "4.0.2 <= v < 5.0.0",
"evancz/start-app": "2.0.2 <= v < 3.0.0"
},
"elm-version": "0.16.0 <= v < 0.17.0"
}
module EncryptMessage where
import Html exposing (Html, Attribute, text, toElement, div, input)
import Html.Attributes exposing (..)
import Html.Events exposing (on, targetValue)
import Signal exposing (Address, Signal, Mailbox, mailbox, send)
import StartApp
import Effects exposing (Effects, Never)
import String
import Task
app =
StartApp.start { init = (init, Effects.none), view = view, update = update, inputs = [encryptedString] }
main = app.html
port tasks : Signal (Task.Task Never ())
port tasks =
app.tasks
type Action =
TextChanged String
| EncryptedValueReceived String
| Noop
type alias Model =
{ clearText : String
, encryptedText : String
}
init =
Model "" ""
-- outgoing ports & mailbox
portRequestEncryptionMailbox : Mailbox String
portRequestEncryptionMailbox =
mailbox ""
port requestEncryption : Signal String
port requestEncryption =
portRequestEncryptionMailbox.signal
-- incoming ports
port encryptionCompleted : Signal String
encryptedString : Signal Action
encryptedString =
Signal.map EncryptedValueReceived encryptionCompleted
update : Action -> Model -> (Model, Effects Action)
update action model =
case action of
TextChanged text ->
( { model | clearText = text }
, sendStringToBeEncrypted text
)
EncryptedValueReceived encrypted ->
( { model | encryptedText = encrypted }
, Effects.none
)
Noop ->
( model, Effects.none )
sendStringToBeEncrypted : String -> Effects Action
sendStringToBeEncrypted clearText =
send portRequestEncryptionMailbox.address clearText
|> Effects.task
|> Effects.map (\_ -> Noop)
view : Address Action -> Model -> Html
view address model =
div []
[ input
[ placeholder "Text to encrypt"
, value model.clearText
, on "input" targetValue (\textfieldContent -> Signal.message address <| TextChanged textfieldContent)
, myStyle
]
[]
, div [ myStyle ] [ text (model.encryptedText) ]
]
myStyle : Attribute
myStyle =
style
[ ("width", "100%")
, ("height", "40px")
, ("padding", "10px 0")
, ("font-size", "2em")
, ("text-align", "center")
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Encryption sample</title>
<link href="base.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="encryptMessages.js"></script>
<script>
var div = document.getElementById('root');
var myapp = Elm.embed(Elm.EncryptMessage, div, {encryptionCompleted : ""});
myapp.ports.requestEncryption.subscribe(encryptString);
function encryptString(message) {
encryptedMessage = "Encypted: " + message; // actually encypting the message is ommited
myapp.ports.encryptionCompleted.send(encryptedMessage);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment