그래서 저는 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>
이 작업을 수행하는 방법은 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 의 공동 창립자입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다