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

我沿着Programming Phoenix，但使用Elm作为我的前端，而不是Javascript。该书的第二部分描述了如何使用websocket。本书的运行示例为您创建一个身份验证令牌，以便客户端在创建连接时传递给Phoenix。提供给Phoenix的Javascript Socket类允许这样做，但是在Elm中没有明显的方法（从0.17开始并且是此问题的日期）。如何将连接时websocket参数从Elm传递给Phoenix？

来源

2016-11-07 Brian Marick

正如在本书中，通过将该标记附加到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 
```

来源

2016-11-07 21:54:10

在上下文中添加了上述代码的链接：https：//github.com/marick/eecrit/blob/channels/web/elm/C4u.elm这相当简陋。 –

我来到这里的推文布赖恩，大约从榆树编码。在这种情况下，我喜欢从JavaScript端处理它。我试图复制凤凰客户端设置它的方式。不是传递我通过了完整的端点令牌的...

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

来源

2016-11-08 08:42:00 bbz

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

回答

相关问题