Click event in node.js does not work

Question

I am using Node.js + Express + Jade + Socket.io to set up click events in one browser to trigger a click on a button in another. I am having difficulty getting this to work. The code I have so far is:

Client side (index.jade):

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

Server side:

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

Another client side (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> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" href="slider-style.css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> <body> <?php $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() { $('img.previewImage' + currentImage).hide(); $('a.galleryBullet' + currentImage).removeClass("active"); $('a.thumbnailsimage' + currentImage).removeClass("active"); $('div.description' + currentImage).removeClass("visible"); currentImage--; if (currentImage == 0) { currentImage = imagesTotal; } $('a.galleryBullet' + currentImage).addClass("active"); $('a.thumbnailsimage' + currentImage).addClass("active"); $('img.previewImage' + currentImage).show(); $('div.description' + currentImage).addClass("visible"); return false; }); // =================== // NEXT ARROW CODE $('a.nextSlideArrow').click(function() { $('img.previewImage' + currentImage).hide(); $('a.galleryBullet' + currentImage).removeClass("active"); $('a.thumbnailsimage' + currentImage).removeClass("active"); $('div.description' + currentImage).removeClass("visible"); currentImage++; if (currentImage == imagesTotal + 1) { currentImage = 1; } $('a.galleryBullet' + currentImage).addClass("active"); $('a.thumbnailsimage' + currentImage).addClass("active"); $('img.previewImage' + currentImage).show(); $('div.description' + currentImage).addClass("visible"); return false; }); // =================== </script> <script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script> <script src="slide-script.js></script> </body> </html>

Any help would be really appreciated. Thanks~

Answer 1

I tried to reproduce your setup with the following code:

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 gallery:

<!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>

It works - when you click buttons in the jade client you can browse the gallery in the html client. Please move the socket.io loader <script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script> to the <head> section - if you have it at the end of the <body> it is not loaded yet when you execute var socket = io(<server address>); and you should see the error Uncaught ReferenceError: io is not defined in your browser's console.

Click event in node.js does not work

Question

1 answers

solution1
0 ACCPTED 2017-05-15 20:06:20

Click event in node.js does not work

Question

1 answers

solution1 0 ACCPTED 2017-05-15 20:06:20

solution1
0 ACCPTED 2017-05-15 20:06:20