復制代碼代碼如下: interface WebSocket{ readonly attribute DOMString URL; //就緒狀態 const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSED = 2; readonly attribute unsigned short readyState; readonly attribute unsigned short bufferedAmount; //網絡 attribute Function onopen; attribute Function onmessage; attribute Function onclose; boolean send(in DOMSString data); void close(); }; WebSocket implements EventTarget;
注意：ws://和wss://前綴分別表示WebSocket連接和安全的WebSocket連接。二、HTML5 WebSockets API本節討論HTML5 WebSockets的使用方法1、檢測瀏覽器是否支持通過window.WebSocket來判斷瀏覽器是否支持。2、API的基本用法a. WebSocket對象的創建以及與WebSocket服務器的連接 復制代碼代碼如下: url = "ws://localhost:8080/echo"; ws = new WebSocket(url); b. 添加事件監聽器WebSocket遵循異步編程模型，打開socket后，只需等待事件發生，而不需主動向服務器輪詢，因此需要添加回調函數來監聽事件。WebSocket對象有三個事件：open、close和message。當連接建立時觸發open事件，當收到消息時觸發message事件，當WebSocket連接關閉時觸發close事件。 復制代碼代碼如下: ws.onopen = function(){ log("open"); } ws.onmessage = function(){ log(e.data); } ws.onclose = function(){ log("closed"); } c. 發送消息當socket處于打開狀態（即調用onopen監聽程序之后，調用onclose監聽程序之前），可以使用send方法發送消息。ws.send( Hello World 三、HTML5 WebSockets 應用示例本節將結合前面講述的Geolocation接口來創建一個直接在Web頁面中計算距離的應用。1、編寫HTML文件 復制代碼代碼如下: !DOCTYPE html /p p html /p p head /p p meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /p p title HTML5 WebSocket / Geolocation 追蹤器 /title /p p link rel="stylesheet" href="styles.css" /p p /head /p p body onload="loadDemo()" /p p h1 HTML5 WebSocket / Geolocation 追蹤器 /h1 /p p div strong Geolocation /strong : p id="geoStatus" 你的瀏覽器不支持HTML5 Geolocation /p /div /p p div strong WebSocket /strong : p id="socketStatus" 你的瀏覽器不支持HTML5 Web Sockets /p /div /p p /body /p p /html 2、添加WebSocket代碼 復制代碼代碼如下: function loadDemo(){ //確保瀏覽器支持WebSocket if(window.WebSocket){ url = "ws://localhost:8080";//broadcast WebSocket服務器位置 ws = new WebSocket(url); ws.onopen = function(){ updateSocketStatus("連接已建立"); } ws.onmessage = function(e){ updateSocketeStatus("更新位置數據：" + dataReturned(e.data)); } } } 3、添加Geolocation代碼 復制代碼代碼如下: var geo; if(navigator.geolocation){ geo = navigator.geolocation; updateGeolocationStatus("瀏覽器支持HTML5 Geolocation"); } /p p geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次 /p p function updateLocation(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; var timestamp = position.timestamp; updateGeolocationStatus("位置更新時間：" + timestamp); var toSend = JSON.stringify([myId,latitude,longitude]); sendMyLocation(toSend); } 4、合并所有內容 復制代碼代碼如下: !DOCTYPE html /p p html /p p head /p p meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /p p title HTML5 WebSocket / Geolocation 追蹤器 /title /p p link rel="stylesheet" href="styles.css" /p p /head /p p body onload="loadDemo()" /p p h1 HTML5 WebSocket / Geolocation 追蹤器 /h1 /p p div strong Geolocation /strong : p id="geoStatus" 你的瀏覽器不支持HTML5 Geolocation /p /div /p p div strong WebSocket /strong : p id="socketStatus" 你的瀏覽器不支持HTML5 Web Sockets /p /div /p p /body /p p script /p p //WebSocket的引用 /p p var ws; /p p //為該會話生成的唯一隨機的ID /p p var myId = Math.floor(100000*Math.random()); /p p //當前顯示的行數 /p p var rowCount; /p p function updateSocketStatus(message){ /p p document.getElementById("socketStatus").innerHTML = message; /p p } /p p function updateGeolocationStatus(message){ /p p document.getElementById("geoStatus").innerHTML = message; /p p } /p p function loadDemo(){ /p p //確保瀏覽器支持WebSocket /p p if(window.WebSocket){ /p p url = "ws://localhost:8080";//broadcast WebSocket服務器位置 /p p ws = new WebSocket(url); /p p ws.onopen = function(){ /p p updateSocketStatus("連接已建立"); /p p } /p p ws.onmessage = function(e){ /p p updateSocketStatus("更新位置數據：" + dataReturned(e.data)); /p p } /p p } /p p var geo; /p p if(navigator.geolocation){ /p p geo = navigator.geolocation; /p p updateGeolocationStatus("瀏覽器支持HTML5 Geolocation"); /p p } /p p geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次 /p p function updateLocation(position){ /p p var latitude = position.coords.latitude; /p p var longitude = position.coords.longitude; /p p var timestamp = position.timestamp; /p p updateGeolocationStatus("位置更新時間：" + timestamp); /p p var toSend = JSON.stringify([myId,latitude,longitude]); /p p sendMyLocation(toSend); /p p } /p p function sendMyLocation(newLocation){ /p p if(ws){ /p p ws.send(newLocation) /p p } /p p } /p p function dataReturned(locationData){ /p p var allData = JSON.parse(locationData); /p p var incomingId = allData[1]; /p p var incomingLat = allData[2]; /p p var incomingLong = allData[3]; /p p var incomingRow = document.getElementById(incomingId); /p p if(!incomingRow){ /p p incomingRow = document.getElementById("div"); /p p incomingRow.setAttribute("id",incomingId); /p p incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount; /p p rowCount++; /p p document.body.appendChild(incomingRow); /p p } /p p incomingRow.innerHTML = incomingRow.userText + " // Lat: " + /p p incomingLat + " // Lon: " + /p p incomingLong; /p p return incomingRow.userText; /p p } /p p function handleLocationError(error){ /p p switch(error.code){ /p p case 0: /p p updateGeolocationStatus("檢索位置信息出錯: " + error.message); /p p break; /p p case 1: /p p updateGeolocationStatus("用戶阻止獲取位置信息。"); /p p break; /p p case 2: /p p updateGeolocationStatus("瀏覽器不能檢測你的位置信息: " + error.message); /p p break; /p p case 3: /p p updateGeolocationStatus("瀏覽器檢索位置信息超時。"); /p p break; /p p } } /p p /script /p p /html html教程
