<!doctype html> <head> <title>comicchat</title> <script src="https://code.jquery.com/jquery-2.0.0b1.js"></script> <script> var cc = {}; cc.connect = function() { // image urls over websocket var loc = window.location, new_uri; if (loc.protocol === "https:") { new_uri = "wss:"; } else { new_uri = "ws:"; } new_uri += "//" + loc.host; new_uri += loc.pathname + "new"; if (window["WebSocket"]) { cc.conn = new WebSocket(new_uri); cc.conn.onclose = function(evt) { } cc.conn.onmessage = function(evt) { msg = JSON.parse(evt.data); switch(msg.Type) { case "newimage": $('html, body').animate( {scrollTop: $(document).height()-$(window).height()}, 100 ); $("#output").append("<img src='" + msg.Message + "' />"); break; } } } }; cc.getName = function () { $("#name").show(); $("#set").show(); $("#set").click(function () { localStorage['comicchat_name'] = $("#name").val(); $("#name").hide(); $("#set").hide(); }); }; cc.send = function(typ, msg) { var cmsg = {}; cmsg.Type = typ; cmsg.Message = msg; cc.conn.send(JSON.stringify(cmsg)); }; $(document).ready(function () { cc.connect() $("#text").keypress(function (e) { if (e.which == 13) { $("#send").focus().click(); $("#text").val(''); $("#text").focus() return false; //<---- Add this line } }); $("#send").click(function () { cc.send("privmsg", $("#text").val()); $("#text").val(''); $("#text").focus() }); $("#setface").click(function () { cc.send("action", $("#face").val()); $("#text").focus() }); $("#setnick").click(function () { cc.send("nick", $("#nick").val()); $("#text").focus() }); cc.name = localStorage['comicchat_name']; if (! cc.name) { cc.getName(); } }); </script></head><body><div id="output"></div><!--<input style="display:none" id="name" /><button style="display:none" id="set">set name</button>--><input width=80 id="text" /><button id="send">send</button> <select id="face"> <option value="mao">mao</option> <option value="lenin">lenin</option> <option value="stalin">stalin</option> <option value="che">che</option> <option value="hitler">hitler</option> <option value="obama">obama</option> <option value="manson">manson</option> <option value="dude">dude</option> <option value="xzibit">xzibit</option></select><button id="setface">change face</button> <input width=80 id="nick" /><button id="setnick">set nick</button></body></html>
<!doctype html>
<head>
<title>comicchat</title>
<script src="https://code.jquery.com/jquery-2.0.0b1.js"></script>
<script>
var cc = {};
cc.connect = function() {
// image urls over websocket
var loc = window.location, new_uri;
if (loc.protocol === "https:") {
new_uri = "wss:";
} else {
new_uri = "ws:";
}
new_uri += "//" + loc.host;
new_uri += loc.pathname + "new";
if (window["WebSocket"]) {
cc.conn = new WebSocket(new_uri);
cc.conn.onclose = function(evt) {
}
cc.conn.onmessage = function(evt) {
msg = JSON.parse(evt.data);
switch(msg.Type) {
case "newimage":
$('html, body').animate(
{scrollTop: $(document).height()-$(window).height()},
100
);
$("#output").append("<img src='" + msg.Message + "' />");
break;
}
}
}
};
cc.getName = function () {
$("#name").show();
$("#set").show();
$("#set").click(function () {
localStorage['comicchat_name'] = $("#name").val();
$("#name").hide();
$("#set").hide();
});
};
cc.send = function(typ, msg) {
var cmsg = {};
cmsg.Type = typ;
cmsg.Message = msg;
cc.conn.send(JSON.stringify(cmsg));
};
$(document).ready(function () {
cc.connect()
$("#text").keypress(function (e) {
if (e.which == 13) {
$("#send").focus().click();
$("#text").val('');
$("#text").focus()
return false; //<---- Add this line
}
});
$("#send").click(function () {
cc.send("privmsg", $("#text").val());
$("#text").val('');
$("#text").focus()
});
$("#setface").click(function () {
cc.send("action", $("#face").val());
$("#text").focus()
});
$("#setnick").click(function () {
cc.send("nick", $("#nick").val());
$("#text").focus()
});
cc.name = localStorage['comicchat_name'];
if (! cc.name) {
cc.getName();
}
});
</script>
</head>
<body>
<div id="output"></div>
<!--
<input style="display:none" id="name" /><button style="display:none" id="set">set name</button>
-->
<input width=80 id="text" />
<button id="send">send</button>
<select id="face">
<option value="mao">mao</option>
<option value="lenin">lenin</option>
<option value="stalin">stalin</option>
<option value="che">che</option>
<option value="hitler">hitler</option>
<option value="obama">obama</option>
<option value="manson">manson</option>
<option value="dude">dude</option>
<option value="xzibit">xzibit</option>
</select>
<button id="setface">change face</button>
<input width=80 id="nick" />
<button id="setnick">set nick</button>
</body>
</html>