Created
June 12, 2012 19:07
-
-
Save fzzzy/2919474 to your computer and use it in GitHub Desktop.
js irc client again
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment