用于连接 Phoenix 频道的简约 html/javascript 包

Question

我正在寻找一种方法来为前端开发人员创建一个极简演示包，以便他们可以轻松地集成 Elixir/Phoenix api 服务器和移动 HTML5 应用程序或 Phoenix 不提供的（旧版）网络应用程序之间的通道。

注意：Javascript 从来都不是我的朋友...

我正在使用--no-brunch 生成的 Phoenix 应用程序进行测试。 app.js 和 phoenix.js 都位于 priv/static/js/。

app.js 包含：

var socket = null
// Responds to a click on a "Connect" button on the GUI
function doConnect() {
    socket = new Socket("/socket", {params: {token: "abc"}})

    socket.connect()
    let channel = socket.channel("user:anonymous", {})
    channel.join()
    .receive("ok", resp => { console.log("Joined successfully", resp) })
    .receive("error", resp => { console.log("Unable to join", resp) })
}
...
// some other GUI callbacks

当我输入.html 文件时：

<script src="<%= static_path(@conn, "/js/phoenix.js") %>"></script
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

我进入控制台

ReferenceError: Socket is not defined

另一方面，如果我从.html 中删除包含phoenix.js 并将其与import "./phoenix.js" 一起放入app.js，我会在控制台中得到SyntaxError: import declarations may only appear at top level of a module。

那么.js 文件应该放在哪里以及如何包含它们才能获得有效的东西？

也许一个相关的问题是：如何在没有早午餐的情况下使用频道？

Answer 1

我从Elixir Forum 得到了答案。对Socket 构造函数的调用不应该是socket = new Socket("/socket", {params: {token: "abc"}})，而是socket = new Phoenix.Socket("/socket", {params: {token: "abc"}})。

一旦安装到位，一切都很好。