Schaltfläche in Echtzeit auf Server ändern?

Question

Also, ich versuche Socket.IO und Node.JS und was nicht zu lernen. Aber ich habe es wirklich schwer zu versuchen, es zu verstehen.

Ich versuche, die Farbe einer Box in Echtzeit zu ändern, indem ich in einem Browser klicke und sehe, wie es sich in einem anderen Browser oder auf einem anderen Gerät ändert.

Die HTML:

<article></article> 

Die CSS:

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

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

Das Skript ich benutze ist nur auf dem Server zu verbinden versuchen, denke ich:

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); 

vergessen zu enthalten Sie die Funktion:

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

Answer 1

Die Art, wie ich dies tun würde, ist mit Node.js + Ably, um die Benachrichtigung zu übermitteln.

So zum Beispiel der Code würde dann wie folgt aussehen:

<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> 

Schön und einfach :)

Haftungsausschluss - Ich bin der Mitbegründer von Ably - simple better realtime