サーバーのリアルタイムでボタンを変更しますか？

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