Qu'est-ce que WebSocket ? Compréhension approfondie de WebSocket en HTML5

Qu'est-ce que WebSocket

WebSocketLe serveur et le client peuvent communiquer dans les deux sens et permettre une communication inter-domaines. Pris en charge par le mécanisme HTTP/1.1 de Upgrade, communication via les protocoles ws (non chiffrés) ou wss (cryptés)

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);

WebSocket en HTML5

HTML5Concentrez-vous uniquement sur le client<a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API<code><a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API</a> , et côté serveur, chaque langage implémente l'

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket 
socket.onopen = function(event){
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!');
  // 监听消息
  socket.onmessage = function(event){
    console.log('Client received a message',event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event){
    console.log('Client notified socket has closed',event);
  };
  // 关闭Socket.... 
  //socket.close()
};

événement
onclose onerror onmessage onopen

Attributs

• readyState : CONNECTING 0 OPEN 1 CLOSING 2 CLOSED 3

• binaryType : String Blob <a href="http://www.php.cn/wiki/58.html" target="_blank"> Tableau<code><a href="http://www.php.cn/wiki/58.html" target="_blank">Array</a>BufferBuffer

Compatibilité

Méthode 1 :
Si le client ne prend pas en charge WebSocket, alors vous peut utiliser plusieurs options candidates Flash Socket AJAX long-polling AJAX multipart streaming IFrame <a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON <code><a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON</a>P pollingP sondage

Méthode 2
Utilisez Socket.io pour lisser les différences. Cette bibliothèque peut interroger automatiquement le navigateur lorsque celui-ci ne prend pas en charge WebSocket. Utilisez la méthode de message push prise en charge par le navigateur pour vous connecter. La bibliothèque détectera également si la connexion est interrompue et se reconnectera automatiquement pour vous si elle est interrompue.

// 创建Socket.IO实例，建立连接
var socket= new io.Socket('localhost',{
  port: 8080,
});
socket.connect();
// 添加一个连接监听器
socket.on('connect',function(){
  console.log('Client has connected to the server!');
});
// 添加一个连接监听器
socket.on('message',function(data){
  console.log('Received a message from the server!',data);
});
// 添加一个关闭连接的监听器
socket.on('disconnect',function(){
  console.log('The client has disconnected!');
});
// 通过Socket发送一条消息到服务器
function sendMessageToServer(message){
  socket.send(message);
}

Avantages

• Communication bidirectionnelle en temps réel

• La prise en charge native du navigateur est bonne (la compatibilité peut utiliser bibliothèques tierces Très facile à résoudre)

• Prise en charge des protocoles personnalisés

Application pratique

• Salon de discussion

• Push de messages du serveur

• Système en temps réel front-end et back-end

Référence

• Websocket | MDN

• Découvrez HTML5 WebSocket

[Recommandations associées ]

1. Tutoriel vidéo en ligne gratuit h5

2.Manuel de la version complète HTML5

3. .cn tutoriel vidéo html5 original

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!