Почему Firechat не инициализируется?

Firechat - это «чат с открытым исходным кодом в реальном времени, построенный на Firebase». Вы можете найти его исходный код here.Почему Firechat не инициализируется?

Я пытаюсь инициализировать Firechat после аутентификации пользователя, но чат не будет инициализироваться. Я не вижу ошибок на консоли. Это код (нет CSS). Обычно я регистрирую пользователя, а затем пытаюсь войти в него.

HTML:

<html> 
<head> 
    <title></title> 

    <!-- jQuery --> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> 

    <!-- Firebase --> 
    <script src='https://cdn.firebase.com/js/client/2.1.0/firebase.js'></script> 

    <!-- Firechat --> 
    <link rel='stylesheet' href='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css' /> 
    <script src='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js'></script> 


    <script src='authentication.js'></script> 


</head> 
<body> 

<section class="container"> 
    <div class="login"> 
     <h1>Login to Chat</h1> 
     <form> 
     <p><input type="text" name="login" value="" placeholder="Username" id="loginUsername"></p> 
     <p><input type="password" name="password" value="" placeholder="Password" id="loginPassword"></p> 
     <p class="submit"><input type="submit" name="commit" value="Login" onclick='login();'></p> 
     </form> 
    </div> 
    </section> 


<section class="container"> 
    <div class="register"> 
     <h1>Register on Chat</h1> 
     <form> 
     <p><input type="text" name="login" value="" placeholder="Username" id="registerUsername"></p> 
     <p><input type="password" name="password" value="" placeholder="Password" id="registerPassword"></p> 
     <p class="submit"><input type="submit" name="commit" value="Register" onclick='register();'></p> 
     </form> 
    </div> 
    </section> 


    <div id='firechat-wrapper'></div> 

</body> 
</html>

JS:

// Create a new Firebase reference, and a new instance of the Login client 
var chatRef = new Firebase('https://myfirebase.firebaseio.com/'); 

// Create new user 

function register() { 
    var username = document.getElementById("registerUsername").value; 
    var password = document.getElementById("registerPassword").value; 
    chatRef.createUser({ 
     email : username, 
     password : password 
    }, function(error, userData) { 
     if (error) { 
      console.log("Error creating user:", error); 
     } else { 
      console.log("Successfully created user account with uid:", userData.uid); 
     } 
    }); 

} 

// Login user 

function login() { 
    var username = document.getElementById("loginUsername").value; 
    var password = document.getElementById("loginPassword").value; 
    chatRef.authWithPassword({ 
     email : username, 
     password : password 
    }, function(error, authData) { 
     if (error) { 
      console.log("Login Failed!", error); 
     } else { 
      console.log("Authenticated successfully with payload:", authData); 
     } 
    }); 

    chatRef.onAuth(function(authData) { 
    // Once authenticated, instantiate Firechat with the user id and user name 
    if (authData) { 
    initChat(authData); 
    } 
}); 

} 


function initChat(authData) { 
    var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper')); 
    chat.setUser(authData.uid, authData[authData.provider].displayName); 
}

источник

2015-08-10 jgozal

Есть несколько проблем, которые я вижу в коде выше, который после фиксации, позволили это демо работать на моем местный компьютер:

Имена полей в формах называются login и register, что может привести к конфликтам с вашими именами методов. Попробуйте переименовать методы login и register в loginUser и registerUser, чтобы избежать возможных конфликтов с элементами в форме.
Представления формы в настоящее время заставляют страницу перемещаться от текущей страницы и быстро «обновлять», что означает, что вы никогда не полностью завершаете создание учетной записи или логин. Чтобы решить эту проблему, добавьте return false; после вызова целевого метода в вашем обработчике onclick. Например, <input type='submit' ... onclick='registerUser();return false;'>.
onAuth(function(authData) {...}) прослушиватель событий прилагается только во время входа в систему, поэтому при обновлении страницы вы перестанете собирать сохраненные сеансы. Попробуйте сразу же подключить его, чтобы вы автоматически создавали экземпляр Firechat, если пользователь уже прошел аутентификацию.

Обновленный код ниже:

JS:

// Create a new Firebase reference, and a new instance of the Login client 
var isInitialized = false; 
var chatRef = new Firebase('https://myfirebase.firebaseio.com/'); 
chatRef.onAuth(function(authData) { 
    // Once authenticated, instantiate Firechat with the user id and user name 
    if (authData && !isInitialized) { 
    initChat(authData); 
    } 
}); 

// Create new user 
function registerUser() { 
    var username = document.getElementById("registerUsername").value; 
    var password = document.getElementById("registerPassword").value; 
    chatRef.createUser({ 
    email : username, 
    password : password 
    }, function(error, userData) { 
    if (error) { 
     console.log("Error creating user:", error); 
    } else { 
     console.log("Successfully created user account with uid:", userData.uid); 
    } 
    }); 
    return false; 
} 

// Login user 
function loginUser() { 
    var username = document.getElementById("loginUsername").value; 
    var password = document.getElementById("loginPassword").value; 
    chatRef.authWithPassword({ 
    email : username, 
    password : password 
    }, function(error, authData) { 
    if (error) { 
     console.log("Login Failed!", error); 
    } else { 
     console.log("Authenticated successfully with payload:", authData); 
    } 
    }); 
    return false; 
} 


function initChat(authData) { 
    var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper')); 
    chat.setUser(authData.uid, authData.uid); 
}

HTML:

<html> 
<head> 
    <title></title> 

    <!-- jQuery --> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> 

    <!-- Firebase --> 
    <script src='https://cdn.firebase.com/js/client/2.1.0/firebase.js'></script> 

    <!-- Firechat --> 
    <link rel='stylesheet' href='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css' /> 
    <script src='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js'></script> 
</head> 
<body> 

    <section class="container"> 
    <div class="login"> 
     <h1>Login to Chat</h1> 
     <form> 
     <p><input type="text" name="login" value="" placeholder="Username" id="loginUsername"></p> 
     <p><input type="password" name="password" value="" placeholder="Password" id="loginPassword"></p> 
     <p class="submit"><input type="submit" name="commit" value="Login" onclick='loginUser();return false;'></p> 
     </form> 
    </div> 
    </section> 


    <section class="container"> 
    <div class="register"> 
     <h1>Register on Chat</h1> 
     <form> 
     <p><input type="text" name="login" value="" placeholder="Username" id="registerUsername"></p> 
     <p><input type="password" name="password" value="" placeholder="Password" id="registerPassword"></p> 
     <p class="submit"><input type="submit" name="commit" value="Register" onclick='registerUser();return false;'></p> 
     </form> 
    </div> 
    </section> 

    <div id='firechat-wrapper'></div> 
    <script src='authentication.js'></script> 
</body> 
</html>

источник

2015-08-10 20:50:04

Привет Роб - это работало отлично. Большое спасибо за вашу помощь. – jgozal

Привет, Роб: Может, ты сможешь помочь мне решить эту проблему. После аутентификации пользователя FireChat выполняет инициализацию, но в чате отсутствуют ключевые функции (http://oi58.tinypic.com/2cqgubm.jpg). Я читал документы API, но не могу понять, как различные методы FireChat взаимодействуют с # firechat-wrapper в html. Возможно, я ошибаюсь в этом вопросе. Кроме того, если это помогает, когда я создаю комнату в чате, она дает следующую ошибку: «FIREBASE WARNING: set at/room-metadata/-JwRsGpD1VLJv0XlXzKG failed: permission_denied« – jgozal

Rob - я понял это. Это была проблема с моими правилами. – jgozal

Почему Firechat не инициализируется?

ответ

Смежные вопросы