標籤：
WebSocket是為解決用戶端與服務端即時通訊而產生的技術。
介紹它是什麼的廢話不多說了,直接說怎麼用:
用戶端:
1.建立一個 EventSource 對象
var es = new EventSource(url)
其中,url參數是必填的,傳入需要建立通訊的後台檔案地址
2.指定事件回調
EventSource的執行個體可以指定以下三個事件回調:
(1).onopen: 串連建立成功
es.onopen=function(e){ //串連建立成功後執行的內容 }
(2).onmessage: 接收到資料
es.onmessage=function(e){ //接收到資料後執行的內容.e.data就是接收到的資料 console.log(e.data) }
(3).onerror: 串連失敗
es.onopen=function(e){ //串連建立失敗執行的內容 }
伺服器端:
設定回應標頭: Content-Type:text/event-stream
下面舉個簡單的栗子,伺服器端每秒發送當前的時間到用戶端:
index.html:
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="script.js"></script></head><body> <div id="zt"></div> <h3>目前時間:</h3> <div id="date"></div></body></html><div id="zt"></div>用來存放串連狀態
script.js:
(function(){ var status,date; var serverUrl = ‘socket.php‘; window.onload = function(){ status = document.getElementById(‘zt‘); date = document.getElementById(‘date‘); connect(); }; function connect() { status.innerHTML = ‘正在創立串連‘; var es = new EventSource(serverUrl); es.onopen = openCallback; es.onerror = errorCallback; es.onmessage = messageCallback; } function openCallback(e) { status.innerHTML = ‘已串連‘ } function errorCallback(e) { status.innerHTML = ‘串連錯誤‘ } function messageCallback(e) { date.innerHTML = e.data }})();
說明:
建立一個EventSource對象,傳入socket.php作為參數.socket.php就是建立通訊的後台檔案.
分別執行onopen回調,onmessage回調,onerror回調,將對應的串連狀態和接收到的資料顯示在頁面中.
socket.php:
<?phpheader(‘Content-Type:text/event-stream‘);for($i = 0; $i<10; $i++) { date_default_timezone_set("Asia/Shanghai"); echo ‘data:‘.date(‘Y-m-d H-i-s‘); echo "\n\n"; @ob_flush();@flush(); sleep(1);}?>
設定回應標頭Content-Type為text/event-stream
每隔一秒發送一次目前時間.
這樣就建立了一個最簡單的websocket應用.
源碼地址: https://github.com/OOP-Code-Bunny/html5/tree/master/websocket
HTML5-WebSocket技術學習(1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
