Question

我是node.js和socket.io的一个新手。我想补充一个简单的功能，当套接字单击按钮时，该按钮的背景色将切换为蓝色。

这是我的客户html代码：

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <style type="text/css">
      .blue {
          background: blue;
      }
  </style>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    $(function(){
        var socket = io();
        $("button").click(function(){
            socket.emit("click button");
            return false;
        });
        socket.on("click button", function(){
            $("button").toggleClass("blue");
        });
    });
    </script>
  <body>
    <button>Click me to change</button>
    <br>
    <button>Don't change me</button>
  </body>
</html>

这是我的server.js文件：

var express = require("express"),
app     = express(),
server  = require("http").createServer(app),
io      = require("socket.io").listen(server);

app.get("/", function(req, res){
    res.sendFile(__dirname + "/index.html");
});

io.on("connection", function(socket){
    socket.on("click button", function(){
        io.emit("click button");
    })
});

server.listen(process.env.PORT, process.env.IP, function(){
    console.log("The server is now starting......");
});

当然，此代码不起作用，因为单击一个按钮时会切换所有按钮。但是我想知道仅切换被单击的按钮的正确方法是什么？

谢谢您的任何建议！

Answer 1

您可以使用this关键字来选择所单击的元素，例如。

$("button").click(function(){
  socket.emit("click button");
  $(this).toggleClass("blue");
  return false;
});

通过jQuery选择特定元素，然后在socket.io

1 个答案: