HTML5編程之旅第3站 WebSockets

時間 2019-11-12

標籤 html5 html 編程之旅 websockets 欄目 HTML5 简体版

原文原文鏈接

本文主要研究HTML5 WebSockets的使用方法，它是HTML5中最強大的通訊功能，定義了一個全雙工的通訊信道，只需Web上的一個Socket便可進行通訊，能減小沒必要要的網絡流量並下降網絡延遲。HTML5 WebSockets能使數據從幾千字節減小到兩字節，延遲從150ms減小到50ms，而且完美淘汰傳統的Comet和Ajax輪詢（polling）、長輪詢（long-polling）以及流（streaming）解決方案。css

目前實時Web應用的實現方式，大部分是圍繞輪詢和其餘服務器端推送技術展開的，其中最著名的是Comet。Comet技術可讓服務器主動以異步方式向客戶端推送數據。html

使用輪詢時，瀏覽器按期發送HTTP請求，並隨即接收響應；使用長輪詢時，瀏覽器向服務器發送一個請求，服務器會在一段時間內將其保持在打開狀態；使用流解決方案時，瀏覽器會發送一個完整的HTTP請求，但服務器會發送並保持一個處於打開狀態的響應，該響應持續更新並沒有限期處於打開狀態。git

上述的三個方法，在發送實時數據時都會涉及到HTTP請求和響應包頭，且包含大量額外的、沒必要要的報頭數據，會形成傳輸延遲。web

1、解讀HTML5 WebSockets編程

一、WebSocket握手瀏覽器

爲了創建WebSocket通訊，客戶端和服務器在初始握手時，將HTTP協議升級到WebSocket協議。一旦鏈接創建成功，就能夠在全雙工模式下在客戶端和服務器之間來回傳送WebSocket消息。安全

注：在網絡中，每一個消息以0x00字節開頭，以0xFF結尾，中間數據採用UTF-8編碼格式。服務器

二、WebSocket接口websocket

除了對WebSocket協議的定義以外，還定義了用於JavaScript應用程序的WebSocket接口。網絡

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鏈接。

2、HTML5 WebSockets API

本節討論HTML5 WebSockets的使用方法

一、檢測瀏覽器是否支持

經過window.WebSocket來判斷瀏覽器是否支持。

二、API的基本用法

a. WebSocket對象的建立以及與WebSocket服務器的鏈接

url = "ws://localhost:8080/echo";

ws = new WebSocket(url);

上述兩行代碼也能夠合併爲一行代碼：

ws = new WebSocket("ws://localhost:8080/echo");

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");

3、HTML5 WebSockets 應用示例

本節將結合前面講述的Geolocation接口來建立一個直接在Web頁面中計算距離的應用。

一、編寫HTML文件

<!DOCTYPE html>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>HTML5 WebSocket / Geolocation 追蹤器</title>

		<link rel="stylesheet" href="styles.css">

	</head>

	<body onload="loadDemo()">

		<h1>HTML5 WebSocket / Geolocation 追蹤器</h1>

		<div><strong>Geolocation</strong>: <p id="geoStatus">你的瀏覽器不支持HTML5 Geolocation</p></div>

		<div><strong>WebSocket</strong>: <p id="socketStatus">你的瀏覽器不支持HTML5 Web Sockets</p></div>

	</body>

</html>

二、添加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));

		}

	}

}

三、添加Geolocation代碼

var geo;

if(navigator.geolocation){

	geo = navigator.geolocation;

	updateGeolocationStatus("瀏覽器支持HTML5 Geolocation");

}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次

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);

}

四、合併全部內容

<!DOCTYPE html>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>HTML5 WebSocket / Geolocation 追蹤器</title>

		<link rel="stylesheet" href="styles.css">

	</head>

	<body onload="loadDemo()">

		<h1>HTML5 WebSocket / Geolocation 追蹤器</h1>

		<div><strong>Geolocation</strong>: <p id="geoStatus">你的瀏覽器不支持HTML5 Geolocation</p></div>

		<div><strong>WebSocket</strong>: <p id="socketStatus">你的瀏覽器不支持HTML5 Web Sockets</p></div>

		</body>

	<script>

		//WebSocket的引用

		var ws;

		//爲該會話生成的惟一隨機的ID

		var myId = Math.floor(100000*Math.random());

		//當前顯示的行數

		var rowCount;

		function updateSocketStatus(message){

			document.getElementById("socketStatus").innerHTML = message;

		}

		function updateGeolocationStatus(message){

			document.getElementById("geoStatus").innerHTML = message;

		}

		function loadDemo(){

		//確保瀏覽器支持WebSocket

			if(window.WebSocket){

				url = "ws://localhost:8080";//broadcast WebSocket服務器位置

				ws = new WebSocket(url);

				ws.onopen = function(){

				updateSocketStatus("鏈接已創建");

			}

			ws.onmessage = function(e){

				updateSocketStatus("更新位置數據：" + dataReturned(e.data));

			}

		}

		var geo;

		if(navigator.geolocation){

			geo = navigator.geolocation;

			updateGeolocationStatus("瀏覽器支持HTML5 Geolocation");

		}

		geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次

		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);

		}

		function sendMyLocation(newLocation){

			if(ws){

				ws.send(newLocation)

			}

		}

		function dataReturned(locationData){

			var allData = JSON.parse(locationData);

			var incomingId = allData[1];

			var incomingLat = allData[2];

			var incomingLong = allData[3];

			var incomingRow = document.getElementById(incomingId);

			if(!incomingRow){

				incomingRow = document.getElementById("div");

				incomingRow.setAttribute("id",incomingId);

				incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount;

				rowCount++;

				document.body.appendChild(incomingRow);

			}

			incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " +

			                                incomingLat + " \\ Lon: " +

			                                incomingLong;

			return incomingRow.userText;

		}

		function handleLocationError(error){

			switch(error.code){

				case 0:

				  updateGeolocationStatus("檢索位置信息出錯: " + error.message);

				  break;

				case 1:

				  updateGeolocationStatus("用戶阻止獲取位置信息。");

				  break;

				case 2:

				  updateGeolocationStatus("瀏覽器不能檢測你的位置信息: " + error.message);

				  break;

				case 3:

				  updateGeolocationStatus("瀏覽器檢索位置信息超時。");

				  break;

			}
		}

	</script>

</html>

注意：上述代碼的運行須要一個額外服務器的支持，在此把原書裏提供的使用Python寫的服務器文件附上，關於如何運行Python，請參考網上其餘資料。

本文的源碼請從http://git.oschina.net/niweiwei/HTML5/tree/master/websocket上進行下載。