如何使用 React 和 TalkJS 构建类似 LinkedIn 的消息应用程序 - 第 2 部分

2025-06-10

如何使用 React 和 TalkJS 构建类似 LinkedIn 的消息应用程序 - 第 2 部分

在本教程的第一部分中，我们了解了如何构建一个类似 LinkedIn 的、不带聊天功能的消息应用。在本部分中，我们将学习如何轻松地将聊天功能集成到此应用或任何其他 React 应用中。如果您错过了，这里有一个我们正在尝试构建的应用的现场演示。让我们继续在应用中设置 TalkJS。

设置 TalkJS

创建帐户并添加用户角色

首先，您需要创建一个 TalkJS 帐户。要创建帐户，请访问TalkJS 网站。在导航菜单上，您会看到一个蓝色按钮，上面写着“免费试用”。点击此按钮并创建一个帐户。如果创建成功，您将被重定向到 TalkJS 仪表板。请记下您的帐户，APP ID您将在本教程的后面部分用到它。

TalkJS 允许不同的用户组通过分配“角色”来拥有不同的设置。您可以完全控制哪个用户获得哪个角色。由于我们希望在应用中实现文件共享和位置共享等功能，因此需要在 TalKJS 仪表板上创建一个角色。

要创建角色，请向下滚动页面，直到看到角色。点击“+”按钮创建一个新角色。我们将该角色命名为Member。点击“保存”按钮。接下来，将显示此用户的设置。点击“启用文件共享”和“位置共享”，以及您想要启用的任何其他设置。

Talkjs 仪表板

将 TalkJS 添加到应用程序

在 React 应用上设置 TalkJS 也非常简单。要安装，我们运行以下命令。

npm install talkjs --save
Enter fullscreen mode Exit fullscreen mode

完成后，您可以通过导入 TalkJS 在我们的项目中的任何文件中使用它。

import Talk from "talkjs";
Enter fullscreen mode Exit fullscreen mode

TalkJS 的设置就到这里。现在让我们开始构建应用程序。

设置聊天框

首先，我们将 TalkJS 导入到文件中

    import React, { Component } from 'react';
    import Talk from "talkjs";
    import { dummyUsers } from "./Users";

    ...
Enter fullscreen mode Exit fullscreen mode

接下来，我们添加一个方法来处理“消息”按钮的点击事件。将其添加到组件中。

    ...    
    handleClick(userId) {

            /* Retrieve the two users that will participate in the conversation */
            const { currentUser } = this.state;
            const user = dummyUsers.find(user => user.id === userId)

            /* Session initialization code */
            Talk.ready
            .then(() => {
                /* Create the two users that will participate in the conversation */
                const me = new Talk.User(currentUser);
                const other = new Talk.User(user)

                /* Create a talk session if this does not exist. Remember to replace the appId with the one on your dashboard */
                if (!window.talkSession) {
                    window.talkSession = new Talk.Session({
                        appId: YOUR_APP_ID,
                        me: me
                    });
                } 

                /* Get a conversation ID or create one */
                const conversationId = Talk.oneOnOneId(me, other);
                const conversation = window.talkSession.getOrCreateConversation(conversationId);

                /* Set participants of the conversations */
                conversation.setParticipant(me);
                conversation.setParticipant(other);

                /* Create and mount chatbox in container */
                this.chatbox = window.talkSession.createChatbox(conversation);
                this.chatbox.mount(this.container);
            })            
            .catch(e => console.error(e));
        }
Enter fullscreen mode Exit fullscreen mode

上面的代码有很多内容。让我们分析一下其中发生了什么。

用户需要加入 TalkJS 会话才能使用 TalkJS。用户无需直接登录 TalkJS 即可执行此操作。在我们的应用中，我们确保只有登录过我们应用的用户才能拥有 TalkJS 会话。我们在 行中执行此会话初始化。您可以在 TalkJS 仪表板上找到您的 APP ID。请记得用它9-21替换。YOUR_APP_ID

Lines24-30在两个用户之间创建对话，然后创建并安装聊天框。

为了使此方法有用，我们必须在点击任何“消息”按钮时调用它。我们还需要userId在调用该方法时传递用户的handleClick。让我们来做这件事。用以下代码替换 render 方法中的按钮。

     ...
         <div className="user-action">
             <button onClick={(userId) => this.handleClick(user.id)}>Message</button>
          </div>

    ...
Enter fullscreen mode Exit fullscreen mode

我们还需要添加聊天框所挂载的容器。因此，在 render 方法中，我们还添加了以下内容。

...
     </ul>
         <div className="chatbox-container" ref={c => this.container = c}>
             <div id="talkjs-container" style={{height: "300px"}}><i></i>        </div>
             </div>
         </div>
    ...
Enter fullscreen mode Exit fullscreen mode

现在点击任意一个“消息”按钮。点击任何一个按钮，你都会看到聊天框弹出。

为了让它看起来更像 LinkedIn，我们通过设置类的样式，将聊天框定位到页面的右下角chatbox-container。因此，请将以下样式添加到您的App.css文件中。

.chatbox-container {
  position: absolute;
  bottom: 0;
  height: 400px;
  right: 5%;
  width: 300px;
}
Enter fullscreen mode Exit fullscreen mode

这应该是您单击任何消息按钮时显示的页面。

已完成的 MyNetwork 页面

就这样！我们取得了显著进展。你有没有发现设置聊天功能有多简单？快来和任意虚拟用户聊天吧。当然，他们无法回复你，因为他们是虚拟用户。

让我们继续讨论最后一个组件——消息传递组件。

创建消息组件

消息组件保存了当前用户与其他用户的所有对话列表，就像在 LinkedIn 上一样。TalkJS 也简化了设置。让我们创建一个基本组件。

import React, { Component, Fragment } from 'react';
import Talk from "talkjs";

class Messaging extends Component {

    render() {
        return (
            <Fragment>
                <div style={{height: '500px'}} className="inbox-container" ref={c => this.container = c}>Loading...</div>
            </Fragment>
        );
    }
}

export default Messaging;
Enter fullscreen mode Exit fullscreen mode

记得在文件中导入这个文件App.js并为其创建路线。

...
import Login from './Components/Login';
import MyNetwork from './Components/MyNetwork';
import Messaging from './Components/Messaging';

...

...

            <Route path="/" exact component={Login}/> 
            <Route path="/mynetwork" component={MyNetwork}/>
            <Route path="/messaging" component={Messaging}/>
         </Router>
     </div>
...
Enter fullscreen mode Exit fullscreen mode

您现在应该只会在屏幕上看到正在加载...的消息。

让我们设置 TalkJS 收件箱。首先，我们从本地存储中检索当前用户，并将其添加到组件的状态中。TalkJS 将使用它来获取对话并将其添加到状态中。在第 4 行，我们初始化收件箱的值。

constructor(props) {
    super(props);

    this.inbox = undefined;
    let currentUser;
    const currentTalkjsUser = localStorage.getItem('currentTalkjsUser');
    if (currentTalkjsUser) {
        currentUser = JSON.parse(currentTalkjsUser)
    }

    this.state = {
        currentUser
    }
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们添加一个componentDidMount生命周期方法并在那里设置收件箱。

componentDidMount() {
    Talk.ready
        .then(() => {
            const me = new Talk.User(this.state.currentUser);

            if (!window.talkSession) {
                window.talkSession = new Talk.Session({
                    appId: YOUR_APP_ID,
                    me: me
                 });
            }

            this.inbox = window.talkSession.createInbox();
            this.inbox.mount(this.container);

        })
        .catch(e => console.error(e));
}
Enter fullscreen mode Exit fullscreen mode

请注意，这与我们创建聊天框的方式非常相似。尽管存在细微的差别。

在 行中，我们13-14使用 而不是。此外，我们不必创建其他用户，因为这基本上显示了您与用户进行过的先前对话。createChatboxcreateInbox

如果您已添加上述代码，现在应该可以看到收件箱了。如果您使用聊天框发起了任何对话，您应该会在收件箱中看到它。否则，它会显示“您尚未发起任何对话”。

带有对话的消息页面

恭喜你完成了这一步。你已经构建了一个类似 LinkedIn 的消息应用程序。

结论

在本教程中，我们了解了使用 TalkJS 为 React 应用添加消息功能是多么简单。TalkJS 省去了使用 API 和构建消息用户界面的所有复杂工作。

我们构建了一个登录页面来检索当前用户的数据。我们还构建了一个“MyNetwork”页面，类似于 LinkedIn 的“MyNetwork”。在这个页面上，我们显示了一个用户列表和一个按钮，用户可以点击该按钮向列表中的任何用户发送消息。我们使用 TalkJS 设置了聊天框。最后，我们使用 TalkJS Inbox 构建了消息组件。

我希望你也享受了构建过程的乐趣，因为我也一样。你可以查看Github 仓库获取完整代码。

如需进一步了解，您可以参考以下文档。TalkJS
入门
TalkJS 收件箱
TalkJS 聊天框

链接链接 https://dev.to/talkjs/how-to-build-a-linkedin-like-messaging-app-with-react-and-talkjs-part-2-1joa
Devto 翻译
PREV
如何在您的网站/应用上检测 VPN 用户
NEXT
如何将 React Query 与 React 和 GraphQL 结合使用