web-dev-qa-db-ja.com

Elm 0.19でWebSocketを機能させる方法

Elmのバージョン0.18から0.19にアップグレードしようとしています。私のプロジェクトは0.18でElm-lang/websocketに依存していますか？ 0.19で同等のパッケージが見つからないようです。何が欠けていますか？

websocketelm
9
John F. Miller

websocketパッケージは現在Elm 0.19用に再設計されています。 この問題を参照してください ：

このパッケージはまだ0.19用に更新されていません。私は多くの人々がこのパッケージからより多くの機能が必要であると言っているのを聞いたので、私は同じことをするだけでなくアップデートでそれを考慮に入れたいと思います。この権利が絶対に必要な場合は、ポートまたは0.18を使用することをお勧めします。

5
rlefevre

以下は、Elm 0.19モジュールの外部のJavaScript WebSocketオブジェクトと通信するための2つのシンプルな入出力ポートを使用して、echo.websocket.orgから入力をエコーするインタラクティブフォームの最小限の実用的な例です。

ファイル：echo.Elm。コンパイル：Elm make echo.Elm --output=echo.js

port module Main exposing (main)

import Browser
import Html exposing (Html)
import Html.Attributes as HA
import Html.Events as HE
import Json.Encode as JE

-- JavaScript usage: app.ports.websocketIn.send(response);
port websocketIn : (String -> msg) -> Sub msg
-- JavaScript usage: app.ports.websocketOut.subscribe(handler);
port websocketOut : String -> Cmd msg

main = Browser.element
    { init = init
    , update = update
    , view = view
    , subscriptions = subscriptions
    }

{- MODEL -}

type alias Model =
    { responses : List String
    , input : String
    }

init : () -> (Model, Cmd Msg)
init _ =
    ( { responses = []
      , input = ""
      }
    , Cmd.none
    )

{- UPDATE -}

type Msg = Change String
    | Submit String
    | WebsocketIn String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Change input ->
      ( { model | input = input }
      , Cmd.none
      )
    Submit value ->
      ( model
      , websocketOut value
      )
    WebsocketIn value ->
      ( { model | responses = value :: model.responses }
      , Cmd.none
      )

{- SUBSCRIPTIONS -}

subscriptions : Model -> Sub Msg
subscriptions model =
    websocketIn WebsocketIn

{- VIEW -}

li : String -> Html Msg
li string = Html.li [] [Html.text string]

view : Model -> Html Msg
view model = Html.div []
    --[ Html.form [HE.onSubmit (WebsocketIn model.input)] -- Short circuit to test without ports
    [ Html.form [HE.onSubmit (Submit model.input)]
      [ Html.input [HA.placeholder "Enter some text.", HA.value model.input, HE.onInput Change] []
      , model.responses |> List.map li |> Html.ol []
      ]
    ]

コンパイルしたecho.jsをecho.htmlに埋め込みます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Echo</title>
  <script src="echo.js"></script>
</head>
<body>
  <div id="Elm-node"></div>
  <script>
    var app = Elm.Main.init({node: document.getElementById("Elm-node")});
    var ws = new WebSocket("wss://echo.websocket.org");
    ws.onmessage = function(message)
    {
        console.log(message);
        app.ports.websocketIn.send(JSON.stringify({data:message.data,timeStamp:message.timeStamp}));
    };
    app.ports.websocketOut.subscribe(function(msg) { ws.send(msg); });
  </script>
</body>
</html>

これはLinux上のFirefox 60.2.0esrで動作しますが、他のプラットフォームではテストされていません。

繰り返しますが、これはElm 0.19のWebSocketsでポートを使用する方法を示す最小限の例にすぎません。これには、WebSocketのクローズ、エラー処理などは含まれていませんが、この例がその方向に進むのに役立つことを願っています。 WebSocketがElmによってすぐに直接サポートされることが予想されるため、これは一時的な回避策にすぎません。 0.19にアップグレードする必要がない場合は、代わりに0.18のままにすることを検討してください。

6
Matt