HTTP無狀態：
Ajax只能實現用戶和服務器單方面響應（單工機制）.
如果設置為長輪詢（ajax設置多少秒進行一次請求，時間間隙可能會有延遲，且浪費資源）
如果設置為長連接（客戶端請求一次，服務器保持持續鏈接，一旦有了新數據，就全部發送客戶端）
webScoket：
webSocket是響應客戶端和服務器端雙響應（全雙工機制）.
支持的瀏覽器有：Chrome4+、Firefox4+、IE10+（“+”包含本身）
支持的服務器有：Node0、Apache7.0.2、Nginx1.3
1. 采用webscoket - 節省資源
1 var websocket = null; 2 //判斷當前瀏覽器是否支持WebSocket
3 if ('WebSocket' in window || window in WebSocket) { 4 //建立連接，這里的/websocket ，是ManagerServlet中開頭注解中的那個值
5 websocket = new WebSocket("ws://localhost:8080"); 6 } 7 else { 8 alert('當前瀏覽器 Not support websocket') 9 } 10 //連接發生錯誤的回調方法
11 websocket.onerror = function () { 12 setMessageInnerHTML("WebSocket連接發生錯誤"); 13 }; 14 //連接成功建立的回調方法
15 websocket.onopen = function () { 16 setMessageInnerHTML("WebSocket連接成功"); 17 } 18 //接收到消息的回調方法
19 websocket.onmessage = function (event) { 20 setMessageInnerHTML(event.data); 21 if (event.data == "1") { 22 location.reload(); 23 } 24 } 25 //連接關閉的回調方法
26 websocket.onclose = function () { 27 setMessageInnerHTML("WebSocket連接關閉"); 28 } 29 //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
30 window.onbeforeunload = function () { 31 closeWebSocket(); 32 } 33 //將消息顯示在網頁上
34 function setMessageInnerHTML(innerHTML) { 35 document.getElementById('message').innerHTML += innerHTML + '<br/>'; 36 } 37 //關閉WebSocket連接
38 function closeWebSocket() { 39 websocket.close(); 40 }
2.ajax(長輪詢) - 浪費服務器和客戶端資源
1 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
2 <script>
3 //每500ms使用ajax取一次數據
4 setTimeout(function () { 5 var fun = arguments.callee; 6 // 重復調用 - 500ms.
7 setTimeout(fun, 500); 8
9 // 這里寫ajax代碼.
10 console.log(fun, 'ajax執行了!'); 11
12 }, 500); 13 </script>
3.服務器長連接（具體由后台操作服務器執行.）
采用nodejs做的一個示例：
怎么使用（同一項目文件目錄下）：
npm i socket.io
index.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <input type="text" id="text" width="500">
13 <input type="button" value="發送消息" id="btn">
14
15 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
16 <script type="text/javascript">
17 var socket = io(); 18 document.getElementById('btn').onclick = function () { 19 socket.emit('program', document.getElementById('text').value); 20 } 21 socket.on('reply', function (msg) { 22 console.log(msg); 23 }); 24 </script>
25 </body>
26
27 </html>
node-server.js
1 const http = require('http'); 2 const fs = require('fs'); 3
4 const server = http.createServer(function (req, res) { 5 if (req.url == '/') { 6 fs.readFile('./index.html', function (err, data) { 7 res.end(data); 8 }); 9 } 10 }); 11
12 const io = require('socket.io')(server); 13 let number = 1; 14 io.on('connection', function (socket) { 15 console.log(number++ + '個客戶已連接...'); 16 socket.on('program', function (msg) { 17 console.log('接收的信息:' + msg); 18 socket.emit('reply', msg); 19 }) 20 }) 21
22 server.listen(8080, '127.0.0.1');
