Firechat是“基于Firebase构建的开源实时聊天”。您可能会找到其源代码here。
我在验证用户身份后尝试初始化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);
}
最佳答案
我在上面的代码中看到了一些问题，这些问题在修复后使此演示可以在我的本地计算机上运行：
表单中的字段名称分别命名为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>