Question

我正在使用Node.js + Express + Jade + Socket.io在一个浏览器中设置点击事件，以触发点击另一个浏览器中的按钮。我很难让这个工作。我到目前为止的代码是：

客户端（index.jade）：

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

服务器端：

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

另一个客户端（index.php）：

＆＃13;

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

＆＃13;

任何帮助都会非常感激。感谢〜

Answer 1

我尝试使用以下代码重现您的设置：

服务器：

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');
});

玉石客户：

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>

它的工作原理 - 当您单击jade客户端中的按钮时，您可以浏览html客户端中的库。请将socket.io loader [{1}}移动到<script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script>部分 - 如果您在<head>的末尾有它，那么当您执行<body>并且执行var socket = io(<server address>);时它尚未加载应该会在浏览器的控制台中看到错误Uncaught ReferenceError: io is not defined。

node.js中的Click事件不起作用

1 个答案: