11<!DOCTYPE html>
22< html lang ="en ">
3- < head >
4- < meta charset ="UTF-8 ">
3+ < head >
4+ < meta charset ="UTF-8 " / >
55 < title > http-proxy-middleware - WebSocket example</ title >
66 < style >
7- fieldset {
8- border : 0 ;
9- }
10- label {
11- display : inline-block;
12- width : 5em ;
13- vertical-align : top;
14- }
15- code {
16- background-color : # eee
17- }
7+ fieldset {
8+ border : 0 ;
9+ }
10+ label {
11+ display : inline-block;
12+ width : 5em ;
13+ vertical-align : top;
14+ }
15+ code {
16+ background-color : # eee
17+ }
1818 </ style >
19- </ head >
20-
21- < body >
19+ </ head >
2220
21+ < body >
2322 < h2 > WebSocket demo</ h2 >
2423
25- < p >
26- Proxy < code > ws://localhost:3000</ code > to < code > ws://echo.websocket.org</ code >
27- </ p >
24+ < p > Proxy < code > ws://localhost:3000</ code > to < code > ws://echo.websocket.org</ code > </ p >
2825
2926 < fieldset id ="configuration ">
30- < p >
31- < label for ="location "> location:</ label >
32- < input id ="location " type ="text " value ="ws://localhost:3000 ">
33- < button id ="connectBtn "> connect</ button >
34- < button id ="disconnectBtn " disabled ="disabled "> disconnect</ button >
35- </ p >
27+ < p >
28+ < label for ="location "> location:</ label >
29+ < input id ="location " type ="text " value ="ws://localhost:3000 " / >
30+ < button id ="connectBtn "> connect</ button >
31+ < button id ="disconnectBtn " disabled ="disabled "> disconnect</ button >
32+ </ p >
3633 </ fieldset >
3734 < fieldset id ="messaging " disabled ="disabled ">
38- < p >
39- < label for ="message "> message:</ label >
40- < input type ="text " id ="message " value ="Hello WebSocket ">
41- < button id ="sendBtn "> send</ button >
42- </ p >
43- < p >
44- < label for ="logger "> log:</ label >
45- < textarea id ="logger " cols ="30 " rows ="10 "> </ textarea >
46- </ p >
35+ < p >
36+ < label for ="message "> message:</ label >
37+ < input type ="text " id ="message " value ="Hello WebSocket " / >
38+ < button id ="sendBtn "> send</ button >
39+ </ p >
40+ < p >
41+ < label for ="logger "> log:</ label >
42+ < textarea id ="logger " cols ="30 " rows ="10 "> </ textarea >
43+ </ p >
4744 </ fieldset >
4845
4946 < script >
50- window . onload = function ( ) {
47+ window . onload = function ( ) {
5148 // elements
5249 const configuration = document . getElementById ( 'configuration' ) ;
53- const location = document . getElementById ( 'location' ) ;
54- const connectBtn = document . getElementById ( 'connectBtn' ) ;
50+ const location = document . getElementById ( 'location' ) ;
51+ const connectBtn = document . getElementById ( 'connectBtn' ) ;
5552 const disconnectBtn = document . getElementById ( 'disconnectBtn' ) ;
56- const messaging = document . getElementById ( 'messaging' ) ;
57- const message = document . getElementById ( 'message' ) ;
58- const sendBtn = document . getElementById ( 'sendBtn' ) ;
59- const logger = document . getElementById ( 'logger' ) ;
53+ const messaging = document . getElementById ( 'messaging' ) ;
54+ const message = document . getElementById ( 'message' ) ;
55+ const sendBtn = document . getElementById ( 'sendBtn' ) ;
56+ const logger = document . getElementById ( 'logger' ) ;
6057
6158 // ws
6259 let socket ;
6360
64- connectBtn . onclick = ( ) => { connect ( ) ; }
65- disconnectBtn . onclick = ( ) => { disconnect ( ) ; }
66- sendBtn . onclick = ( ) => { sendMessage ( message . value ) ; }
61+ connectBtn . onclick = ( ) => {
62+ connect ( ) ;
63+ } ;
64+ disconnectBtn . onclick = ( ) => {
65+ disconnect ( ) ;
66+ } ;
67+ sendBtn . onclick = ( ) => {
68+ sendMessage ( message . value ) ;
69+ } ;
6770
6871 function connect ( ) {
6972 setupSocket ( location . value ) ;
@@ -79,35 +82,37 @@ <h2>WebSocket demo</h2>
7982 function sendMessage ( val ) {
8083 log ( 'SEND: ' + val ) ;
8184 socket . send ( val ) ;
82- } ;
85+ }
8386
8487 function setupSocket ( url ) {
8588 socket = new WebSocket ( url ) ;
8689 socket . addEventListener ( 'open' , ( ) => {
8790 log ( 'CONNECTED' ) ;
88- } )
91+ } ) ;
8992 socket . addEventListener ( 'close' , ( ) => {
9093 log ( 'DISCONNECTED' ) ;
91- } )
92- socket . addEventListener ( 'error' , ( ) => { log ( 'SOCKET ERROR OCCURED' ) ; } )
93- socket . addEventListener ( 'message' , ( msg ) => { log ( 'RECEIVED:' + msg . data ) ; } )
94+ } ) ;
95+ socket . addEventListener ( 'error' , ( ) => {
96+ log ( 'SOCKET ERROR OCCURED' ) ;
97+ } ) ;
98+ socket . addEventListener ( 'message' , ( msg ) => {
99+ log ( 'RECEIVED:' + msg . data ) ;
100+ } ) ;
94101 }
95102
96- function log ( message ) {
103+ function log ( message ) {
97104 logger . value = logger . value + message + '\n' ;
98105 logger . scrollTop = logger . scrollHeight ; // scroll to bottom
99106 }
100107
101108 function toggleControls ( ) {
102- [ connectBtn , disconnectBtn , messaging ] . forEach ( el => toggleEnabled ( el ) )
109+ [ connectBtn , disconnectBtn , messaging ] . forEach ( ( el ) => toggleEnabled ( el ) ) ;
103110 }
104111
105112 function toggleEnabled ( el ) {
106- el . disabled = ( el . disabled ) ? false : true ;
113+ el . disabled = el . disabled ? false : true ;
107114 }
108-
109- }
115+ } ;
110116 </ script >
111-
112- </ body >
117+ </ body >
113118</ html >
0 commit comments