为什么Firechat没有初始化？

时间：2015-08-10 18:54:16

标签： javascript firebase

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);
}

1 个答案:

答案 0 :(得分：3)

我在上面的代码中看到了一些问题，修复后，允许此演示在我的本地计算机上运行：

  1. 表单中的字段名称名为login和register，这可能会导致与您的方法名称冲突。尝试将login和register方法重命名为loginUser和registerUser，以避免与表单中的元素发生任何潜在冲突。

  2. 表单提交当前导致页面离开当前页面并快速“刷新”，这意味着您从未完全完成帐户创建或登录。要解决此问题，请在return false;处理程序中调用目标方法后添加onclick。例如，<input type='submit' ... onclick='registerUser();return false;'>。

  3. onAuth(function(authData) {...})事件监听器仅在用户登录期间附加，因此在页面刷新时，您将错过拾取持久会话。尝试立即附加它，以便在用户已经过身份验证的情况下自动实例化Firechat。

    4. 以下更新的代码：

    <强> 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>
相关问题
最新问题