高效实现提及聊天框

2023-10-01 06:46:23

实现评论内容以及在聊天框中@人员，并发表评论后实时推送相关人员钉钉消息。本文将重点介绍如何实现满足此类需求的聊天框，同时提供清晰步骤和示例代码。

设计思路

实现提及聊天框，我们可以使用前端框架如React或Vue，并利用钉钉提供的SDK完成钉钉消息的实时推送。整个实现过程可分为以下几个步骤：

创建一个聊天框组件，包含输入框和发送按钮。
在输入框中添加一个“@”符号，当用户输入“@”时，显示一个自动补全列表，其中包含所有可以被提及的人员。
当用户选择一个人员后，在输入框中添加一个“@”符号，后面跟着该人员的姓名。
当用户点击发送按钮时，将评论内容和被提及的人员发送到服务器。
服务器收到评论内容后，将评论内容和被提及的人员的钉钉ID发送到钉钉服务器。
钉钉服务器收到消息后，将消息推送到被提及的人员的钉钉客户端。

实现步骤

1. 创建聊天框组件

<div class="chat-box">
  <input type="text" id="chat-input" placeholder="Enter your message">
  <button id="chat-send-button">Send</button>
</div>

2. 在输入框中添加“@”符号

const chatInput = document.getElementById('chat-input');
chatInput.addEventListener('keyup', (event) => {
  if (event.key === '@') {
    // 显示自动补全列表
    showAutoCompleteList();
  }
});

3. 当用户选择一个人员后，在输入框中添加“@”符号，后面跟着该人员的姓名

const autoCompleteList = document.getElementById('auto-complete-list');
autoCompleteList.addEventListener('click', (event) => {
  const selectedPerson = event.target.textContent;
  chatInput.value += `@${selectedPerson} `;
});

4. 当用户点击发送按钮时，将评论内容和被提及的人员发送到服务器

const chatSendButton = document.getElementById('chat-send-button');
chatSendButton.addEventListener('click', (event) => {
  const commentContent = chatInput.value;
  const mentionedPeople = []; // 从聊天框中提取被提及的人员

  // 将评论内容和被提及的人员发送到服务器
  sendComment(commentContent, mentionedPeople);
});

5. 服务器收到评论内容后，将评论内容和被提及的人员的钉钉ID发送到钉钉服务器

function sendComment($commentContent, $mentionedPeople) {
  // 获取被提及的人员的钉钉ID
  $钉钉IDs = getDingTalkIds($mentionedPeople);

  // 将评论内容和被提及的人员的钉钉ID发送到钉钉服务器
  sendDingTalkMessage($commentContent, $钉钉IDs);
}

6. 钉钉服务器收到消息后，将消息推送到被提及的人员的钉钉客户端

@PostMapping("/sendDingTalkMessage")
public void sendDingTalkMessage(@RequestBody SendDingTalkMessageRequest request) {
  // 获取被提及的人员的钉钉客户端ID
  List<String> clientIds = getClientIds(request.get钉钉IDs());

  // 将消息推送到被提及的人员的钉钉客户端
  pushMessage(request.getCommentContent(), clientIds);
}