フェニックスチャンネルに接続するための最小限のhtml/javascriptパッケージ

Question

フロントエンド開発者用のミニマリストデモパッケージを作成して、Elixir/Phoenix APIサーバーとモバイルHTML5アプリの間で簡単にチャンネルを統合できる方法を探しています。レガシー）webappsはPhoenixのサービスを受けていません。

NB：Javascriptが私の友人ではありませんでした...

私は--no-brunchで生成されたフェニックスのアプリでテストをやっています。 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"で、私は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"}})である必要があります。

これが適切に設定されると、すべて正常です。