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

所以，我试图学习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>

来源

2016-07-23 YVLL

联合创始人什么触发了“事件'的插座？ – Kannaj

'我正在使用的脚本是... ...创建一个服务器，而不是连接到一个 –

看到这是我需要帮助与lmao。我不明白之后还有什么要做。该功能正在将.green类切换为该文章 – YVLL

我会这样做的方式是使用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

来源

2016-07-23 09:15:55

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

回答

相关问题