HTML(5) Code-Schreibregeln HTML5 Server-sent-Events

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出 HTTP 请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol]);

Der erste Parameter im obigen Code url gibt die URL der Verbindung an. Der zweite Parameter protocol ist optional und spezifiziert das akzeptierte Subprotokoll.

WebSocket-Eigenschaft

Nachstehend sind die Eigenschaften des WebSocket-Objekts aufgeführt. Angenommen, wir haben mit dem obigen Code das Socket-Objekt erstellt:

Eigenschaft	Beschreibung
Socket.readyState	Lesbare Eigenschaft readyState Stellt den Verbindungszustand dar und kann folgende Werte haben: 0 - Stellt dar, dass die Verbindung noch nicht hergestellt ist. 1 - Stellt dar, dass die Verbindung hergestellt ist und kommuniziert werden kann. 2 - Stellt dar, dass die Verbindung im Prozess des Schließens ist. 3 - Stellt dar, dass die Verbindung geschlossen ist oder dass die Verbindung nicht geöffnet werden kann.
Socket.bufferedAmount	Lesbare Eigenschaft bufferedAmount Bereits in die Warteschlange durch send() eingefügt, aber noch nicht gesendete UTF-8 Text-Byte-Anzahl.

WebSocket-Ereignis

Nachstehend sind die Ereignisse des WebSocket-Objekts aufgeführt. Angenommen, wir haben mit dem obigen Code das Socket-Objekt erstellt:

Ereignis	Event-Handler	Beschreibung
open	Socket.onopen	Wird ausgelöst, wenn die Verbindung hergestellt wird
message	Socket.onmessage	Wird ausgelöst, wenn der Client Daten vom Server empfängt
error	Socket.onerror	Wird ausgelöst, wenn eine Kommunikation fehlschlägt
close	Socket.onclose	Wird ausgelöst, wenn die Verbindung geschlossen wird

WebSocket-Methode

Nachstehend sind die Methoden des WebSocket-Objekts aufgeführt. Angenommen, wir haben mit dem obigen Code das Socket-Objekt erstellt:

Methode	Beschreibung
Socket.send();	Daten über die Verbindung senden
Socket.close();	Verbindung schließen

WebSocket-Beispiel

Das WebSocket-Protokoll ist im Wesentlichen ein auf TCP basierendes Protokoll.

Um eine WebSocket-Verbindung herzustellen, muss der Client-Browser zunächst eine HTTP-Anfrage an den Server senden. Diese Anfrage unterscheidet sich von einer normalen HTTP-Anfrage, da sie zusätzliche Header-Informationen enthält. Der zusätzliche Header "Upgrade: WebSocket" zeigt an, dass es sich um eine Anfrage zur Protokollaktualisierung handelt. Der Server analysiert diese zusätzlichen Header-Informationen und sendet daraufhin eine Antwort zurück an den Client. Die WebSocket-Verbindung zwischen Client und Server wird daraufhin hergestellt, und beide Seiten können über diesen Verbindungskanal Informationen frei übertragen. Diese Verbindung bleibt bestehen, bis eine Seite der Verbindung aktiv schließt.

客户端的 HTML 和 JavaScript

目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试示例： Chrome, Mozilla, Opera 和 Safari。

w3codebox_websocket.html 文件内容

示例

<!DOCTYPE HTML>
<html>
　　　<head>
　　　<meta charset="utf-8">
　　　<title>WebSocket 使用方法,基础教程网(oldtoolbag.com)</title>
　　　　
　　　　　　<script type="text/javascript">
　　　　　　　　　function WebSocketTest()
　　　　　　　　　{
　　　　　　　　　var x = document.getElementById("websocket");
　　　　　　　　　　　　if ("WebSocket" in window)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　x.innerHTML="您的浏览器支持 WebSocket!";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　//　打开一个 web socket
　　　　　　　　　　　　　　　var ws = new WebSocket("ws://echo.websocket.org");
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onopen = function()
　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　//　WebSocket 已连接上，使用 send() 方法发送数据
　　　　　　　　　　　　　　　　　　ws.send("发送数据");
　　　　　　　　　　　　　　　　　　x.innerHTML="数据发送中...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onmessage = function(evt)　
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　var received_msg = evt.data;
　　　　　　　　　　　　　　　　　　x.innerHTML="数据已接收,基础教程(oldtoolbag.com)...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onclose = function()
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　//　关闭 websocket
　　　　　　　　　　　　　　　　　　x.innerHTML="连接已关闭...";　
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　else
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　//　浏览器不支持 WebSocket
　　　　　　　　　　　　　　　x.innerHTML="您的浏览器不支持 WebSocket!";
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　</script>
　　　　　　　　
　　　</head>
　　　<body>
　　　　　　　
　　　　　　<div id="sse">
　　　　　　　　　<input type="button" onclick="WebSocketTest()" value="启动 WebSocket">
　　　　　　</div>
　　　　　　<div id="websocket"></div>
　　　　　　
　　　</body>
</html>

Testen Sie es, um zu sehen ‹/›

Das Testergebnis ist wie folgt gezeigt:

Unterschiede zwischen WebSocket und Socket

Die siebeneinhalb Schichten der Softwarekommunikation sind unteren drei Schichten der Datenkommunikation zugewiesen, die oberen drei Schichten sind stärker dem Datenverarbeitung zugewiesen, die mittlere Übertragungsschicht ist eine Brücke zwischen den oberen und unteren Schichten, jede Schicht macht verschiedene Arbeiten, die oberen Protokolle sind von den unteren Protokollen abhängig. Auf der Grundlage dieses Konzepts der Kommunikationsstruktur.
Socket ist nicht wirklich ein Protokoll, sondern eine Anwendungsschicht und TCP/Die IP-Protokollfamilie ist eine Middleware für die Kommunikation, es ist eine Gruppe von Schnittstellen. Wenn zwei Hosts kommunizieren, organisiert Socket die Daten, um den angegebenen Protokollen zu entsprechen. TCP-Verbindungen sind stärker abhängig vom unteren IP-Protokoll, die IP-Verbindungen wiederum vom Unterbaugewerbe wie dem Link-Layer usw. abhängig.
WebSocket ist ein typisches applikationslayer-Protokoll.

Socket ist ein transportlayer-Protokoll
WebSocket ist ein applikationslayer-Protokoll

HTML(5) Code-Schreibregeln HTML5 Server-sent-Events

HTML5 Grundlagen-Tutorial

HTML5 API