sm
/
chat
1
0
Fork 0
Code Issues 2 Pull Requests Activity

react to user inputs 

actually send message to server
This commit is contained in:
Stephen McQuay 2015-04-05 22:42:47 -07:00
parent c32f2abcb1
commit 287574622a
2 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/index.html
View File

@ -4,17 +4,13 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>chat</title>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<title>chat</title>
</head>
<body>
<div class="page-header text-center">
<h1>chat</h1>
<h3 id="user-display">
<span class="name">placeholder</span>
<span class="glyphicon"></span>
</h3>
<div id='alert' class="alert alert-danger">placeholder</div>
</div>
<div class="container">
@ -30,15 +26,21 @@
</div>
</div>
</div>
<div id="stream" class="row">
<div class="col-sm-3">
<div id="uinputs" class="row">
<div class="input-group">
<input id="uinput" type="text" class="form-control" placeholder="say somethin', will ya?" autofocus>
<span class="input-group-btn">
<button id="submit-uinput" class="btn btn-default" type="button">send</button>
</span>
</div>
<div class="col-sm-6 text-center">
<h2>stream</h2>
<div id="pics"></div>
</div>
<div id="stream" class="row well well-sm strm">
<div class="">
<div id="chatter"></div>
</div>
</div>
</div>
<div id="msg" class="visibility: hidden;"></div>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/chat.js"></script>

28
static/js/chat.js
View File

@ -5,13 +5,19 @@ function authenticate(event) {
websocket.send(JSON.stringify({name: $("#username").val() }));
}
function send(event) {
websocket.send("\"" + $("#uinput").val() + "\"\n");
$("#uinput").val("");
}
$(function(){
$("#auth").hide();
$("#alert").hide();
$("#user-display").hide();
$("#stream").hide();
$("#uinputs").hide();
$("#submit-username").click(authenticate);
$("#submit-uinput").click(send);
setupWS();
});
@ -33,8 +39,8 @@ function onOpen(e) {
function onClose(e) {
console.error("websocket disconnected");
$("#alert").show().text("reload page");
$("#stream, #user-display, #auth").hide();
$("#alert").show().text("client disconnect; please reload page");
$("#stream, #auth").hide();
}
function onMessage(e) {
@ -45,13 +51,23 @@ function onMessage(e) {
$("#alert").show().text(payload.error);
return;
}
$("#user-display .name").text($("#username").val());
$("#user-display").show();
$("#auth").hide();
$("#stream").show();
$("#uinputs").show();
$(':input').keydown(function (e){
if(e.keyCode == 13){
send();
}
})
state = "chatting";
} else if (state === "chatting") {
console.log(payload);
var msg = $("#msg").clone();
msg.text(payload);
$("#chatter").prepend(msg.show());
var s = $("#chatter").children().size();
if (s > 20) {
var s = $("#chatter").children().last().remove();
}
}
}