HTML5下伺服器與客戶端的4種通訊方式
阿新 • • 發佈：2019-01-25
1）form表單提交方式，適合訪問量不大，對使用者體驗要求不高的web系統開發，或者頁面整體重新整理無傷大雅的場合，通訊方向是客戶端提交給服務端，是客戶端主動發起；
2）Ajax方式，特點是使用者體驗好，無需頁面整體重新整理，對伺服器壓力也小，有利於客戶端和服務端的解耦，也是目前廣為使用的一種客戶端服務端互動方式，它也是通過客戶端發起請求，服務端接受處理，通訊方向和form表單相同；
3）server-sent-event,它是服務端主動向客戶端（瀏覽器）傳送資料，客戶端監聽並接受，然後處理，通訊方向也是單向的，但是和上面兩種相反，是服務端發起，客戶端接受，但是其應用層協議還是基於http的。
4）web socket，這是將以前服務端通訊的套接字原理實現在了瀏覽器上，使得瀏覽器和服務端可以相互發送訊息，通訊方向是雙向的，只要連線一建立，雙方都可以向對方傳送資料，無需哪一方先來後來，應用層協議基於WS協議。
上面第3第4由於是HTML5中新新增的功能，所以在很多老版的瀏覽器中（如IE6-IE8）還不支援，因此應用還不夠廣泛.
這裡主要實現的是第三種方式，即服務端推送事件，直接上程式碼
客戶端程式碼
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
(function()
{
var
source;
if
(!!window.EventSource) {
source
= new EventSource('http://localhost/server.php');
}
source.onmessage=function(e){
var
oSpan=document.createElement('span');
oSpan.innerHTML=e.data+"<br>";
var
oDiv=document.querySelector("#div1");
oDiv.appendChild(oSpan);
}
})();
</script>
<div id="div1"></div>
</body>
</html>
|
以上程式碼構造一個eventSource物件，指向一個服務端後臺PHP檔案，這個物件是HTML5中的服務端推送事件API封裝物件，然後新增onmessage事件，用來監聽服務端傳送過來的訊息，服務端一有訊息傳送，就會執行這個事件的回撥函式，這裡讓它接收到資料之後將其包裹在span中並將這個span插入到div中。
服務端程式碼server.PHP
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php
header('Content-Type:
text/event-stream');
header('Cache-Control:
no-cache');
function sendMsg($id, $msg)
{
echo "id:
$id" .
PHP_EOL;
echo "data:
$msg" .
PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
for($i=0;$i<=1000;$i++)
{
$serverTime =
time();
sendMsg($serverTime, 'server
time: ' . date("h:i:s",
time()));
sleep(2);
}
|
首先要設定其傳送給客戶端http報文中的首部
| 1 |
header('Content-Type:
text/event-stream');<span
style="font-size:
14px;">這是服務端推送事件特定的MIME型別，</span>
|
| 1 |
header('Cache-Control:
no-cache');<span
style="font-size:
14px;">表示不讓瀏覽器進行快取</span><br><span
style="font-size:
14px;">然後每隔兩秒向客戶端傳送一個時間戳，客戶端接收到之後，顯示到div中，效果如下：</span>
|