WebSockets - Envoyer et recevoir des messages
le MessageL'événement se produit généralement lorsque le serveur envoie des données. Les messages envoyés par le serveur au client peuvent inclure des messages en texte brut, des données binaires ou des images. Chaque fois que des données sont envoyées, leonmessage la fonction est déclenchée.
Cet événement agit comme une oreille du client pour le serveur. Chaque fois que le serveur envoie des données, leonmessage l'événement est déclenché.
L'extrait de code suivant décrit l'ouverture de la connexion du protocole Web Socket.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}Il est également nécessaire de prendre en compte les types de données pouvant être transférés à l'aide de Web Sockets. Le protocole Web socket prend en charge le texte et les données binaires. En termes de Javascript,text se réfère à une chaîne, tandis que les données binaires sont représentées comme ArrayBuffer.
Les sockets Web ne prennent en charge qu'un seul format binaire à la fois. La déclaration des données binaires se fait explicitement comme suit -
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;Cordes
Les chaînes sont considérées comme utiles, traitant des formats lisibles par l'homme tels que XML et JSON. N'importe quandonmessage est déclenché, le client doit vérifier le type de données et agir en conséquence.
L'extrait de code permettant de déterminer le type de données sous forme de chaîne est mentionné ci-dessous -
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}JSON (notation d'objet JavaScript)
C'est un format léger pour transférer des données lisibles par l'homme entre les ordinateurs. La structure de JSON se compose de paires clé-valeur.
Exemple
{
name: “James Devilson”,
message: “Hello World!”
}Le code suivant montre comment gérer un objet JSON et extraire ses propriétés -
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}XML
L'analyse en XML n'est pas difficile, bien que les techniques diffèrent d'un navigateur à l'autre. La meilleure méthode consiste à analyser à l'aide d'une bibliothèque tierce telle que jQuery.
En XML et JSON, le serveur répond sous forme de chaîne, qui est analysée du côté client.
ArrayBuffer
Il se compose de données binaires structurées. Les bits inclus sont donnés dans un ordre afin que la position puisse être facilement suivie. Les ArrayBuffers sont pratiques pour stocker les fichiers image.
Recevoir des données à l'aide d'ArrayBuffers est assez simple. L'opérateurinstanceOf est utilisé à la place de l'opérateur égal.
Le code suivant montre comment gérer et recevoir un objet ArrayBuffer -
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}Application de démonstration
Le code de programme suivant montre comment envoyer et recevoir des messages à l'aide de Web Sockets.
<!DOCTYPE html>
<html>
<meta charset = "utf-8" />
<title>WebSocket Test</title>
<script language = "javascript" type = "text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onMessage(evt) {
writeToScreen('<span style = "color: blue;">RESPONSE: ' +
evt.data+'</span>'); websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id = "output"></div>
</html>La sortie est indiquée ci-dessous.
