关于IM即时通讯系统部分交互交互功能实现的总结。

需求介绍

最近项目中有即时通讯的功能需求,需要实现一些小的功能点,比如:

  • Mention功能(@);
  • 输入框的发送及换行;
  • 后续还会补充

功能点

项目中使用的textarea元素实现多行输入。

Mention功能(@)

项目中我们使用了融云的SDK,可以实现@功能,但是前端的交互界面需要自主开发,所以总结一下前端功能实现的方案。

主要功能

  1. 输入框输入@,判断出现用户提示弹窗的时机及可选用户的过滤;
  2. 选中用户后,自动补全输入内容;
  3. 消息体解析时,需要对@用户的文字进行特别标识。

主要对第一个功能的实现做说明

实现用户提示

算法流程

  1. 监听 textarea 中输入字符事件,通过 event.target.selectionStart 属性获取当前光标位置;
  2. 从当前光标位置向前遍历字符,直到找到第一个@。如果先找到了空格,则结束遍历,不做任何处理,等待下次输入;
  3. 找到 @ 后,截取 @ 与光标中间字符,通过字符过滤当前对话成员,获取提示列表所需数据;
  4. 有数据则显示列表供用户选择;没有数据则不显示用户列表,等待下次输入;
  5. 选择列表中用户后,则使用当前用户信息补全输入的消息。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 监听用户输入后的回调函数
showMentionedList(e) {
const target = e.target;
const str = target.value;

let pos = target.selectionStart;
while (pos) {
if (str.charAt(pos - 1) === ' ') {
break;
} else if (str.charAt(pos - 1) === '@') {
const searchText = str.slice(pos, target.selectionStart);
//判断当前会话成员中是否存要查找的用户
// 若存在则显示用户选择列表,不存在则不作任何处理

break;
}
pos--;
}
return;
}

输入框的发送及换行

主要功能

  • 实现输入框的单击回车发送;
  • 回车组合键的换行。

算法流程

  1. 输入框监听 keydown 事件;
  2. 事件触发后,执行回调函数 keydown()
  3. 判断是否为回车点击、回车组合事件,通过 event 属性来判断。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
keydown(event) {
if (event.keyCode === 13 && !(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
const message = event.target.value;
if (message) {
// 发送消息
this.imService.sendMessage({
content: this.emojiService.emojiToSymbol(message)
}, MessageType.MESSAGE_TEXT);

// 清空输入框
event.target.value = '';
}

return false;
} else if (event.keyCode === 13 && (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
// 组合键实现换行
event.target.value += '\n';
}

event.stopPropagation();
}