Wie übergebe ich Verbindungszeit-Websocket-Parameter von Elm an Phoenix?

Question

Ich folgte entlang Programming Phoenix, aber mit Elm für mein Frontend, anstatt Javascript. Der zweite Teil dieses Buches beschreibt, wie man Websockets verwendet. Im laufenden Beispiel des Buchs erstellen Sie ein Authentifizierungstoken für die Clientseite, das zum Zeitpunkt der Verbindungsherstellung an Phoenix übergeben wird. Die Javascript-Klasse Socket, die mit Phoenix geliefert wird, erlaubt das, aber es gibt keinen offensichtlichen Weg, es in Elm zu machen (ab 0.17 und dem Datum dieser Frage).

Answer 1

1. Wie im Buch machen die Token Javascript sichtbar, indem es window befestigen.

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

2. In web/static/js/app.js, werden Sie Code haben, der Elm beginnt. Übergeben Sie das Token dort.

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

3. Auf der Elm Seite, werden Sie programWithFlags statt program verwenden.

4. Ihre init Funktion wird ein flags Argument nehmen. (Ich benutze die Navigation Bibliothek für einen Single-Seite-App, die ist, warum es ein PageChoice Argument als auch.)

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

5. Innerhalb init, tack auf dem Token als Abfrage Paar URI. Beachten Sie, dass Sie uri-encode verwenden müssen, da das Token ungerade Zeichen enthält. Hier ist der grobe Weg, das zu tun. Hinweis: Ich verwende die elm-phoenix-socket-Bibliothek unten, aber die gleiche Hackerei würde mit anderen benötigt.

   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

ich hier durch einen Tweet von Brian, über Codierung von Elm. In diesem Fall gehe ich gerne mit JavaScript um. Ich habe versucht, die Art und Weise, wie der Phoenix-Client es erstellt, zu replizieren. Anstatt das Zeichen gibt ich den vollständigen Endpunkt übergab ...

Ich habe

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

Was ich auf dem Client zu lesen, das Token in JSON einen Hash setzen und gehe auf den Elm einbetten

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 
    })