Click Ereignis in node.js funktioniert nicht

Ich benutze Node.js + Express + Jade + Socket.io, um Click-Ereignisse in einem Browser einzurichten, um einen Klick auf eine Schaltfläche in einem anderen auszulösen. Ich habe Schwierigkeiten, dies zur Arbeit zu bringen. Der Code, den ich bisher habe, ist:Click Ereignis in node.js funktioniert nicht

Client-Seite (index.jade):

var socket = io.connect('http://localhost:8080'); 
    $('#buttonLeft').tap(function() { 
    socket.emit('keyLeft'); 
    }); 
});

Server-Seite:

var sockets = {}; 
io.sockets.on('connection', function (socket) { 
    socket.on('keyLeft', function(){ 
    socket.broadcast.emit('keyLeft'); 
    }); 
});

Eine andere Client-Seite (index.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 

 
<head> 
 
\t <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
 
\t <link rel="stylesheet" href="slider-style.css" /> 
 
\t <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
\t <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
<?php 
 
\t $imagesTotal = 8;  // SET TOTAL IMAGES IN GALLERY 
 
?> 
 

 
<div class="galleryContainer"> 
 

 
    <div class="galleryPreviewContainer"> 
 
    <div class="galleryPreviewImage"> 
 
     <?php 
 
     for ($i = 1; $i <= $imagesTotal; $i++) { 
 
      echo '<img class="previewImage' . $i . '" src="images/image' . $i . '.jpg" width="900" height="auto" alt="" />'; 
 
     } 
 
     ?> 
 
    </div> 
 

 
    <div class="galleryPreviewArrows"> 
 
    <a id="previousSlideArrow" href="#" class="previousSlideArrow">&lt;</a> 
 
     <a id="nextSlideArrow" href="#" class="nextSlideArrow">&gt;</a> 
 
    </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
// init variables 
 
var imagesTotal = <?php echo $imagesTotal; ?>; 
 
var currentImage = 1; 
 
var thumbsTotalWidth = 0; 
 

 
$('a.galleryBullet' + currentImage).addClass("active"); 
 
$('a.thumbnailsimage' + currentImage).addClass("active"); 
 
$('div.description' + currentImage).addClass("visible"); 
 

 
// PREVIOUS ARROW CODE 
 
$('a.previousSlideArrow').click(function() { 
 
\t $('img.previewImage' + currentImage).hide(); 
 
\t $('a.galleryBullet' + currentImage).removeClass("active"); 
 
\t $('a.thumbnailsimage' + currentImage).removeClass("active"); 
 
\t $('div.description' + currentImage).removeClass("visible"); 
 

 
\t currentImage--; 
 

 
\t if (currentImage == 0) { 
 
\t \t currentImage = imagesTotal; 
 
\t } 
 

 
\t $('a.galleryBullet' + currentImage).addClass("active"); 
 
\t $('a.thumbnailsimage' + currentImage).addClass("active"); 
 
\t $('img.previewImage' + currentImage).show(); 
 
\t $('div.description' + currentImage).addClass("visible"); 
 

 
\t return false; 
 
}); 
 
// =================== 
 

 

 
// NEXT ARROW CODE 
 
$('a.nextSlideArrow').click(function() { 
 
\t $('img.previewImage' + currentImage).hide(); 
 
\t $('a.galleryBullet' + currentImage).removeClass("active"); 
 
\t $('a.thumbnailsimage' + currentImage).removeClass("active"); 
 
\t $('div.description' + currentImage).removeClass("visible"); 
 

 
\t currentImage++; 
 

 
\t if (currentImage == imagesTotal + 1) { 
 
\t \t currentImage = 1; 
 
\t } 
 

 
\t $('a.galleryBullet' + currentImage).addClass("active"); 
 
\t $('a.thumbnailsimage' + currentImage).addClass("active"); 
 
\t $('img.previewImage' + currentImage).show(); 
 
\t $('div.description' + currentImage).addClass("visible"); 
 

 
\t return false; 
 
}); 
 
// =================== 
 
</script> 
 

 
<script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script> 
 
<script src="slide-script.js></script> 
 

 
</body> 
 
</html>

Jede Hilfe würde wirklich geschätzt werden. Dank ~

Quelle

2017-05-14 Fanny Febriani Susilo

so haben Sie zwei "io.connect" auf der Client-Seite, ist das richtig? –

Was bedeutet "Schwierigkeiten haben, dies zur Arbeit zu bringen"? geben Sie uns bitte Details – mk12ok

@MarcosCasagrande ja, du hast Recht. Ich habe io.connect in beiden Clients. –

Ich habe versucht, das Setup mit dem folgenden Code zu reproduzieren:

Server:

const express = require('express'); 
const app = express(); 
const http = require('http').Server(app); 
const io = require('socket.io')(http); 

app.set('views', __dirname + '/views'); 
app.set('view engine', 'jade'); 
app.get('/', function (req, res) { 
    res.render('index'); 
}); 

io.on('connection', function (socket) { 
    socket.on('left', function() { 
     socket.broadcast.emit('leftButtonClicked'); 
    }); 
    socket.on('right', function() { 
     socket.broadcast.emit('rightButtonClicked'); 
    }); 
}); 

http.listen(3000, function(){ 
    console.log('listening on port 3000'); 
});

Jade-Client:

doctype html 
html 
    body 
    h1 Testing socket.io 
    h3(id="status") not connected 
    buttons 
     button#leftButton Prev 
     button#rightButton Next 
    br 
    h3 actions: 
    p#actions 
    script(src="/socket.io/socket.io.js") 
    script. 
     var socket = io(); 
     socket.on('connect', function() { 
     document.getElementById("status").innerHTML = "connected"; 
     }); 
     document.getElementById("leftButton").addEventListener('click', function() { 
     socket.emit('left'); 
     document.getElementById("actions").innerHTML += "Prev button click sent<br>"; 
     }); 
     document.getElementById("rightButton").addEventListener('click', function() { 
     socket.emit('right'); 
     document.getElementById("actions").innerHTML += "Next button click sent<br>"; 
     });

html Galerie:

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script> 
    </head> 

    <body> 
    <div> 
     <div id="preview" style="padding: 5px;"></div> 
     <div id="fullSize" class="fullgalleryPreviewImage" style="padding: 5px;"></div> 
     <div style="padding: 5px;"> 
      <button id="previousSlideArrow" style="height: 4em; width=100px;">&lt;</button> 
      <button id="nextSlideArrow" style="height: 4em; width=100px;">&gt;</button> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     // init variables 
     var imagesTotal = 8; 
     var currentImage = 1; 

     for (var i = 1; i <= imagesTotal; i++) { 
      document.getElementById('preview').innerHTML += '<img class="previewImage' + i + '"src="images/image' + i +   '.jpg" + width="200" height="auto" style="margin-left: 2px;" />'; 
     }  

     document.getElementById('fullSize').innerHTML = '<img src="images/image' + currentImage + '.jpg" + width="800" height="auto" />'; 

     // PREVIOUS ARROW CODE 
     document.getElementById('previousSlideArrow').addEventListener('click', function() { 
      currentImage--; 
      if (currentImage === 0) { 
       currentImage = imagesTotal; 
      } 
      document.getElementById('fullSize').innerHTML = '<img src="images/image' + currentImage + '.jpg" + width="800" height="auto" />'; 
     }); 

     // NEXT ARROW CODE 
     document.getElementById('nextSlideArrow').addEventListener('click', function() { 
      currentImage++; 
      if (currentImage === imagesTotal + 1) { 
       currentImage = 1; 
      } 
      document.getElementById('fullSize').innerHTML = '<img src="images/image' + currentImage + '.jpg" + width="800" height="auto" />'; 
     }); 

     // socket.io 
     var socket = io("http://localhost:3000"); 
     socket.on('connect', function() { 
      console.log('connected'); 
     }); 
     socket.on('leftButtonClicked', function() { 
      document.getElementById('previousSlideArrow').click(); 
     }); 
     socket.on('rightButtonClicked', function() { 
      document.getElementById('nextSlideArrow').click(); 
     }); 
    </script> 
    </body> 
</html>

Es funktioniert - wh Wenn Sie im Jade-Client auf Schaltflächen klicken, können Sie die Galerie im HTML-Client durchsuchen. Bitte verschieben Sie den Socket.io Loader <script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script> in den <head> Abschnitt - wenn Sie es am Ende der <body> haben, ist es noch nicht geladen, wenn Sie var socket = io(<server address>); ausführen, und Sie sollten den Fehler Uncaught ReferenceError: io is not defined in der Konsole Ihres Browsers sehen.

Quelle

2017-05-15 20:06:20 mk12ok

Danke für den Code. Ich habe versucht, document.getElementById ("actions") hinzuzufügen. innerHTML + = " Button Klick gesendet ", um die Verbindung zu sehen und jetzt sind beide Clients mit socket.io verbunden (bevor es nicht war Der Jade - Client funktioniert gut und er kann die Klick-Anfrage, aber der HTML-Client erhält die Anfrage nicht. –

können Sie mir den gesamten Code des HTML-Clients zeigen? – mk12ok

sicher, ich habe schon meinen Beitrag bearbeitet :) @ mk12ok –

Click Ereignis in node.js funktioniert nicht

Antwort

Verwandte Themen