0
커서 창에 현재 커서가있는 모든 현재 방문자를 표시하는 가장 좋은 방법은 무엇입니까?모든 현재 방문자 커서 표시 라이브
너무 느리지 않고 달성 할 수 있습니까?
이것은 유성 JS 내 시도 :
http://meteorpad.com/pad/rCSsroc4G4gYQGkAY/Leaderboard가 (이름을 마음, 변경할 수 없습니다?)
http://allofthecursors.meteor.com/
cursors.js :
Cursors = new Mongo.Collection("Cursors");
if (Meteor.isClient) {
Meteor.startup(function() {
if(!Session.get('cursorId')) {
// todo: not unique enough!
var cursorId = new Date();
Session.set('cursorId', cursorId);
Meteor.call('initCursor', cursorId);
}
});
Template.cursor.helpers({
cursor: function() {
return Cursors.findOne({ cursorId: Session.get('cursorId') });
},
cursors: function() {
return Cursors.find({ cursorId: { $ne: Session.get('cursorId') } });
}
});
Template.cursor.events({
"mousemove": function(event) {
var x = event.pageX,
y = event.pageY,
cursorId = Session.get('cursorId');
Meteor.call('updateCursor', cursorId, x, y);
}
});
}
if (Meteor.isServer) {
Meteor.methods({
'initCursor': function(cursorId) {
Cursors.insert({
cursorId: cursorId,
x: 0,
y: 0
});
},
'updateCursor': function(cursorId, x, y) {
Cursors.update(
{ cursorId: cursorId },
{ $set: { x: x, y: y }}
);
}
});
}
커서 .html
<head>
<title>cursors</title>
</head>
<body>
{{> cursor}}
</body>
<template name="cursor">
<div class="cursors-area">
{{#each cursors}}
<div class="cursor" style="top: {{y}}px; left: {{x}}px;"></div>
{{/each}}
<div class="my-cursor">
{{cursor.cursorId}}: {{cursor.x}}, {{cursor.y}}
</div>
</div>
</template>
cursors.css는
html, body {
margin: 0;
padding: 0;
}
.cursors-area {
height: 100vh;
}
.cursor {
position: fixed;
width: 11px;
height: 17px;
background-image: url(cursor.png);
}
감사합니다. 여기에 업데이트 된 버전이 있습니다. $ 유성이 lepozepo를 추가 :
는 스트림 패키지를 추가 클라이언트 측 수집에만 반응 기능에 액세스하는 데 사용되는
스트리밍합니다.
cursors_2.js
Stream = new Meteor.Stream('public');
if(Meteor.isClient) {
Cursors = new Mongo.Collection(null);
Template.cursor.events({
'mousemove': function(event) {
if (Meteor.status().connected) {
Stream.emit('p', {
_id: Meteor.connection._lastSessionId,
x: event.pageX,
y: event.pageY
});
}
}
});
Stream.on('p', function(p) {
// how can I change this?
if(Cursors.findOne(p._id) === undefined) {
Cursors.insert({
_id: p._id,
x: p.x,
y: p.y
});
} else {
Cursors.update(p._id, {
$set: {
x: p.x,
y: p.y
}
}
);
}
});
function getCursors() {
return Cursors.find();
}
var throttledGetCursors = _.throttle(getCursors, 50);
Template.cursor.helpers({
cursors: throttledGetCursors
});
}
[메서드 호출을 제한하기 위해 밑줄을 사용하는] (http://underscorejs.org/#throttle)을 권장하므로 마우스가 한 픽셀 씩 이동할 때마다 새 메서드 호출을 보내지 않습니다. 움직임을 여전히 부드럽게 보이게하려면 스로틀과 같은 지속 시간을 사용하여 CSS 속성을 'top'및 'left'속성에 넣을 수 있습니다. – sbking
디 바운싱 외에도 [streams] (http://arunoda.github.io/meteor-streams/)을 사용해야합니다. MongoDB없이 실시간 통신을 할 수 있습니다. 그 웹 사이트는 당신의 앱에 스트림 패키지를 추가하기 위해 구식입니다.'meteor add lepozepo : streams' – sbking
전환을 사용해 보았지만 이상한 지연이있었습니다. 내가 스로틀을 올바르게 설정할 수 있었는지 확실하지 않은. – niklashultstrom