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

我一直在跟进，但使用Elm作为前端，而不是Javascript。该书的第二部分介绍了如何使用WebSocket。本书的运行示例让您创建一个身份验证令牌，以便客户端在连接创建时传递给Phoenix。Phoenix提供的Javascript

Socket

类允许这样做，但在Elm中没有明显的方法可以做到这一点（从0.17和这个问题的日期开始）

如本书所述，通过将标记附加到

窗口

，使其对Javascript可见

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

在Elm端，您将使用带标志的

programWithFlags

而不是

program

init

函数将采用flags参数。（我将库用于一个单页应用程序，这就是为什么还有一个

PageChoice

参数。）

在

init

中，将令牌作为URI查询对固定。请注意，您必须对uri进行编码，因为令牌包含奇数字符。下面是一个简单的方法。注意：我正在使用下面的库，但其他人也需要使用相同的黑客

  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

---

我是通过Brian的推特来这里的，关于Elm的编码。 在本例中，我喜欢从JavaScript端处理它。 我试图复制Phoenix客户端的设置方式。 我没有传递令牌，而是传递了完整的端点

我已将令牌放入一个散列中

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

---

在上下文中添加了上述代码的链接：它相当粗糙。

  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

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