Lines 17-54
Link Here
|
17 |
<!DOCTYPE html> |
17 |
<!DOCTYPE html> |
18 |
<html> |
18 |
<html> |
19 |
<head> |
19 |
<head> |
20 |
<title>Apache Tomcat WebSocket Examples: Echo</title> |
20 |
<title>Apache Tomcat WebSocket Examples: Echo</title> |
|
|
21 |
<style type="text/css"> |
22 |
#connect-container { |
23 |
float: left; |
24 |
width: 400px |
25 |
} |
26 |
|
27 |
#connect-container div { |
28 |
padding: 5px; |
29 |
} |
30 |
|
31 |
#console-container { |
32 |
float: left; |
33 |
margin-left: 20px; |
34 |
padding-left: 20px; |
35 |
width: 400px; |
36 |
} |
37 |
|
38 |
#console { |
39 |
border: 1px solid #CCCCCC; |
40 |
border-right-color: #999999; |
41 |
border-bottom-color: #999999; |
42 |
height: 170px; |
43 |
overflow-y: scroll; |
44 |
padding: 5px; |
45 |
width: 100%; |
46 |
} |
47 |
|
48 |
#console p { |
49 |
padding: 0; |
50 |
margin: 0; |
51 |
} |
52 |
</style> |
21 |
<script type="text/javascript"> |
53 |
<script type="text/javascript"> |
22 |
function echo(target) { |
54 |
var ws = null; |
23 |
if ("WebSocket" in window) { |
55 |
|
24 |
// TODO: Can we use relative URLs? |
56 |
function setConnected(connected) { |
25 |
var ws = new WebSocket(target); |
57 |
document.getElementById('connect').disabled = connected; |
26 |
ws.onopen = function() { |
58 |
document.getElementById('disconnect').disabled = !connected; |
27 |
ws.send("Connection opened"); |
59 |
document.getElementById('echo').disabled = !connected; |
28 |
alert("WebSocket connection opened."); |
|
|
29 |
ws.send("Here is a message!"); |
30 |
} |
60 |
} |
31 |
ws.onmessage = function(event) { |
61 |
|
32 |
alert("Received: " + event.data); |
62 |
function connect() { |
|
|
63 |
var target = document.getElementById('target').value; |
64 |
if (target == '') { |
65 |
alert('Please select server side connection implementation.'); |
66 |
return; |
33 |
} |
67 |
} |
|
|
68 |
if ('WebSocket' in window) { |
69 |
ws = new WebSocket(target); |
70 |
} else if ('MozWebSocket' in window) { |
71 |
ws = new MozWebSocket(target); |
72 |
} else { |
73 |
alert('WebSocket is not supported by this browser.'); |
74 |
return; |
75 |
} |
76 |
ws.onopen = function () { |
77 |
setConnected(true); |
78 |
log('Info: WebSocket connection opened.'); |
79 |
}; |
80 |
ws.onmessage = function (event) { |
81 |
log('Received: ' + event.data); |
82 |
}; |
34 |
ws.onclose = function() { |
83 |
ws.onclose = function () { |
35 |
alert("WebSocket connection closed."); |
84 |
setConnected(false); |
|
|
85 |
log('Info: WebSocket connection closed.'); |
86 |
}; |
36 |
} |
87 |
} |
37 |
// TODO: Extend with a text box for users to enter data |
88 |
|
|
|
89 |
function disconnect() { |
90 |
if (ws != null) { |
91 |
ws.close(); |
92 |
ws = null; |
93 |
} |
94 |
setConnected(false); |
95 |
} |
96 |
|
97 |
function echo() { |
98 |
if (ws != null) { |
99 |
var message = document.getElementById('message').value; |
100 |
log('Sent: ' + message); |
101 |
ws.send(message); |
38 |
} else { |
102 |
} else { |
39 |
alert("WebSocket is not supported by this browser."); |
103 |
alert('WebSocket connection not established, please connect.'); |
40 |
} |
104 |
} |
41 |
} |
105 |
} |
|
|
106 |
|
107 |
function updateTarget(target) { |
108 |
document.getElementById('target').value = 'ws://' + window.location.host + target; |
109 |
} |
110 |
|
111 |
function log(message) { |
112 |
var console = document.getElementById('console'); |
113 |
var p = document.createElement('p'); |
114 |
p.style.wordWrap = 'break-word'; |
115 |
p.innerHTML = message; |
116 |
console.appendChild(p); |
117 |
while (console.childNodes.length > 25) { |
118 |
console.removeChild(console.firstChild); |
119 |
} |
120 |
console.scrollTop = console.scrollHeight; |
121 |
} |
42 |
</script> |
122 |
</script> |
43 |
</head> |
123 |
</head> |
44 |
<body> |
124 |
<body> |
45 |
<div id="echoStreamTest"> |
125 |
<noscript><h1>Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable |
46 |
<a href="javascript:echo('ws://localhost:8080/examples/websocket/echoStream')"> |
126 |
Javascript and reload this page!</h1></noscript> |
47 |
Start echo example using streams on the server side</a> |
127 |
<div> |
|
|
128 |
<div id="connect-container"> |
129 |
<div> |
130 |
<span>Connect using:</span> |
131 |
<!-- echo example using streams on the server side --> |
132 |
<input id="radio1" type="radio" name="group1" value="/examples/websocket/echoStream" |
133 |
onclick="updateTarget(this.value);"> <label for="radio1">streams</label> |
134 |
<!-- echo example using messages on the server side --> |
135 |
<input id="radio2" type="radio" name="group1" value="/examples/websocket/echoMessage" |
136 |
onclick="updateTarget(this.value);"> <label for="radio2">messages</label> |
48 |
</div> |
137 |
</div> |
49 |
<div id="echoStreamMessage"> |
138 |
<div> |
50 |
<a href="javascript:echo('ws://localhost:8080/examples/websocket/echoMessage')"> |
139 |
<input id="target" type="text" size="40" style="width: 350px"/> |
51 |
Start echo example using messages on the server side</a> |
140 |
</div> |
|
|
141 |
<div> |
142 |
<button id="connect" onclick="connect();">Connect</button> |
143 |
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button> |
144 |
</div> |
145 |
<div> |
146 |
<textarea id="message" style="width: 350px">Here is a message!</textarea> |
147 |
</div> |
148 |
<div> |
149 |
<button id="echo" onclick="echo();" disabled="disabled">Echo message</button> |
150 |
</div> |
151 |
</div> |
152 |
<div id="console-container"> |
153 |
<div id="console"></div> |
154 |
</div> |
52 |
</div> |
155 |
</div> |
53 |
</body> |
156 |
</body> |
54 |
</html> |
157 |
</html> |