Nouvelles fonctionnalités HTML5 WebSocket

1. Présentation

Le protocole HTTP est un protocole sans étatLe serveur lui-même n'a pas la capacité d'identifier le client et doit s'appuyer sur des mécanismes externes, tels quesession et cookie pour maintenir une conversation avec un client spécifique. Cela entraîne certains inconvénients, en particulier dans les situations où le serveur et le client doivent échanger continuellement des données (comme par exemple le chat en ligne). Pour résoudre ce problème, HTML5 propose l'API WebSocket du navigateur.

La fonction principale de WebSocket est de permettre une communication full-duplex entre le serveur et le client. Par exemple, le protocole HTTP, c'est un peu comme envoyer un e-mail, et vous devez attendre que l'autre partie réponde après l'avoir envoyé ; WebSocket, c'est comme passer un appel téléphonique, le serveur et le client peuvent s'envoyer des données en même temps ; en même temps, et il existe un canal de données ouvert en permanence entre eux.

Le protocole WebSocket peut remplacer complètement la méthode Ajax et être utilisé pour envoyer du texte et des données binaires au serveur, et il n'y a pas de « même restriction de domaine ».

WebSocket n'utilise pas le protocole HTTP, mais son propre protocole. La requête WebSocket envoyée par le navigateur ressemble à ce qui suit :

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

Les informations d'en-tête ci-dessus montrent qu'il existe un en-tête HTTP pour la mise à niveau. Le protocole HTTP1.1 stipule que les informations d'en-tête Upgrade indiquent le passage du protocole de communication de HTTP1.1 au protocole spécifié par l'élément. « Connexion : mise à niveau » signifie que le navigateur demande au serveur de passer au protocole webSocket si possible. L'origine est utilisée pour vérifier si le nom de domaine du navigateur se situe dans la plage d'autorisations du serveur. Sec-WebSocket-Key est la clé utilisée pour le protocole de prise de contact, qui est une chaîne aléatoire de 16 octets codée en base64 .

La réponse WebSocket du serveur est :

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

Le serveur utilise également "Connexion : Mise à niveau" pour informer le navigateur que le protocole doit être modifié. Sec-WebSocket-Accept signifie que le serveur ajoute la chaîne "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" après la chaîne Sec-WebSocket-Key fournie par le navigateur, puis prend le hash<🎜 de sha-1 >valeur. Le navigateur vérifiera cette valeur pour prouver qu'il s'agit bien du serveur cible qui a répondu à la requête webSocket. Sec-WebSocket-Location indique l'URL WebSocket de la communication.

Remarque : Le protocole WebSocket est représenté par ws. A cela s’ajoute le protocole wss, qui représente le protocole crypté WebSocket et correspond au protocole HTTPs.

Une fois la poignée de main terminée, le protocole WebSocket se trouve au-dessus du protocole TCP et commence à transmettre des données.

Le protocole WebSocket nécessite la prise en charge du serveur. Actuellement, l'implémentation la plus populaire est socket.io basée sur

node.js Pour plus d'implémentations, veuillez vous référer à Wikipedia. En ce qui concerne le navigateur, actuellement tous les navigateurs grand public prennent en charge le protocole WebSocket (y compris IE10+). Les seules exceptions sont Opera Mini et le navigateur Android sur le téléphone mobile.

2. Client

Le côté navigateur gère le protocole WebSocket, qui n'est rien de plus que trois choses :

• Établir une connexion et se déconnecter

• Envoi de données et réception de données

• Gestion des erreurs

2.1 Établissement et déconnexion

Tout d'abord, le client doit vérifier si le navigateur prend en charge WebSocket en vérifiant si l'objet window possède l'attribut WebSocket

.

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

Ensuite, commencez à établir une connexion avec le serveur (on suppose que le serveur est le port 1740 de la machine locale et que le protocole ws doit être utilisé).

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

Une fois la connexion établie, l'instance WebSocket objet (c'est-à-dire la connexion dans le code ci-dessus) a un attribut readyState, qui représente l'état actuel et peut prendre 4 valeurs :

• 0 : Connexion

• 1 : Connexion réussie

• 2 : Fermeture

• 3 : La connexion est fermée

Une fois le protocole de prise de contact réussi, readyState passe de 0 à 1 et le L'événement open

est déclenché, vous pouvez alors envoyer des informations au serveur. On peut préciser la fonction de rappel de l'événement ouvert.

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

Close WebSocket déclenchera l'événement de fermeture.

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 Envoi et réception de données

Une fois la connexion établie, le client envoie des données au serveur via la méthode d'envoi.

connection.send(message);

En plus d'envoyer des chaînes, vous pouvez également utiliser des objets Blob ou ArrayBuffer pour envoyer des données binaires.

//使用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事件的回调函数。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!