inotgo.com

Step 1 : effect   
Step 2 : WebSocket concept   
Step 3 : advantage   

As shown in the figure , When the server has a new bitcoin price , The browser can see the latest data immediately .
<!DOCTYPE html> <html> <head> <title> use WebSocket Get the bitcoin price in real time </title> </head> <body> <div style="width:400px;margin:20px auto;border:1px solid lightgray;padding:20px;text-align:center;"> Current bitcoin price :¥<span style="color:#FF7519" id="price">10000</span> <div style="font-size:0.9em;margin-top:20px"> The more people you see , The higher the price , There are currently a total of <span id="total">1</span> Personal online </div> <div style="color:silver;font-size:0.8em;margin-top:20px"> The above price is purely fictitious , If similar ,so what?</div> </div> </body> <script type="text/javascript"> var websocket = null; // Determine whether the current browser supports WebSocket if ('WebSocket' in window) { websocket = new WebSocket("wss://inotgo.com/ws/bitcoinServer"); // Callback method for successful connection establishment websocket.onopen = function () { websocket.send(" Client link succeeded "); } // Callback method for receiving message websocket.onmessage = function (event) { setMessageInnerHTML(event.data); } // Callback method with connection error websocket.onerror = function () { alert("WebSocket Connection error "); }; // Callback method for connection closure websocket.onclose = function () { //alert("WebSocket Connection closed "); } // Listen for window closing events , When the window closes , Take the initiative to close websocket connect , Prevent the window from closing before the connection is disconnected ,server The end will throw an exception . window.onbeforeunload = function () { closeWebSocket(); } } else { alert(' Current browser Not support websocket') } // Display messages on Web pages function setMessageInnerHTML(innerHTML) { var bitcoin = eval("("+innerHTML+")"); document.getElementById('price').innerHTML = bitcoin.price; document.getElementById('total').innerHTML = bitcoin.total; } // close WebSocket connect function closeWebSocket() { websocket.close(); } </script> </html>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
stay WebSocket Before the concept comes out , If the page keeps showing the latest prices , Then you have to keep refreshing the page , Or use a paragraph js The code sends a message every few seconds asking the server for data .

And use WebSocket After Technology , When the server has new data , Will actively notify the browser . as effect As shown in , When the server has a new bitcoin price , The browser immediately receives the message .
1. Save bandwidth . Keep polling the server data in this way , Use http agreement ,head The information is great , The proportion of valid data is low , And use WebSocket Way , The header information is very small , The proportion of valid data is high .
2. No waste . Polling mode may poll 10 second , Just met the server data update , So before 9 It's all in vain , Because there is no change data . and WebSocket The server actively sends back , It's all new data .
3. Real time , Considering the server pressure , It is impossible to use polling for a short time interval , Otherwise, the server is under too much pressure , Therefore, the polling interval is relatively long , For a few seconds , Set more than ten seconds . and WebSocket It is actively pushed by the server , Real time is the highest


The official account of programming , Follow and get the latest tutorials and promotions in real time , thank you .


Q & A area    
2019-08-01 stationmaster websocket There's a problem , As soon as it comes out, it will report a connection error !
Daniel

As shown in the figure







The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




2019-01-04 websocket With parameters
dingdang

When sending a request ,HTTP If there are parameters , What should be done







The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




2018-08-12 The webmaster is not an invisible tyrant




Please... Before asking questions land
The question has been submitted successfully , Auditing . Please My question Check the question record at , thank you
about Tools and Middleware -WebSocket- demonstration Your questions

Try to provide Screenshot code and Abnormal information , Help to analyze and solve problems . You can also enter this station QQ Group communication : 496725845
Ask questions and try to provide complete code , Environment description , The more conducive to the recurrence of the problem , The faster your question can be answered .
Have questions about the code in the tutorial , Please provide which step , Which line is in doubt , This makes it easy to quickly locate the problem , Improve the speed at which questions are answered
In the thousands of questions that already exist , A considerable proportion , Because of the use of and webmaster Different versions of the development environment Resulting in , For example jdk, eclpise, idea, mysql,tomcat Wait, the version of the software is inconsistent .
Please use the same version as the webmaster , You can save yourself a lot of learning time . The webmaster sorted out the software versions used in teaching , It's all here , Convenient for everyone to download : /k/helloworld/helloworld-version/1718.html

Upload screenshot