我正在尝试使用 javascript 制作“FourConnect”游戏。我想要一个来自所有在线用户的列表。这个列表是我在 firebase 网站上用示例制作的。现在我希望我可以选择一个在线用户并向他们发送与我一起玩的邀请。所以我写了一个函数,所有用户期望我都有一个额外的 div。当我点击 div 时,这个特殊用户应该会得到一个确认框来说好的或取消。如果用户单击 okkey,则播放应该开始。我将保存用户的名称和 ID。这已经奏效了。
我的问题是,我不知道如何将请求发送给其他用户。我尝试了很多,但确认框总是在我的浏览器上,而不是在其他用户的浏览器上。
我在 firebase 页面和 google 上寻找解决方案,但找不到任何解决我问题的方法。
我已经拥有的代码:
var name = prompt("Your name?", "Guest"),
currentStatus = "★ online";
// Get a reference to the presence data in Firebase.
var userListRef = new Firebase(connectFour.CONFIG.firebaseUrl);
// Generate a reference to a new location for my user with push.
var myUserRef = userListRef.push();
var gameId = myUserRef.name();
document.getElementById('labelGameId').innerHTML = gameId;
beginGame({id: gameId, name: name, status: currentStatus});
// Get a reference to my own presence status.
var connectedRef = new Firebase('http://presence.firebaseio-demo.com/.info/connected');
connectedRef.on("value", function(isOnline) {
if (isOnline.val()) {
// If we lose our internet connection, we want ourselves removed from the list.
myUserRef.onDisconnect().remove();
// Set our initial online status.
setUserStatus("★ online");
} else {
// We need to catch anytime we are marked as offline and then set the correct status. We
// could be marked as offline 1) on page load or 2) when we lose our internet connection
// temporarily.
setUserStatus(currentStatus);
}
});
//}
// A helper function to let us set our own state.
function setUserStatus(status) {
// Set our status in the list of online users.
currentStatus = status;
myUserRef.set({ name: name, status: status });
}
// Update our GUI to show someone"s online status.
userListRef.on("child_added", function(snapshot) {
var user = snapshot.val();
$("#output").append($("<div/>").attr("id", snapshot.name()));
$("#" + snapshot.name()).text(user.name + " is currently " + user.status);
if(snapshot.name() != myUserRef.name()){
var $invite = $('<div id="invite">invite</div>');
$("#output").append($invite);
$($invite).on('click', function(){
//startGame(user);
console.log('Gegner2: '+snapshot.name());
console.log('Genger2Name: '+user.name);
joinGame({id: snapshot.name(), name: user.name, status: user.status});
});
}
});
// Update our GUI to remove the status of a user who has left.
userListRef.on("child_removed", function(snapshot) {
$("#" + snapshot.name()).remove();
});
// Update our GUI to change a user"s status.
userListRef.on("child_changed", function(snapshot) {
var user = snapshot.val();
$("#" + snapshot.name()).text(user.name + " is currently " + user.status);
});
document.onIdle = function () {
setUserStatus("☆ idle");
}
document.onAway = function () {
setUserStatus("☄ away");
}
document.onBack = function (isIdle, isAway) {
setUserStatus("★ online");
}
setIdleTimeout(5000);
setAwayTimeout(10000);
function joinGame(opponent) {
console.log(opponent);
console.log(opponent.id);
var player2ID = opponent.id;
myUserRef = new Firebase(connectFour.CONFIG.firebaseUrl + opponent.id);
myUserRef.once('value', function(dataSnapshot){
if(dataSnapshot.val()){
beginGame({id: player2ID , name: opponent.name, status: opponent.status});
}else{
alert("game doesn't exist");
}
});
}
function beginGame(player) {
console.log(player);
console.log('Id spieler1: '+gameId);
});
使用此代码,我可以单击“邀请”,然后我将看到用户拥有的 ID。我还想将 ID 发送到 beginGame() 但这并不真正有效。
我的 Firebase 结构:
游戏
-InmydEpSe5oZcLZUhfU
-InrLM6uxAsoOayOgFce
-name: "Barbara"
-status: "away"