Question

我跟随 Programming Phoenix ，但使用Elm作为我的前端，而不是Javascript。该书的第二部分描述了如何使用websockets。本书的运行示例为您创建了一个身份验证令牌，供客户端在创建连接时传递给Phoenix。凤凰城提供的Javascript Socket类允许这样做，但在Elm中没有明显的方法（截至0.17和此问题的日期）。

Answer 1

如书中所示，通过将其附加到window使Javascript可见。

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

在web/static/js/app.js中，您将拥有启动Elm的代码。将令牌传递给那里。

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

在榆树方面，您将使用programWithFlags代替program。
您的init函数将采用flags参数。（我将Navigation库用于单页应用，这也是PageChoice参数的原因。）
```
type alias Flags =
  { authToken : String
  }

init : Flags -> MyNav.PageChoice -> ( Model, Cmd Msg )
```
在init中，将令牌作为URI查询对添加。请注意，您必须进行uri编码，因为该标记包含奇数字符。这是粗暴的做法。注意：我正在使用下面的elm-phoenix-socket库，但其他人也需要相同的hackery。
```
  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端处理它。我试图复制凤凰客户端设置它的方式。我没有传递令牌，而是通过了完整的终点......

我已将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
  })

如何从Elm将连接时websocket参数传递给Phoenix？

2 个答案: