前言
trollbox 是一个 npm 包，它可以帮助我们在浏览器上快速构建一个聊天室应用。使用 trollbox 可以方便地实现聊天室的前后端交互，并且具有高度的灵活性和扩展性。
在本文中，我们将详细介绍 trollbox 的使用教程，主要包括：安装、初始化、使用 3 个核心组件，以及扩展使用 trollbox。
安装
为了使用 trollbox，我们需要先安装它。在终端中输入以下命令：
--- ------- --------
然后，我们就可以在项目中使用 trollbox 了。
初始化
在使用 trollbox 之前，我们需要进行初始化。初始化的方式有两种：
1. 使用 CDN
如果我们采用使用 CDN 的方式引入 trollbox，则可以直接在 HTML 文件中添加以下代码：
--------- -----
------
------
----- ----------------
--------- ------- -----------
------- --------------------------------------------------------------------------
-------
------
---- ---------------
--------
--- ------- - --- ------------------
--- -------
------- --------------------
---
---------
-------
-------2. 在代码中引入
如果我们采用在代码中引入的方式，则需要先引入 trollbox：
------ - -- -------- ---- -----------
然后，我们可以通过以下方式进行初始化：
--- ------- - --- ------------------ --- ------- ------- ------------------- ---
使用 trollbox
在 trollbox 中，主要包含 3 个核心组件：Chatbox、Messenger 和 Conversation。
Chatbox
Chatbox 是 trollbox 的主要组件，它负责整个聊天室的管理，包括：创建聊天室、加入聊天室、获取聊天室信息等。在使用 trollbox 前，我们需要创建一个 Chatbox 的实例：
--- ------- - --- ------------------ --- ------- ------- ------------------- ---
上面的代码创建了一个 Chatbox 实例，并将它挂在到一个 DOM 节点上，同时指定了 API 的地址。在实例化 Chatbox 时，我们可以传递以下参数：
el（必须）：指定挂载的 DOM 节点。apiUrl（必须）：指定 API 的地址。title（可选）：指定聊天室的标题。avatar（可选）：指定聊天室的头像。type（可选）：指定聊天室的类型（包括 public、group、private）。token（可选）：指定 JWT 的 token。
Messenger
Messenger 负责消息的发送和接收，我们可以使用 Messenger 来实现一对一或一对多的聊天。在使用 Messenger 前，我们需要先获取所在的 Conversation：
--- ------------ - ----------------------------------------------- --- --------- - -------------------------------------
上面的代码获取了一个指定 conversation_id 的 Conversation 实例，并从该实例中获取了一个指定 user_id 的 Messenger 实例。在实例化 Messenger 时，我们可以传递以下参数：
user（必须）：指定Messenger与之关联的用户。conversation（必须）：指定Messenger所属的Conversation实例。messageInput（必须）：指定用于输入消息的元素。messageBox（必须）：指定显示消息的容器。
下面是一个简单的示例：
---- ------------------
---- --------------------
------ ----------- -------------------
------- ------------------------------
------
--------
--- ------------ - -----------------------------------------------
--- --------- - -------------------------------------
--- ---------- - ------------------------------------
--- ------------ - -----------------------------------------
--- ---------- - ---------------------------------------
------------------------------------ ---------- -
------------------------------------------
------------------ - ---
---
------------------------------------- -
--- --- - ------------------------------
------------- - -------------
----------------------------
---
---------在上面的代码中，我们创建了一个 conversation 实例，然后从该实例中获取了一个 messenger 实例，在这个实例中，我们可以使用 sendMessage 方法发送消息，使用 onMessage 方法监听消息。暂时忽略 onMessage 方法的具体实现，它会在下面的例子中详细介绍。
Conversation
Conversation 负责聊天室的管理，包括：获取成员列表、获取消息列表、加入聊天室等。在实例化 Chatbox 后，我们可以通过以下方式获取 Conversation 实例：
--- ------------ - -----------------------------------------------
上面的代码通过 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