javascript - 为什么 Firechat 没有初始化？-6ren

javascript - 为什么 Firechat 没有初始化？

转载作者：行者123 更新时间：2023-11-28 19:04:45

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) {...})事件监听器仅在用户登录期间附加，因此在页面刷新时您将错过获取持久 session 的机会。请尝试立即附加它，以便在用户已通过身份验证时自动实例化 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>

关于javascript - 为什么 Firechat 没有初始化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31927049/

文章推荐： css - div位置居中

文章推荐： ios - 应用被拒绝，但应用内购买正在审核中

文章推荐： javascript - 对象存在，但在 YouTube 响应中仍未定义？

文章推荐： Javascript:指定数组的长度并调用函数

javascript - Firechat - 无法发送消息
我有一个 Firechat正确初始化的实现，但登录后您可以创建和进入房间，但消息无处可去。我已经构建了处理消息发送的函数，但我认为它没有将 FirechatUI 和 Firechat 对象正确连接到
javascript - Firechat/Firebase 用户管理员
我运行了由 Firebase 提供支持的 Firechat，并与我的 Wordpress 数据库集成。它工作得很好，但我缺少的一件事是聊天管理员/管理员。据我所知，通过查看rules.json :
javascript - 如何在 Firechat 中创建聊天室？
我正在使用 Firechat并且我能够成功启动聊天窗口。我正在使用 Firebase custom authentication我可以毫无问题地登录。但是，我现在尝试创建一个新的聊天室，然后进入它。基
javascript - 为什么 Firechat 没有初始化？
Firechat 是“基于 Firebase 构建的开源实时聊天”。你可以找到它的源代码here . 我尝试在验证用户身份后初始化 Firechat，但聊天不会初始化。我在控制台上没有收到任何错误。这
javascript - 使用 Wordpress 用户或数据库验证 Firebase/Firechat
我正在尝试使用我的 Wordpress 用户通过 Firebase/Firechat 自动进行身份验证。您可以在此处的文档中看到，Firebase 可以通过使用安全的 Json Web token
ios - 在 iOS 中实现 FireChat 时图像未上传到 Firebase 存储？
我正在关注 Google 文档以在我的 iOS 应用程序中实现 FireChat。但是在尝试上传图像时，它在控制台中显示以下错误。 Permission denied. Could not acces

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么 Firechat 没有初始化？