1616-->
1717<!DOCTYPE html>
1818< html >
19- < head >
19+ < head >
2020 < title > Apache Tomcat WebSocket Examples: Echo</ title >
2121 < style type ="text/css ">
22- # connect-container {
23- float : left;
24- width : 400px
25- }
22+ # connect-container {
23+ float : left;
24+ width : 400px ;
25+ }
2626
27- # connect-container div {
28- padding : 5px ;
29- }
27+ # connect-container div {
28+ padding : 5px ;
29+ }
3030
31- # console-container {
32- float : left;
33- margin-left : 15px ;
34- width : 400px ;
35- }
31+ # console-container {
32+ float : left;
33+ margin-left : 15px ;
34+ width : 400px ;
35+ }
3636
37- # console {
38- border : 1px solid # CCCCCC ;
39- border-right-color : # 999999 ;
40- border-bottom-color : # 999999 ;
41- height : 170px ;
42- overflow-y : scroll;
43- padding : 5px ;
44- width : 100% ;
45- }
37+ # console {
38+ border : 1px solid # cccccc ;
39+ border-right-color : # 999999 ;
40+ border-bottom-color : # 999999 ;
41+ height : 170px ;
42+ overflow-y : scroll;
43+ padding : 5px ;
44+ width : 100% ;
45+ }
4646
47- # console p {
48- padding : 0 ;
49- margin : 0 ;
50- }
47+ # console p {
48+ padding : 0 ;
49+ margin : 0 ;
50+ }
5151 </ style >
5252 < script src ="http://cdn.sockjs.org/sockjs-0.3.min.js "> </ script >
5353 < script type ="text/javascript ">
54- var ws = null ;
54+ var ws = null ;
5555
56- function setConnected ( connected ) {
57- document . getElementById ( ' connect' ) . disabled = connected ;
58- document . getElementById ( ' disconnect' ) . disabled = ! connected ;
59- document . getElementById ( ' echo' ) . disabled = ! connected ;
60- }
56+ function setConnected ( connected ) {
57+ document . getElementById ( " connect" ) . disabled = connected ;
58+ document . getElementById ( " disconnect" ) . disabled = ! connected ;
59+ document . getElementById ( " echo" ) . disabled = ! connected ;
60+ }
6161
62- function connect ( ) {
63- var target = document . getElementById ( ' target' ) . value ;
64- ws = new SockJS ( target ) ;
65- ws . onopen = function ( ) {
66- setConnected ( true ) ;
67- log ( ' Info: WebSocket connection opened.' ) ;
68- } ;
69- ws . onmessage = function ( event ) {
70- log ( ' Received: ' + event . data ) ;
71- } ;
72- ws . onclose = function ( ) {
73- setConnected ( false ) ;
74- log ( ' Info: WebSocket connection closed.' ) ;
75- } ;
76- }
62+ function connect ( ) {
63+ var target = document . getElementById ( " target" ) . value ;
64+ ws = new SockJS ( target ) ;
65+ ws . onopen = function ( ) {
66+ setConnected ( true ) ;
67+ log ( " Info: WebSocket connection opened." ) ;
68+ } ;
69+ ws . onmessage = function ( event ) {
70+ log ( " Received: " + event . data ) ;
71+ } ;
72+ ws . onclose = function ( ) {
73+ setConnected ( false ) ;
74+ log ( " Info: WebSocket connection closed." ) ;
75+ } ;
76+ }
7777
78- function disconnect ( ) {
79- if ( ws != null ) {
80- ws . close ( ) ;
81- ws = null ;
82- }
83- setConnected ( false ) ;
78+ function disconnect ( ) {
79+ if ( ws != null ) {
80+ ws . close ( ) ;
81+ ws = null ;
8482 }
83+ setConnected ( false ) ;
84+ }
8585
86- function echo ( ) {
87- if ( ws != null ) {
88- var message = document . getElementById ( 'message' ) . value ;
89- log ( 'Sent: ' + message ) ;
90- ws . send ( message ) ;
91- } else {
92- alert ( 'WebSocket connection not established, please connect.' ) ;
93- }
86+ function echo ( ) {
87+ if ( ws != null ) {
88+ var message = document . getElementById ( "message" ) . value ;
89+ log ( "Sent: " + message ) ;
90+ ws . send ( message ) ;
91+ } else {
92+ alert (
93+ "WebSocket connection not established, please connect." ,
94+ ) ;
9495 }
96+ }
9597
96- function log ( message ) {
97- var console = document . getElementById ( 'console' ) ;
98- var p = document . createElement ( 'p' ) ;
99- p . style . wordWrap = 'break-word' ;
100- p . appendChild ( document . createTextNode ( message ) ) ;
101- console . appendChild ( p ) ;
102- while ( console . childNodes . length > 25 ) {
103- console . removeChild ( console . firstChild ) ;
104- }
105- console . scrollTop = console . scrollHeight ;
98+ function log ( message ) {
99+ var console = document . getElementById ( "console" ) ;
100+ var p = document . createElement ( "p" ) ;
101+ p . style . wordWrap = "break-word" ;
102+ p . appendChild ( document . createTextNode ( message ) ) ;
103+ console . appendChild ( p ) ;
104+ while ( console . childNodes . length > 25 ) {
105+ console . removeChild ( console . firstChild ) ;
106106 }
107+ console . scrollTop = console . scrollHeight ;
108+ }
107109 </ script >
108- </ head >
109- < body >
110- < noscript > < h2 style ="color: #ff0000 "> Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable
111- Javascript and reload this page!</ h2 > </ noscript >
112- < div >
113- < div id ="connect-container ">
110+ </ head >
111+ < body >
112+ < noscript > < h2 style ="color: #ff0000 ">
113+ Seems your browser doesn't support Javascript! Websockets rely on
114+ Javascript being enabled. Please enable Javascript and reload this page!
115+ </ h2 > </ noscript >
116+ < div >
117+ < div id ="connect-container ">
114118 < div >
115- < input id ="target " type ="text " size ="40 " style ="width: 350px " value ="/echo "/>
119+ < input
120+ id ="target "
121+ type ="text "
122+ size ="40 "
123+ style ="width: 350px "
124+ value ="/echo "
125+ />
116126 </ div >
117127 < div >
118- < button id ="connect " onclick ="connect(); "> Connect</ button >
119- < button id ="disconnect " disabled ="disabled " onclick ="disconnect(); "> Disconnect</ button >
128+ < button id ="connect " onclick ="connect(); "> Connect</ button >
129+ < button id ="disconnect " disabled ="disabled " onclick ="disconnect(); ">
130+ Disconnect
131+ </ button >
120132 </ div >
121133 < div >
122- < textarea id ="message " style ="width: 350px "> Here is a message!</ textarea >
134+ < textarea id ="message " style ="width: 350px "
135+ > Here is a message!</ textarea >
123136 </ div >
124137 < div >
125- < button id ="echo " onclick ="echo(); " disabled ="disabled "> Echo message</ button >
138+ < button id ="echo " onclick ="echo(); " disabled ="disabled ">
139+ Echo message
140+ </ button >
126141 </ div >
127- </ div >
128- < div id ="console-container ">
142+ </ div >
143+ < div id ="console-container ">
129144 < div id ="console "> </ div >
145+ </ div >
130146 </ div >
131- </ div >
132- </ body >
133- </ html >
147+ </ body >
148+ </ html >
0 commit comments