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

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的联合创始人