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

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

的联合创始人

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

Change Button in Real Time on Server?

javascript

jquery

real-time

socket.io

server