Question

所以，我试图学习Socket.IO和Node.JS以及诸如此类的东西。但是我很难理解它。

我正试图通过点击一个浏览器并在另一个浏览器或另一个设备上观察它来实时更改盒子的颜色。

HTML：

<article></article>

CSS：

<style>
article {
background:red;
width:500px;
height:500px;
cursor:pointer;
}

   .green {
    background:green;
    }
</style>

我使用的脚本只是尝试连接到我认为的服务器：

var server = require('http').createServer();
var io = require('socket.io')(server);
io.on('connection', function(socket){
  socket.on('event', function(data){});
  socket.on('disconnect', function(){});
});
server.listen(3000);

忘记包含该功能：

<script>
$("article").click(function() {
    $(this).toggleClass("green");
});
</script>

Answer 1

我这样做的方法是使用Node.js + Ably来传递通知消息。

因此，例如，您的代码将如下所示：

 <script>
 /* Instance the realtime message bus
 var ably = Ably.Realtime.new(apiKey); /* get a free key from www.ably.io */
 var channel = ably.channels.get("article");

 $("article").click(function() {
   /* Triggers all buttons to go green, assumes each article has a data-id */
   channel.publish("click", $("article").data('id'));
 });

 channel.subscribe("click", function(msg) {
   $("button").toggleClass("green");
 });
 </script>

美好而简单：）

免责声明 - 我是Ably - simple better realtime的共同创始人

在服务器上实时更改按钮？

1 个答案: