npm 包 trollbox 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

trollbox 是一个 npm 包，它可以帮助我们在浏览器上快速构建一个聊天室应用。使用 trollbox 可以方便地实现聊天室的前后端交互，并且具有高度的灵活性和扩展性。

在本文中，我们将详细介绍 trollbox 的使用教程，主要包括：安装、初始化、使用 3 个核心组件，以及扩展使用 trollbox。

安装

为了使用 trollbox，我们需要先安装它。在终端中输入以下命令：

npm install trollbox

然后，我们就可以在项目中使用 trollbox 了。

初始化

在使用 trollbox 之前，我们需要进行初始化。初始化的方式有两种：

1. 使用 CDN

如果我们采用使用 CDN 的方式引入 trollbox，则可以直接在 HTML 文件中添加以下代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  --------- ------- -----------
  ------- --------------------------------------------------------------------------
-------
------
  ---- ---------------
  --------
    --- ------- - --- ------------------
      --- -------
      ------- --------------------
    ---
  ---------
-------
-------

2. 在代码中引入

如果我们采用在代码中引入的方式，则需要先引入 trollbox：

import * as trollbox from 'trollbox';

然后，我们可以通过以下方式进行初始化：

var chatbox = new trollbox.Chatbox({
  el: '#app',
  apiUrl: 'https://myapi.com'
});

使用 `trollbox`

在 trollbox 中，主要包含 3 个核心组件：Chatbox、Messenger 和 Conversation。

Chatbox

Chatbox 是 trollbox 的主要组件，它负责整个聊天室的管理，包括：创建聊天室、加入聊天室、获取聊天室信息等。在使用 trollbox 前，我们需要创建一个 Chatbox 的实例：

var chatbox = new trollbox.Chatbox({
  el: '#app',
  apiUrl: 'https://myapi.com'
});

上面的代码创建了一个 Chatbox 实例，并将它挂在到一个 DOM 节点上，同时指定了 API 的地址。在实例化 Chatbox 时，我们可以传递以下参数：

el（必须）：指定挂载的 DOM 节点。
apiUrl（必须）：指定 API 的地址。
title（可选）：指定聊天室的标题。
avatar（可选）：指定聊天室的头像。
type（可选）：指定聊天室的类型（包括 public、group、private）。
token（可选）：指定 JWT 的 token。

Messenger

Messenger 负责消息的发送和接收，我们可以使用 Messenger 来实现一对一或一对多的聊天。在使用 Messenger 前，我们需要先获取所在的 Conversation：

var conversation = chatbox.getConversationById('conversation_id');
var messenger = conversation.getMessenger('user_id');

上面的代码获取了一个指定 conversation_id 的 Conversation 实例，并从该实例中获取了一个指定 user_id 的 Messenger 实例。在实例化 Messenger 时，我们可以传递以下参数：

user（必须）：指定 Messenger 与之关联的用户。
conversation（必须）：指定 Messenger 所属的 Conversation 实例。
messageInput（必须）：指定用于输入消息的元素。
messageBox（必须）：指定显示消息的容器。

下面是一个简单的示例：

-- -------------------- ---- -------
---- ------------------
  ---- --------------------
  ------ ----------- -------------------
  ------- ------------------------------
------

--------
  --- ------------ - -----------------------------------------------
  --- --------- - -------------------------------------
  --- ---------- - ------------------------------------
  --- ------------ - -----------------------------------------
  --- ---------- - ---------------------------------------

  ------------------------------------ ---------- -
    ------------------------------------------
    ------------------ - ---
  ---

  ------------------------------------- -
    --- --- - ------------------------------
    ------------- - -------------
    ----------------------------
  ---
---------

在上面的代码中，我们创建了一个 conversation 实例，然后从该实例中获取了一个 messenger 实例，在这个实例中，我们可以使用 sendMessage 方法发送消息，使用 onMessage 方法监听消息。暂时忽略 onMessage 方法的具体实现，它会在下面的例子中详细介绍。

Conversation

Conversation 负责聊天室的管理，包括：获取成员列表、获取消息列表、加入聊天室等。在实例化 Chatbox 后，我们可以通过以下方式获取 Conversation 实例：

var conversation = chatbox.getConversationById('conversation_id');

上面的代码通过 Chatbox 实例的 getConversationById 方法获取了一个指定 conversation_id 的 Conversation 实例。在实例化 Conversation 时，我们可以传递以下参数：

id（必须）：指定聊天室的 id。
title（可选）：指定聊天室的标题。
avatar（可选）：指定聊天室的头像。
type（可选）：指定聊天室的类型（包括 public、group、private）。

下面是一个简单的示例：

-- -------------------- ---- -------
---- ------------------
  ---- --------------------
  ------ ----------- -------------------
  ------- ------------------------------
------

--------
  --- ------------ - -----------------------------------------------
  --- ---------- - ------------------------------------
  --- ------------ - -----------------------------------------
  --- ---------- - ---------------------------------------

  ------------------------------------ ---------- -
    ---------------------------------------------
    ------------------ - ---
  ---

  ---------------------------------------- -
    --- --- - ------------------------------
    ------------- - -------------
    ----------------------------
  ---
---------

在上面的代码中，我们创建了一个 conversation 实例，在这个实例中，我们可以使用 sendMessage 方法发送消息，使用 onMessage 方法监听消息。

扩展使用 `trollbox`

在使用 trollbox 之前，我们可以对它进行一些扩展，以实现更丰富的功能。下面是一些常用的扩展：

自定义消息类型

-- -------------------- ---- -------
--- ------- - --- ------------------
  --- -------
  ------- --------------------
  ------------- -
    ------ --------
    ------ --------
    ----- ------
  -
---

------------------------------------ ----------------- ------------- -
  --- --- - ------------------------------
  --- --- - ------------------------------
  ------- - -----------------
  ---------------------
  --------------------------------
---

上面的代码定义了三个消息类型：IMAGE、VOICE 和 FILE。然后，我们使用 registerMessageType 方法注册 IMAGE 消息类型，并指定处理逻辑。

自定义用户信息

-- -------------------- ---- -------
--- ------- - --- ------------------
  --- -------
  ------- --------------------
  ------------ ---------------- -
    ------ -------------------------------- - --------------------- -- -----------------
  -
---

------------------------------------- -
  --- --- - ------------------------------
  --- --- - ------------------------------
  ------- - ----------------
  ---------------------
  --- ---- - -------------------------------
  -------------- - --------------
  ----------------------
  ------ ----
---

上面的代码定义了一个 getUserData 函数用于获取用户信息，然后使用 onUserData 方法指定用户信息的处理逻辑。

自定义请求方式

-- -------------------- ---- -------
--- ------- - --- ------------------
  --- -------
  ------- --------------------
  -------- ----------------- -
    ------ ------------------ -
      ------- -------------- -- ------
      -------- --------------- -- ---
      ----- ------------ -- ----
    ---------------- -- -----------------
  -
---

上面的代码定义了一个 request 函数用于发送请求，然后在实例化 Chatbox 时指定该函数。

结语

本文介绍了 trollbox 的安装、初始化和使用方法，同时也对 trollbox 进行了一些扩展。希望本文能够帮助大家更好地使用 trollbox 构建聊天室应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562dd81e8991b448e04e0

npm 包 trollbox 使用教程

前言

安装

初始化