如何从Elm传递连接时websocket参数到Phoenix ?

Question

我遵循编程凤凰，但使用Elm作为我的前端，而不是Javascript。这本书的第二部分描述了如何使用websockets。本书的运行示例要求您为客户端创建一个身份验证令牌，以便在创建连接时传递给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. 在Elm端，您将使用programWithFlags而不是program。

4. 你的init函数将接受一个flags参数。(我使用导航库的单页应用程序，这就是为什么有一个PageChoice参数也是)

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

5. 在init中，将令牌附加为URI查询对。注意，您必须进行uri编码，因为标记包含奇数字符。这是一种简单的方法。注意:我正在使用下面的elm-phoenix-socket库，但其他库也需要相同的hack。

     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

我通过Brian的Tweet来到这里，关于Elm的编码。在这种情况下，我喜欢从JavaScript端处理它。我尝试复制Phoenix客户端设置它的方式。我没有传递令牌，而是传递了完整的端点…

我已经把token放到JSON中了哈希值

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

我在客户端读取，并传递给Elm嵌入

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