Différences

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

--- isn:websocketflask_03 [2020/03/12 16:00] – [Envoyer des données au serveur] 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 48: / Ligne 48: @@
 ===== 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 73: / 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>