Neue HTML5-Funktionen WebSocket

1. Übersicht

HTTPProtokoll ist ein zustandslosesProtokoll. Der Server selbst ist nicht in der Lage, den Client zu identifizieren und muss sich auf externe Mechanismen verlassen. wie Sitzung und Cookie, um ein Gespräch mit einem bestimmten Kunden aufrechtzuerhalten. Dies bringt einige Unannehmlichkeiten mit sich, insbesondere in Situationen, in denen Server und Client kontinuierlich Daten austauschen müssen (z. B. beim Online-Chat). Um dieses Problem zu lösen, schlägt HTML5 die WebSocket-API des Browsers vor.

Die Hauptfunktion von WebSocket besteht darin, eine Vollduplex-Kommunikation zwischen dem Server und dem Client zu ermöglichen. Das HTTP-Protokoll ähnelt beispielsweise dem Senden einer E-Mail, und Sie müssen darauf warten, dass die andere Partei nach dem Senden antwortet. WebSocket ist wie ein Telefonanruf. Der Server und der Client können sich gegenseitig Daten senden gleichzeitig, und es besteht ein ständig offener Datenkanal zwischen ihnen.

Das WebSocket-Protokoll kann die Ajax-Methode vollständig ersetzen und zum Senden von Text- und Binärdaten an den Server verwendet werden, und es gibt keine „gleiche Domänenbeschränkung“.

WebSocket verwendet nicht das HTTP-Protokoll, sondern ein eigenes Protokoll. Die vom Browser gesendete WebSocket-Anfrage sieht in etwa wie folgt aus:

GET / HTTP/1.1Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: nullSec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

Die Header-Informationen oben zeigen, dass es einen HTTP-Header für Upgrade gibt. Das HTTP1.1-Protokoll legt fest, dass die Upgrade-Header-Informationen den Wechsel des Kommunikationsprotokolls von HTTP1.1 auf das im Element angegebene Protokoll angeben. „Verbindung: Upgrade“ bedeutet, dass der Browser den Server benachrichtigt, wenn möglich ein Upgrade auf das webSocket-Protokoll durchzuführen. Mithilfe von Origin wird überprüft, ob der Browser-Domänenname innerhalb des Berechtigungsbereichs des Servers liegt. Sec-WebSocket-Key ist der für das Handshake-Protokoll verwendete Schlüssel, bei dem es sich um eine Base64-codierte 16-Byte-Zufallszeichenfolge handelt.

Die WebSocket-Antwort des Servers lautet:

HTTP/1.1 101 Switching ProtocolsConnection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=Sec-WebSocket-Origin: 
nullSec-WebSocket-Location: ws://example.com

Der Server verwendet außerdem „Verbindung: Upgrade“, um den Browser darüber zu informieren, dass das Protokoll geändert werden muss. Sec-WebSocket-Accept bedeutet, dass der Server die Zeichenfolge „258EAFA5-E914-47DA-95CA-C5AB0DC85B11“ nach der vom Browser bereitgestellten Sec-WebSocket-Key-Zeichenfolge hinzufügt und dann den HashWert. Der Browser überprüft diesen Wert, um zu beweisen, dass es sich tatsächlich um den Zielserver handelt, der auf die webSocket-Anfrage geantwortet hat. Sec-WebSocket-Location gibt die WebSocket-URL für die Kommunikation an.

Hinweis: Das WebSocket-Protokoll wird durch ws dargestellt. Darüber hinaus gibt es das wss-Protokoll, das das verschlüsselte WebSocket-Protokoll darstellt und dem HTTPs-Protokoll entspricht.

Nach Abschluss des Handshakes liegt das WebSocket-Protokoll über dem TCP-Protokoll und beginnt mit der Datenübertragung.

Das WebSocket-Protokoll erfordert Serverunterstützung. Derzeit ist socket.io basierend auf

node.js. Weitere Implementierungen finden Sie auf Wikipedia. Auf der Browserseite unterstützen derzeit alle gängigen Browser das WebSocket-Protokoll (einschließlich IE10+). Die einzigen Ausnahmen sind Opera Mini und der Android Browser auf dem Mobiltelefon.

2. Client

Die Browserseite verwaltet das WebSocket-Protokoll, bei dem es sich lediglich um drei Dinge handelt:

• Verbindung herstellen und trennen

• Senden von Daten und Empfangen von Daten

• Umgang mit Fehlern

2.1 Herstellen und Trennen

Zuerst muss der Client prüfen, ob der Browser WebSocket unterstützt, indem er prüft, ob das Fensterobjekt über das WebSocket-Attribut

verfügt.

if (window.WebSocket != undefined) {    // 支持}

Beginnen Sie dann mit dem Herstellen einer Verbindung mit dem Server (es wird davon ausgegangen, dass der Server der 1740-Port des lokalen Computers ist und das ws-Protokoll verwendet werden muss).

if (window.WebSocket != undefined) {    
var connection = new WebSocket('ws://localhost:1740');
}

Nachdem die Verbindung hergestellt wurde, verfügt das WebSocket-Instanz--Objekt (d. h. die Verbindung im obigen Code) über ein readyState-Attribut, das den aktuellen Status darstellt und kann 4 Werte annehmen:

• 0: Verbindung wird hergestellt

• 1: Verbindung erfolgreich

• 2: Schließen

• 3: Die Verbindung wird geschlossen

Nachdem das Handshake-Protokoll erfolgreich war, ändert sich readyState von 0 auf 1 und die Wenn das Ereignis open

ausgelöst wird, können Sie Informationen an den Server senden. Wir können die Rückruffunktion des offenen Ereignisses angeben.

connection.onopen = wsOpen;function wsOpen(event) {
    console.log('Connected');
}

Close WebSocket löst das Schließereignis aus.

connection.onclose = wsClose;function onClose(event) {    var wasClean = event.wasClean; //bool值，连接是否关闭了
    var code = event.code; //连接状态（数字），由服务端提供
    var reason = event.reason; //关闭原因，由服务端提供
    console.log('Closed');
}

connection.close();

2.2 Senden und Empfangen von Daten

Nachdem die Verbindung hergestellt wurde, sendet der Client Daten über die Sendemethode an den Server.

connection.send(message);

Zusätzlich zum Senden von Zeichenfolgen können Sie auch Blob- oder ArrayBuffer-Objekte verwenden, um Binärdaten zu senden.

//使用ArrayBuffer发送Canvas图像数据
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Unit8Array(img.data.length);for(var i = 0; i < img.data.length; i++) {
    binary[i] = img.data[i]
}
connection.send(binary.buffer);//使用Blob发送文件
var file = document.querySelector(&#39;input[type="file"]&#39;).files[0];
connection.send(file);

客户端收到服务器发送的数据，会触发message事件。可以通过定义message事件的回调函数，来处理服务端返回的数据。

connection.onmessage = wsMessage;
function wsMessage(event) {
    console.log(event.data);
}

上面代码的回调函数wsMessage的参数为事件对象evnet，该对象的data属性包含了服务器返回的数据。

2.3 处理错误

如果出现错误，浏览器会触发WebSocket实例对象的error事件。

connection.onerror = wsError;function wsError(event) {
    console.log('Error: ' + event.data);
}

3、服务器端

服务器端需要单独部署处理WebSocket的代码。下面用node.js搭建一个服务器环境。

var http = require('http');var server = http.createServer(function(request, response){});

假设监听1740端口。

server.listen(1740, function() {
    console.log((new Date()) + ' Server is listening on port 1740');
});

接着启动WebSocket服务器。这需要加载websocket库，如果没有安装，可以先使用命令安装。

var WebSocketServer = require('websocket').server;var wsServer = new WebSocketServer({
    httpServer: server
});

WebSocket服务器建立request事件的回调函数。

var connection;

wsServer.on('request', function(req){
    connect = req.accept('echo-protocol', req.origin);
});

上面代码的回调函数接受一个参数req，表示request请求对象。然后，在回调函数内部，建立WebSocket连接Connection。接着，就要对connection的message事件指定回调函数。

wsServer.on('request', function(r) {
    connection = req.accept('echo-protocol', req.origin);

    connection.on('message', function(message) {        
    var msgString = message.utf8Data;
        connection.sendUTF(msgString);
    });
});

最后，监听用户的disconnect事件。

connection.on('close', function(reasonCode, description) {
    console.log(connection.remoteAddress + ' disconnected');
});

4、Socket.io简介

Socket.io是目前最流行的WebSocket实现，包括服务器和浏览器两个部分。它不仅简化了接口，使得操作更容易，而且对于那些不支持WebSocket的浏览器，会自动降为Ajax连接，最大限度地保证了兼容性。

第一步，在服务器端的项目根目录下，安装socket.io模块。

npm install socket.io

第二步，在根目录下建立app.js，并写入以下代码（使定使用了Express框架）。

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(dirname + '/index.html');
});

上面代码表示，先建立并运行HTTP服务器。Socket.io的运行建立在HTTP服务器之上。

第三步，将Socket.io插入客户端网页。

<script src="/socket.io/socket.io.js"></script>

然后，在客户端脚本中，建立WebSocket连接。

var socket = io.connect('http://localhost');

由于本例假定WebSocket主机与客户端是同一台机器，所以connect方法的参数是http://localhost。接着，指定news事件（即服务器端发送news）的回调函数。

socket.on('news', function (data){
   console.log(data);
});

最后，用emit方法向服务器端发送信号，触发服务器端的anotherNews事件。

请注意：emit方法可以取代Ajax请求，而on方法指定的回调函数，也等同于Ajax的回调函数。

第四步，在服务器端的app.js中加入以下代码。

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('anotherNews', function (data) {
    console.log(data);
  });
});

上面代码的io.sockets.on方法指定connect事件（WebSocket连接建立）的回调函数。在回调函数中，用emit方法向客户端发送数据，触发客户端的news事件。然后，再用on方法指定服务器端anotherNews事件的回调函数。

Das obige ist der detaillierte Inhalt vonNeue HTML5-Funktionen WebSocket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!