1. The following code implements a WebSocket connection, enter content in the text input box, click Send, go through the server, return the same content displayed below.
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>WebSocket</title>6 </Head>7 <Body>8 <H1>Echo Test</H1>9 <inputtype= "text"ID= "Sendtxt">Ten <ButtonID= "Sendbtn">Send</Button> One <DivID= "Recv"></Div> A <Scripttype= "Text/javascript"> - varWebSocket= NewWebSocket ("ws://echo.websocket.org/"); - Websocket.onopen= function(){ the Console.log ("WebSocket Open"); - document.getElementById ("recv"). InnerHTML= "Connected"; - } - Websocket.inclose= function(){ + Console.log ('WebSocket Close'); - } + Websocket.onmessage= function(e) { A Console.log (e.data); at document.getElementById ("recv"). InnerHTML=E.data; - } - document.getElementById ("sendbtn"). onclick= function(){ - vartxt=document.getElementById ("Sendtxt"). Value; - websocket.send (TXT); - } in - </Script> to </Body> + </HTML>
See the information below via the Chrom Browser developer tool:
(1) Click Network, select the WS bar, and select Filter.
(2) Refresh the page to see a WS connection.
(3) Click.
(4) You can also view the information entered and sent.
View WebSocket connection information in Chrome browser