Maison >interface Web >Tutoriel H5 >Qu'est-ce que WebSocket ? Compréhension approfondie de WebSocket en HTML5
WebSocket
Le 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 );
HTML5
Concentrez-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
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>Buffer
Buffer
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 polling
P 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); }
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
Salon de discussion
Push de messages du serveur
Système en temps réel front-end et back-end
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!