Différences

Ci-dessous, les différences entre deux révisions de la page.

--- isn:websocketflask_03 [2020/03/12 15:58] – [Programme javascript de base du client : la page index.html] techer.charles_educ-valadon-limoges.fr
+++ isn:websocketflask_03 [2020/03/12 16:04] (Version actuelle) – [La page index.html qui utilise le fichier websocket.js] techer.charles_educ-valadon-limoges.fr
@@ Ligne 20: / Ligne 20: @@
 L'instruction suivante permet d'ouvrir une connexion websocket vers le serveur en connaissant son adresse IP. Pour cette activité, le serveur sera situé sur le même ordinateur que le client : l'**adresse IP est donc 127.0.0.1** .(localhost) :
 <code javascript>
-var websockets = new WebSocket("ws://127.0.0.1:5678/");
+var socket = io.connect('http://' + document.domain + ':' + location.port); // creation de la connexion
 </code>
 <WRAP center round info>
 **Explications** : \\
-    * la **variable websocket** va contenir la connexion vers le serveur,
+    * la **variable socket** va contenir la connexion vers le serveur,
-    * le **protocole** est **ws** suivi de l'**adresse IP et du port d'écoute** du serveur websocket.
+    * le **protocole** est **http** suivi de l'**adresse IP et du port d'écoute** du serveur websocket.
 </WRAP>
@@ Ligne 32: / Ligne 32: @@
 Quand un **message arrive** du serveur, un événement (**event**) **message** est envoyé à la fonction **onmessage()**. Pour utiliser ce message voici un exemple de code :
 <code javascript>
-ws.onmessage = function (event) {
+socket.on('messagepourclient', function( message ) {
-  //afficheEtat(event.data);
+   alert(message);
-  alert(event.data);
+   information.innerHTML = message;
-    };
+   console.log('recu');
+    });
 </code>
 ==== Envoyer des données au serveur ====
 Les messages sont **envoyés** avec la fonction **send()**. Cependant, les connexions étant asynchrones, l'envoi du **premier message** immédiatement après la création de la connexion **peut échouer**. Il est alors préférable ...
 <code javascript>
-ws.onopen = function (event) {
+    socket.on('connect', function() {
-  ws.send("J'envoie un premier message au serveur.");
+      socket.emit('messagepourserveur', 'je souhaite me connecter !');
-};
+	  console.log('envoi');
+    });
 </code>
 ===== Le code complet de ce premier exemple dans le fichier javascript websocket.js=====
 <file javascript websocket.js>
-// selectionner la balise <span> avec son id
+var information = document.getElementById('information');
-var affichemessage = document.getElementById('messagerecu');
+    information.innerHTML = 'test2';
-// creation du websocket client vers le websocket serveur du Raspnerry
+    var socket = io.connect('http://' + document.domain + ':' + location.port); // creation de la connexion
-var ws = new WebSocket("ws://127.0.0.1:5678/");
+    //var socket = io();
-// envoi d'un message au serveur dès la premiere connexion
+    socket.on('connect', function() {
-ws.onopen = function (event) {
+      socket.emit('messagepourserveur', 'je souhaite me connecter !');
-    ws.send("J'envoie un premier message au serveur.");
+	  console.log('envoi');
-};
+    });
-// gestion des message reçus
+    socket.on('messagepourclient', function( message ) {
-ws.onmessage = function (event) {
+	    alert(message);
-   //affiche le message recu dans la balise <span>
+        information.innerHTML = message;
-   affichemessage.innerHTML = event.data;
+		console.log('recu');
-};
+    });
+	// Ajout d'un gestionnaire d'événement sur le bouton
+    var envoi = document.getElementById('envoi')
+    envoi.addEventListener('click',envoyerMessage);
+	var numeroMessage = 1;
+	  // fonction qui envoie un message au serveur
+  function envoyerMessage() {
+    socket.emit('messagepourserveur', "J'envoie message " + numeroMessage + " au serveur.");
+	  console.log('envoi');
+	numeroMessage += 1;
+  }
 // fonction qui envoie un message au serveur
@@ Ligne 71: / Ligne 83: @@
 <file html index.html>
 <!DOCTYPE html>
-<html  lang="fr">
+<html>
- <head>
+<head>
-  <meta charset="UTF-8">
+    <title>Socket</title>
-      <title>Websocket</title>
+</head>
- </head>
+<body>
- <body>
+  <p>Gérer un socket</p>
-  <span id="messagerecu">En attente d'un message du serveur</span>
+   <div id="information"></div>
-  <<script type="text/javascript" src="{{ url_for('static', filename='js/websocket.js')}}"></script>
+   <input type="button" name="envoi" id="envoi" value="Envoyer message"/>
- </body>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="websocket.js"charset="utf-8"></script>
+</body>
 </html>
 </file>