Permalink
Browse files

Add a Phoenix layer

A channel will create a session and relay messages between the browser
and the session, similar to the ranch protocol.
  • Loading branch information...
oestrich committed Aug 3, 2017
1 parent 60358d2 commit 12952900e00eb730ceb94d26aafc3a06057c731c
View
@@ -18,3 +18,6 @@ erl_crash.dump
# Also ignore archive artifacts (built via "mix archive.build").
*.ez
assets/node_modules/
priv/static/
View
@@ -0,0 +1,46 @@
exports.config = {
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/assets/static". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
};
View
@@ -0,0 +1,21 @@
/* This file is for your main application css. */
body {
margin: 0;
background-color: black;
color: white;
}
.panel {
width: 100%;
}
pre {
font-size: 18px;
}
input {
font-size: 18px;
width: 98%;
margin: 10px;
}
View
@@ -0,0 +1,2 @@
import "phoenix_html"
import socket from "./socket"
View
@@ -0,0 +1,43 @@
import {Socket} from "phoenix"
let socket = new Socket("/socket", {})
socket.connect()
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
// Now that you are connected, you can join channels with a topic:
let channel = socket.channel("telnet:" + guid(), {})
channel.join()
.receive("ok", resp => { console.log("Joined successfully", resp) })
.receive("error", resp => { console.log("Unable to join", resp) })
channel.on("prompt", payload => {
document.getElementById("terminal").append(payload.message)
window.scrollTo(0, document.body.scrollHeight);
})
channel.on("echo", payload => {
document.getElementById("terminal").append(payload.message)
document.getElementById("terminal").append("\n")
window.scrollTo(0, document.body.scrollHeight);
})
channel.on("disconnect", payload => {
document.getElementById("terminal").append("\nDisconnected.")
socket.disconnect()
})
document.getElementById("command").addEventListener("keypress", e => {
if (e.keyCode == 13) {
var command = document.getElementById("command").value
document.getElementById("terminal").append(command + "\n")
document.getElementById("command").value = ""
channel.push("recv", {message: command})
}
})
export default socket
Oops, something went wrong.

0 comments on commit 1295290

Please sign in to comment.