-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclient.js.archive
82 lines (73 loc) · 2.39 KB
/
client.js.archive
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sapient Conversations</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://bit.ly/cdn-bootstrap-css">
<link rel="stylesheet" href="http://bit.ly/cdn-bootstrap-theme">
<script src="http://bit.ly/cdn-bootstrap-jq"></script>
<script>
var ws = new WebSocket("ws://localhost:8000");
var nickname = "sapent-bot";
ws.onopen = function(e) {
console.log('Connection to server opened');
}
function appendLog(type, nickname, message) {
var messages = document.getElementById('messages');
var messageElem = document.createElement("li");
var preface_label;
if(type === 'notification') {
preface_label = "<span class=\"label label-info\">*</span>";
} else if(type === 'nick_update') {
preface_label = "<span class=\"label label-warning\">*</span>";
} else {
preface_label = "<span class=\label label-success\">*</span>"
+ nickname + "</span>";
}
var message_text = "<span>" + preface_label + " "
+ message + "</span>";
messageElem.innerHTML = message_text;
messages.appendChild(messageElem);
}
ws.onmessage = function(e) {
var data = JSON.parse(e.data);
nickname = data.nickname;
appendLog(data.type, data.nickname, data.message);
console.log("ID: [%s] = %s", data.id, data.message);
}
ws.onclose = function(e) {
appendLog("Connection closed");
console.log("Connection closed");
}
function sendMessage() {
var messageField = document.getElementById('message');
if(ws.readyState === WebSocket.OPEN) {
ws.send(messageField.value);
}
messageField.value = '';
messageField.focus();
}
function disconnect() {
ws.close();
}
</script>
</head>
<body lang="en">
<div class="vertical-center">
<div class="container">
<ul id="messages" class="list-unstyled">
</ul>
<hr/>
<form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
<div class="form-group">
<input class="form-control" type="text" id="message" name="message"
placeholder="Type your text here" value="" autofocus/>
</div>
<button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">Send Message</button>
</form>
</div><!-- end of vertial -->
</div><!-- end container -->
<script src="http://bit.ly/cdn-bootstrap-js"></script>
</body>
</html>