Minimalistisches html/Javascript-Paket zum Verbinden mit Phoenix-Kanälen

Question

Ich suche nach einer Möglichkeit, ein minimalistisches Demo-Paket für Frontend-Entwickler zu erstellen, damit sie einfach Kanäle zwischen einem Elixir/Phoenix API-Server und einer mobilen HTML5-App integrieren können oder (Legacy) Webapps nicht von Phoenix bedient.

NB: Javascript ist nie mein Freund gewesen ...

Ich mache Tests mit einem Phoenix-App mit --no-brunch erzeugt. app.js und phoenix.js befinden sich beide in priv/static/js/.

Die app.js enthält:

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 

Als ich in der .html Datei setzen:

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

ich in der Konsole

ReferenceError: Socket is not defined 

Auf der anderen Seite bekommen, wenn ich entfernen die Einfügung von von der .html und setzen es in app.js mit import "./phoenix.js", bekomme ich SyntaxError: import declarations may only appear at top level of a module in der Konsole.

Also wo sollen die .js Dateien gehen und wie man sie einbezieht, um etwas zu haben, das funktioniert?

Vielleicht eine verwandte Frage ist: wie Kanäle ohne Brunch zu verwenden?

Answer 1

Ich bekam die Antwort von Elixir Forum. Der Aufruf des Socket-Konstruktors sollte nicht socket = new Socket("/socket", {params: {token: "abc"}}) sondern socket = new Phoenix.Socket("/socket", {params: {token: "abc"}}) sein.

Sobald dies an Ort und Stelle, alles ist in Ordnung.