-
-
Notifications
You must be signed in to change notification settings - Fork 339
/
home.jsp
111 lines (96 loc) · 3.54 KB
/
home.jsp
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<%--<meta http-equiv="X-UA-Compatible" content="chrome=1"/>--%>
<meta http-equiv="cache-control" content="no-cache"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/jquery-2.0.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/atmosphere.js"></script>
<script type="text/javascript">
var wsApi = {
connectedEndpoint:null,
callbackAdded:false,
incompleteMessage:"",
subscribe:function () {
function callback(response) {
if (response.transport != 'polling' && response.state == 'messageReceived') {
if (response.status == 200) {
var data = response.responseBody;
try {
chatApi.update(data);
} catch (err) {
console.log(err);
}
}
}
}
/* transport can be : long-polling, streaming or websocket */
this.connectedEndpoint = atmosphere.subscribe('${pageContext.request.contextPath}/websockets',
!this.callbackAdded ? callback : null,
atmosphere.request = {transport:'websocket', logLevel:'none'});
callbackAdded = true;
},
send:function (message) {
console.log("Sending message");
console.log(message);
this.connectedEndpoint.push(JSON.stringify(message))
},
unsubscribe:function () {
atmosphere.unsubscribe();
}
};
var chatApi = {
update:function (data) {
var $chat = $("#chat");
$("<li></li>").text(data).prependTo($chat);
}
};
$(function () {
wsApi.subscribe();
var currentChannel = null;
$("#join").click(function () {
if (currentChannel !== null) {
wsApi.send({"type":"unsubscribe", "channel":currentChannel});
}
var channel = $("#channel").val();
wsApi.send({"type":"subscribe", "channel":channel});
currentChannel = channel;
});
$("#leave").click(function () {
wsApi.send({"type":"unsubscribe", "channel":currentChannel});
currentChannel = null;
});
$("#subscribe").click(function () {
wsApi.subscribe();
});
$("#unsubscribe").click(function () {
wsApi.unsubscribe();
});
});
</script>
<style type='text/css'>
div {
border: 0px solid black;
}
input#topic {
width: 14em;
background-color: #e0f0f0;
}
div.hidden {
display: none;
}
span.from {
font-weight: bold;
}
span.alert {
font-style: italic;
}
</style>
</head>
<body>
Channel: <input type="text" id="channel" name="channel"/>
<input type="button" id="join" value="Join"/>
<input type="button" id="leave" value="Leave"/>
<input type="button" id="subscribe" value="Subscribe WS"/>
<input type="button" id="unsubscribe" value="Unsubscribe WS"/>
<ul id="chat"></ul>
</body>
</html>