Elmから接続時間websocketパラメータをPhoenixに渡すにはどうすればよいですか？

Question

私はProgramming Phoenixに従っていたが、JavascriptではなくフロントエンドにElmを使用していた。この本の第2部では、Webソケットの使い方について説明しています。本の実行例では、接続作成時にクライアント側がPhoenixに渡すための認証トークンを作成します。 Phoenixで提供されているJavascript Socketクラスではこれが可能ですが、Elmでこれを行う明確な方法はありません（0.17時点とこの問題の日付）。

Answer 1

1. は、本のように、windowに取り付けることにより、JavaScriptにトークンが見えるように。

   <script>window.auth_token = "<%= assigns[:auth_token] %>"</script> 
   

2. web/static/js/app.jsには、Elmを起動するコードがあります。そこにトークンを渡します。エルム側で

   const c4uDiv = document.querySelector('#c4u-target'); 
   if (c4uDiv) { 
       Elm.C4u.embed(c4uDiv, {authToken: window.auth_token}); 
   } 
   

3. 、あなたはprogramWithFlagsの代わりprogramを使用します。

4. init関数はflags引数をとります。 （私はPageChoice引数が同様にあります理由は単一ページのアプリケーションのためのNavigationライブラリを使用しています。）

   type alias Flags = 
       { authToken : String 
       } 
   
   init : Flags -> MyNav.PageChoice -> (Model, Cmd Msg) 
   

5. init内で、タックをURIクエリのペアとしてトークンに。トークンには奇数文字が含まれているため、uri-encodeする必要があります。これを行うための原油の方法があります。注：下記のelm-phoenix-socketライブラリを使用していますが、他のライブラリと同じハッカーが必要です。

   let 
       uri = "ws://localhost:4000/socket/websocket?auth_token=" ++ 
         (Http.uriEncode flags.authToken) 
       in 
       uri 
       |> Phoenix.Socket.init 
       |> Phoenix.Socket.withDebug 
       |> Phoenix.Socket.on "ping" "c4u" ReceiveMessage 
   

Answer 2

私はエルムからエンコードについては、ブライアンによってさえずるでここに着きました。 この場合、JavaScript側から処理したいと思っています。 Phoenixクライアントが設定する方法を再現しようとしました。代わりに、私は完全なエンドポイントを通過したトークンを渡すの ...

私はJSONでトークン私は、クライアント上で読んでハッシュ

<script id="app-json" type="application/json"><%= raw @json %></script> 

を入れて、エルムに渡す

を埋め込みました

var data = JSON.parse(document.getElementById("app-json").innerHTML) 

var token = encodeURIComponent(data.token) 

var elm = window.Elm.App.embed(document.getElementById("elm-container"), { 
    socketEndpoint: "ws://" + window.location.host + "/socket/websocket?token=" + token 
    })