Fatal编程技术网
  • javascript/
  • Javascript node.js中的单击事件不起作用

Javascript node.js中的单击事件不起作用

javascript jquery node.js socket.io

Javascript node.js中的单击事件不起作用,javascript,jquery,node.js,socket.io,Javascript,Jquery,Node.js,Socket.io,我使用Node.js+Express+Jade+Socket.io在一个浏览器中设置单击事件，以触发在另一个浏览器中单击按钮。我很难让它工作。到目前为止，我掌握的代码是： 客户端（index.jade）： var socket=io.connect（'http://localhost:8080'); $（'#buttonLeft'）。点击（函数（）{ socket.emit（'keyLeft'）； }); }); 服务器端： var sockets={}； io.sockets.on（'con

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

客户端（index.jade）：

var socket=io.connect（'http://localhost:8080');
$（'#buttonLeft'）。点击（函数（）{
socket.emit（'keyLeft'）；
});
});
服务器端：

var sockets={}；
io.sockets.on（'connection'，函数（socket）{
socket.on（'keyLeft'，function（）{
socket.broadcast.emit（'keyLeft'）；
});
});
另一个客户端（index.php）：


//初始变量
var imagesTotal=；
var-currentImage=1；
var thumbsTotalWidth=0；
$（'a.galleryBullet'+currentImage）.addClass（“活动”）；
$（'a.thumbnailsimage'+currentImage）.addClass（“活动”）；
$（'div.description'+currentImage）.addClass（“可见”）；
//上一个箭头代码
$（'a.previousSlideArrow'）。单击（函数（）{
$（'img.previewImage'+currentImage）.hide（）；
$（'a.galleryBullet'+currentImage）.removeClass（“活动”）；
$（'a.thumbnailsimage'+currentImage）.removeClass（“活动”）；
$（'div.description'+currentImage）.removeClass（“可见”）；
当前图像--；
如果（currentImage==0）{
currentImage=imagesTotal；
}
$（'a.galleryBullet'+currentImage）.addClass（“活动”）；
$（'a.thumbnailsimage'+currentImage）.addClass（“活动”）；
$（'img.previewImage'+currentImage）.show（）；
$（'div.description'+currentImage）.addClass（“可见”）；
返回false；
});
// ===================
//下一个箭头代码
$（'a.nextSlideArrow'）。单击（函数（）{
$（'img.previewImage'+currentImage）.hide（）；
$（'a.galleryBullet'+currentImage）.removeClass（“活动”）；
$（'a.thumbnailsimage'+currentImage）.removeClass（“活动”）；
$（'div.description'+currentImage）.removeClass（“可见”）；
currentImage++；
如果（currentImage==imagesTotal+1）{
currentImage=1；
}
$（'a.galleryBullet'+currentImage）.addClass（“活动”）；
$（'a.thumbnailsimage'+currentImage）.addClass（“活动”）；
$（'img.previewImage'+currentImage）.show（）；
$（'div.description'+currentImage）.addClass（“可见”）；
返回false；
});
// ===================

我尝试用以下代码复制您的设置：

服务器：


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客户：


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



doctype html
html
身体
h1测试插座.io
h3（id=“status”）未连接
按钮
按钮#左按钮前
按钮#右按钮下一步
溴
h3行动：
p#行动
脚本（src=“/socket.io/socket.io.js”）
剧本
var socket=io（）；
socket.on（'connect'，function（）{
document.getElementById（“状态”）.innerHTML=“已连接”；
});
document.getElementById（“leftButton”）.addEventListener（'click'，函数（）{
socket.emit（'left'）；
document.getElementById（“操作”）.innerHTML+=“上一个按钮单击发送
”；
});
document.getElementById（“rightButton”）.addEventListener（'click'，函数（）{
socket.emit（'right'）；
document.getElementById（“操作”）.innerHTML+=“下一步”按钮单击发送
”；
});


html图库：


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




//初始变量
var-imagesTotal=8；
var-currentImage=1；

对于（var i=1；i），您在客户端有两个
io.connect
，对吗？什么是“很难让它工作”什么意思？告诉我们细节please@MarcosCasagrande是的，你说得对。我在两个客户端中都有io.connect。@mk12ok我试图实现另一个事件，如滚动事件，它工作得很好，但当我尝试click事件（上面的那些）的代码时，它没有按我希望的那样工作（在另一个客户端文件中触发click）。我不确定我的代码是否不正确，或者我的代码中是否遗漏了某些内容。你应该只有一个io.connect，这就是为什么你在客户端的
socket.on（'keyLeft'
）上没有得到任何东西。感谢你的代码。我尝试添加document.getElementById（“操作”）。innerHTML+=“按钮单击发送”要查看连接，现在两个客户端都连接到socket.io mojoer.kr:8080/socket.io/socket.io.js“>（之前没有）。jade客户端工作正常，可以发送点击请求，但html客户端没有收到请求。您能给我看一下html客户端的全部代码吗？嗨，非常感谢您的帮助。我现在理解了这个概念。它在本地工作，但我有一个问题，如果服务器设置了jade客户端（应用程序）要侦听socket.io端口以外的其他端口，例如app.listen（8000）和socket.io listen（8080），如何将位于不同web服务器上的html客户端连接到socket.io？我尝试了使用和var socket=io（服务器侦听某些端口：
http.listen（）
两个客户端必须连接到完全相同的端口：jade客户端连接到
脚本（src=“/socket.io/socket.io.js”）
，然后连接到
var socket=io（）；
和html客户端连接到
（在头部！），然后连接到
var socket=io（“http://mojoer.kr:”；