如何在Firechat中创建聊天室？

Question

I am using Firechat and I am able to successfully initiate the chat window. 我正在使用Firechat，并且能够成功启动聊天窗口。 I am using Firebase custom authentication and I can login without any problem. 我正在使用Firebase自定义身份验证，并且可以顺利登录。 However, I now try to create a new chat room and then enter it. 但是，我现在尝试创建一个新的聊天室，然后输入它。 Based on the Firechat documentation I did the following: 根据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>

In the javascript console I can see that login is successful: 在javascript控制台中，我可以看到登录成功：

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

But the createRoom function is not found: 但是找不到createRoom函数：

TypeError: Firechat.createRoom is not a function

Any idea what is going wrong here? 知道这里出了什么问题吗？

Answer 1

From the docs: Firechat.createRoom(roomName, roomType, callback(roomId)) 从文档中： Firechat.createRoom(roomName, roomType, callback(roomId))

Creates a new room with the given name (string) and type (string - public or private) and invokes the callback with the room ID on completion. 创建具有给定名称（字符串）和类型（字符串-公共或私有）的新房间，并在完成时调用带有房间ID的回调。

It would seem that you do not have a callback. 似乎您没有回调。

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

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

Answer 2

So it turns out that there are two classes (is that the right word) used in the Firechat javascript plugin: 因此，事实证明，Firechat javascript插件中使用了两个类（即正确的词）：

var chat = new FirechatUI
var chat = new Firechat

Because they seem so similar I did not notice the difference. 因为它们看起来是如此相似，所以我没有注意到差异。 Nowhere in the documentation have I been able to find details of the FirechatUI instance (even though this code is recommended on the github readme ). 在文档中，我什么地方都找不到FirechatUI实例的详细信息（即使在github自述文件中推荐使用此代码）。

So anyway, the thing is that new FirechatUI loads the actual UI for the chat. 因此，无论如何， new FirechatUI会加载聊天的实际UI。 new Firechat loads the API that allows you to talk to the chat plugin (but NOT to the UI). new Firechat加载了API，该API允许您与聊天插件（而不是 UI）对话。 This is an important difference. 这是一个重要的区别。 The documentation found here only relates to the API so if you initiate a new Firechat instance. 此处找到的文档仅与API有关，因此如果您启动new Firechat实例。 However, the trick is to get the UI up and running and then interact with it directly (doing things like creating new rooms or entering rooms). 但是，诀窍是启动并运行UI，然后直接与之交互（执行诸如创建新房间或进入房间的操作）。 I have honestly not found out how to do this the official/recommended way. 老实说，我还没有找到如何以官方/推荐的方式来做到这一点。 The only thing I've been able to come up with is a hack. 我唯一能想到的就是黑客。 It's ugly, but it works. 很难看，但是可以用。 The code below includes functionality to create a new chat room (using Firechat ) and to open a particular chatroom in the UI (that bit is hacked as I couldn't find a way to interact with the UI directly). 下面的代码包含创建新聊天室（使用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

The FirechatUI object is separate from the Firechat object. FirechatUI对象与Firechat对象是分开的。 FirechatUI does not have the same methods that Firechat does. FirechatUI具有与Firechat不同的方法。

In order to get the associated Firechat object from a FirechatUI object you can do the following: 为了从FirechatUI对象获取关联的Firechat对象，您可以执行以下操作：

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

You can then do any normal Firechat operations without any issues. 然后，您可以进行任何正常的Firechat操作，而不会出现任何问题。

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

Please keep in mind that the _chat element is not really supposed to be used (as you can tell from the naming convention), but since FirechatUI does not properly expose enough functionality this is probably the cleanest way to do it. 请记住，实际上不应该使用_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