Qu’est-ce que Websocket ? Analyser Websocket dans h5

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> code>, 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 ArrayBuffer

Compatibilité

Méthode 1 :
Si le client ne supporte pas WebSocket, alors plusieurs candidats sont disponibles Flash Socket AJAX long-polling AJAX multipart streaming IFrame <a href="http://www.php.cn%20/wiki/%201488.html" target="_blank">JSON<code><a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON</a>P pollingP polling

Méthode 2
Utilisez Socket.io pour lisser les différences. La bibliothèque peut utilisez automatiquement la méthode de transmission de messages prise en charge par le navigateur pour vous connecter lorsque le navigateur ne prend pas en charge WebSocket. 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

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2 Manuel de la version complète HTML5

3. .Tutoriel vidéo html5 original php.cn

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!