fzzzy/irc.html

## irc.html
<!DOCTYPE html>
<html>
  <head><title>Test</title></head>
  <style type="text/css">

dd {
  margin-left: 0px;
  margin-bottom: 1em;
}

#login {
  position: absolute;
  background: #efefef;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 3em;
}

#output {
  display: none;
  position: absolute;
  overflow: scroll;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 1em;
  padding: 1em;
}

#input {
  display: none;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 1em;
  height: 1em;
  padding: 1em;
}

#log {
  display: none;
}
  </style>
  <body>
    <form id="login" onsubmit="login(this); return false">
      <h1>IRC Login</h1>
      <dl>
        <dt><label for="server">Server</label></dt>
        <dd><input type="text" name="server" value="irc.mozilla.org" /></dd>
        <dt><label for="port">Port</label></dt>
        <dd><input type="text" name="port" value="6697" /></dd>
        <dt><label for="port">SSL</label></dt>
        <dd><input type="checkbox" name="ssl" checked="checked" /></dd>
        <dt><label for="nick">Nick</label></dt>
        <dd><input type="text" name="nick" value="testertestificate" /></dd>
        <dt><label for="realname">Real Name</label></dt>
        <dd><input type="text" name="realname" value="Anonymous" /></dd>
        <dt><label for="channel">Channel</label></dt>
        <dd><input type="text" name="channel" value="#testificate" /></dd>
      </dl>
      <button>Login</button>
    </form>
    <div id="output"><h1>IRC</h1></div>
    <div id="input">
      <form id="input-form" onsubmit="input(this, 'send'); return false">
        <input type="text" name="line" />
        <button name="send" onclick="input(this, 'send'); return false">Send</button>
        <button name="quit" onclick="input(this, 'quit'); return false">Quit</button>
      </form>
    </div>
    <script>

var connected = false,
    send_output = null,
    quit_connection = null,
    channel = null;

function appendtext(nodeid, text) {
  var n = document.createElement("p");
  n.appendChild(document.createTextNode(text));
  document.getElementById(nodeid).appendChild(n);
}


function on_line(line) {
  if (line.slice(0, 4) == "PING") {
    send_output("PONG" + line.slice(4));
    if (!connected) {
      send_output("JOIN " + channel + "\r\n");
      connected = true;
    }
  } else if (line[0] === ":") {
    var server_cmd = line.split(' ');
    if (server_cmd[server_cmd.length - 2] === "JOIN") {
      appendtext(
        "output",
        "Joined " + server_cmd[server_cmd.length - 1].slice(1));
    } else if (server_cmd[1] === "PRIVMSG" && server_cmd[2] === channel) {
      var speaker_nick = server_cmd[0].slice(1, server_cmd[0].indexOf("!")),
          line = server_cmd.slice(3).join(" ").slice(1);

      appendtext("output", speaker_nick + ": " + line);
    }
    console.log(line);
  } else {
    appendtext('output', line);
  }
}

function login(login) {
  dump("login\n")
  var test = MozTCPSocket.open(
    login.server.value, parseInt(login.port.value), {useSSL: login.ssl.checked}),
      nick = login.nick.value,
      req = "USER " + nick + " * " + login.server.value + " :" +
        nick + " (from B2G)\r\nNICK " + nick + "\r\n",
      partial_line = "";

  channel = login.channel.value,

  test.onopen = function onopen() {
    console.log("ONOPEN\n")
    // Set the global so posting the inputline form can
    // invoke this to send data on the socket
    send_output = function send_output(output) {
      test.send(output + "\r\n");
      console.log("sendoutput", output)
    }
    // Set the global so the quit button can call this
    quit_connection = function quit_connection() {
      test.close()
      document.getElementById("output").style.display = "none";
      document.getElementById("input").style.display = "none";
      send_output = null;
      quit_connection = null;
    }

    send_output(req);
  }
  test.ondata = function ondata(evt) {
    console.log("ondata", evt.data);
    var lines = evt.data,
        idx = null;

    if (partial_line.length) {
      lines = partial_line + lines;
    }
    while ((idx = lines.indexOf("\r\n")) !== -1) {
      on_line(lines.slice(0, idx));
      lines = lines.slice(idx + 2);
    }
    partial_line = lines;
  }
  test.ondrain = function ondrain(evt) {
    console.log("ONDRAIN");
  }
  test.onerror = function onerror(evt) {
    console.log("onerror", evt);
  }
  test.onclose = function onclose(evt) {
    console.log("onclose");
  }
  document.getElementById("output").style.display = "block";
  document.getElementById("input").style.display = "block";
  login.style.display = "none";
}

function input(input, action) {
  if (action === "send") {
    send_output("PRIVMSG " + channel + " :" + input.line.value);
    appendtext("output", "> " + input.line.value);
    input.line.value = "";
  } else if (action === "quit") {
    quit_connection();
    document.getElementById("output").style.display = "none";
    document.getElementById("input").style.display = "none";
    login.style.display = "absolute";
  }
}

    </script>
    <div id="log">
      <h1>Debug Log</h1>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>Test</title></head>
	<style type="text/css">

	dd {
	margin-left: 0px;
	margin-bottom: 1em;
	}

	#login {
	position: absolute;
	background: #efefef;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 3em;
	}

	#output {
	display: none;
	position: absolute;
	overflow: scroll;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 1em;
	padding: 1em;
	}

	#input {
	display: none;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 1em;
	height: 1em;
	padding: 1em;
	}

	#log {
	display: none;
	}
	</style>
	<body>
	<form id="login" onsubmit="login(this); return false">
	<h1>IRC Login</h1>
	<dl>
	<dt><label for="server">Server</label></dt>
	<dd><input type="text" name="server" value="irc.mozilla.org" /></dd>
	<dt><label for="port">Port</label></dt>
	<dd><input type="text" name="port" value="6697" /></dd>
	<dt><label for="port">SSL</label></dt>
	<dd><input type="checkbox" name="ssl" checked="checked" /></dd>
	<dt><label for="nick">Nick</label></dt>
	<dd><input type="text" name="nick" value="testertestificate" /></dd>
	<dt><label for="realname">Real Name</label></dt>
	<dd><input type="text" name="realname" value="Anonymous" /></dd>
	<dt><label for="channel">Channel</label></dt>
	<dd><input type="text" name="channel" value="#testificate" /></dd>
	</dl>
	<button>Login</button>
	</form>
	<div id="output"><h1>IRC</h1></div>
	<div id="input">
	<form id="input-form" onsubmit="input(this, 'send'); return false">
	<input type="text" name="line" />
	<button name="send" onclick="input(this, 'send'); return false">Send</button>
	<button name="quit" onclick="input(this, 'quit'); return false">Quit</button>
	</form>
	</div>
	<script>

	var connected = false,
	send_output = null,
	quit_connection = null,
	channel = null;

	function appendtext(nodeid, text) {
	var n = document.createElement("p");
	n.appendChild(document.createTextNode(text));
	document.getElementById(nodeid).appendChild(n);
	}


	function on_line(line) {
	if (line.slice(0, 4) == "PING") {
	send_output("PONG" + line.slice(4));
	if (!connected) {
	send_output("JOIN " + channel + "\r\n");
	connected = true;
	}
	} else if (line[0] === ":") {
	var server_cmd = line.split(' ');
	if (server_cmd[server_cmd.length - 2] === "JOIN") {
	appendtext(
	"output",
	"Joined " + server_cmd[server_cmd.length - 1].slice(1));
	} else if (server_cmd[1] === "PRIVMSG" && server_cmd[2] === channel) {
	var speaker_nick = server_cmd[0].slice(1, server_cmd[0].indexOf("!")),
	line = server_cmd.slice(3).join(" ").slice(1);

	appendtext("output", speaker_nick + ": " + line);
	}
	console.log(line);
	} else {
	appendtext('output', line);
	}
	}

	function login(login) {
	dump("login\n")
	var test = MozTCPSocket.open(
	login.server.value, parseInt(login.port.value), {useSSL: login.ssl.checked}),
	nick = login.nick.value,
	req = "USER " + nick + " * " + login.server.value + " :" +
	nick + " (from B2G)\r\nNICK " + nick + "\r\n",
	partial_line = "";

	channel = login.channel.value,

	test.onopen = function onopen() {
	console.log("ONOPEN\n")
	// Set the global so posting the inputline form can
	// invoke this to send data on the socket
	send_output = function send_output(output) {
	test.send(output + "\r\n");
	console.log("sendoutput", output)
	}
	// Set the global so the quit button can call this
	quit_connection = function quit_connection() {
	test.close()
	document.getElementById("output").style.display = "none";
	document.getElementById("input").style.display = "none";
	send_output = null;
	quit_connection = null;
	}

	send_output(req);
	}
	test.ondata = function ondata(evt) {
	console.log("ondata", evt.data);
	var lines = evt.data,
	idx = null;

	if (partial_line.length) {
	lines = partial_line + lines;
	}
	while ((idx = lines.indexOf("\r\n")) !== -1) {
	on_line(lines.slice(0, idx));
	lines = lines.slice(idx + 2);
	}
	partial_line = lines;
	}
	test.ondrain = function ondrain(evt) {
	console.log("ONDRAIN");
	}
	test.onerror = function onerror(evt) {
	console.log("onerror", evt);
	}
	test.onclose = function onclose(evt) {
	console.log("onclose");
	}
	document.getElementById("output").style.display = "block";
	document.getElementById("input").style.display = "block";
	login.style.display = "none";
	}

	function input(input, action) {
	if (action === "send") {
	send_output("PRIVMSG " + channel + " :" + input.line.value);
	appendtext("output", "> " + input.line.value);
	input.line.value = "";
	} else if (action === "quit") {
	quit_connection();
	document.getElementById("output").style.display = "none";
	document.getElementById("input").style.display = "none";
	login.style.display = "absolute";
	}
	}

	</script>
	<div id="log">
	<h1>Debug Log</h1>
	</div>
	</body>
	</html>