如何在Firechat中创建聊天室？

Question

我正在使用Firechat，并且能够成功启动聊天窗口。 我正在使用Firebase自定义身份验证，并且可以顺利登录。 但是，我现在尝试创建一个新的聊天室，然后输入它。 根据Firechat文档，我进行了以下操作：

<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<script src='https://cdn.firebase.com/js/client/2.0.2/firebase.js'></script>
<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>

    <script type='text/javascript'>
    var fireBase = new Firebase("https://XXXXXXXXX.firebaseio.com/");

    function initChat(authData) {
      var Firechat = new FirechatUI(fireBase, document.getElementById('firechat'));
      Firechat.setUser(authData.uid, "Username");
      Firechat.createRoom("Test chat room", "public");
    }

    fireBase.authWithCustomToken("UNIQUE_TOKEN", function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Login successful", authData);
        initChat(authData);
      }
    });
    </script>
    <div id='firechat'>
    </div>

</body>
</html>

在javascript控制台中，我可以看到登录成功：

Login successful Object { auth: Object, expires: XXXXXXXXX, token: "XXXXXXXX…", uid: "XXXXXX", provider: "custom" }

但是找不到createRoom函数：

TypeError: Firechat.createRoom is not a function

知道这里出了什么问题吗？

Answer 1

从文档中： Firechat.createRoom(roomName, roomType, callback(roomId))

创建具有给定名称（字符串）和类型（字符串-公共或私有）的新房间，并在完成时调用带有房间ID的回调。

似乎您没有回调。

 Firechat.prototype.createRoom = function(roomName, roomType, callback) {
    var self = this,
        newRoomRef = this._roomRef.push();

    var newRoom = {
      id: newRoomRef.name(),
      name: roomName,
      type: roomType || 'public',
      createdByUserId: this._userId,
      createdAt: Firebase.ServerValue.TIMESTAMP
    };

    if (roomType === 'private') {
      newRoom.authorizedUsers = {};
      newRoom.authorizedUsers[this._userId] = true;
    }

    newRoomRef.set(newRoom, function(error) {
      if (!error) {
        self.enterRoom(newRoomRef.name());
      }
      if (callback) {
        callback(newRoomRef.name());
      }
    });
  };

来源： https : //firechat.firebaseapp.com/docs/firechat.html

Answer 2

因此，事实证明，Firechat javascript插件中使用了两个类（即正确的词）：

var chat = new FirechatUI
var chat = new Firechat

因为它们看起来是如此相似，所以我没有注意到差异。 在文档中，我什么地方都找不到FirechatUI实例的详细信息（即使在github自述文件中推荐使用此代码）。

因此，无论如何， new FirechatUI会加载聊天的实际UI。 new Firechat加载了API，该API允许您与聊天插件（而不是 UI）对话。 这是一个重要的区别。 此处找到的文档仅与API有关，因此如果您启动new Firechat实例。 但是，诀窍是启动并运行UI，然后直接与之交互（执行诸如创建新房间或进入房间的操作）。 老实说，我还没有找到如何以官方/推荐的方式来做到这一点。 我唯一能想到的就是黑客。 很难看，但是可以用。 下面的代码包含创建新聊天室（使用Firechat ）和在UI中打开特定聊天室的功能（由于我找不到直接与UI交互的方式，因此该位置被黑了）。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>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>

<!-- This plugin here: https://gist.github.com/buu700/4200601 -->
<script type="text/javascript" src="js/arrive.js"></script>

<style type="text/css">
#firechat{width:400px}
</style>

</head>

<body>

<h1>Test</h1>

    <script type='text/javascript'>
    var fireBase = new Firebase("https://XXXXXX.firebaseio.com/");

    function roomChatSetup(authData) {
        var chat = new Firechat(fireBase);
        chat.setUser(authData.uid, "My User Name", function(user) {
          console.log("Creating chatroom...");
          chat.createRoom("New Chatroom Name", "public", function(roomId) {
            console.log("Created room "+roomId);
          });
        $("#firechat").html("<div class='alert alert-success'>Your chatroom has been set up. Refresh to view</div>");
       });
    }

    function initChat(authData) {
        var chatUI = new FirechatUI(fireBase, document.getElementById('firechat'));
        chatUI.setUser(authData.uid, "My User Name");
        console.log("Simulating clicks...");
        $("#firechat-tab-content div.tab-pane").waitUntilExists(function(){
          console.log("Close all other tabs by simulating clicking the X button");
          $("#firechat-tab-content div.tab-pane:not(#XXXXXXXXX) a.close").click(); // XXXXX should have the chatroom name of the one you want to open
        });
        $("#firechat-btn-rooms").waitUntilExists(function(){
          $("#firechat-btn-rooms").click();
          console.log("Open submenu to load all possible rooms");
        });
        $("li[data-room-id='XXXXXXXXXXXXX']").waitUntilExists(function(){
          $("li[data-room-id='XXXXXXXXXX'] a").click();
          console.log("Simulating clicking on chatroom XXXXXXXXXXXXXX");
        });
    }

    fireBase.authWithCustomToken("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Login successful", authData);

            // Here you can use a programming language to decide. If you already have a
            // chatroom, run initChat. If you don't, run createRoom. I haven't been 
            // able to run them both at the same time. 

            initChat(authData);
            // or:
            roomChatSetup(authData);

         }
    });
    </script>

    <div id="firechat"></div>

</body>
</html>

Answer 3

FirechatUI对象与Firechat对象是分开的。 FirechatUI具有与Firechat不同的方法。

为了从FirechatUI对象获取关联的Firechat对象，您可以执行以下操作：

let chatUI = new FirechatUI(chatRef, document.getElementById("firechat-wrapper"));
let chat = chatUI._chat;

然后，您可以进行任何正常的Firechat操作，而不会出现任何问题。

chat.setUser(user.uid, firstName, function(user) {
    chat.resumeSession();
});

请记住，实际上不应该使用_chat元素（您可以从命名约定中得知），但是由于FirechatUI没有适当地公开足够的功能，因此这可能是最干净的方法。

如何在Firechat中创建聊天室？

问题描述

3 个解决方案

解决方案1
2 2016-02-02 18:28:46

解决方案2
1 2016-02-03 15:02:54

解决方案3
0 2017-12-20 16:23:49

如何在Firechat中创建聊天室？

问题描述

3 个解决方案

解决方案1 2 2016-02-02 18:28:46

解决方案2 1 2016-02-03 15:02:54

解决方案3 0 2017-12-20 16:23:49

解决方案1
2 2016-02-02 18:28:46

解决方案2
1 2016-02-03 15:02:54

解决方案3
0 2017-12-20 16:23:49