从零打造前沿Web聊天组件：从设计到交互

作者现在制作一款网页端聊天室（青春版），之前一直有这个想法，现在总算是迈出了第一步开始制作了… 雄关漫道真如铁，而今迈步从头越！

启程

当前已经完成左侧聊天室列表显示，通过http://localhost:10086/chatRoom/chatRoomList接口进行获取，可选传入当前用户id，这样将返回所有存在此用户的聊天室数据。

数据从node + express后端获取，存储数据库为mongoDB。

获取到的数据：

在这里插入图片描述

当前效果：

在这里插入图片描述

组件设计

在聊天室项目里，右侧的聊天内容区域组件设计要慎重，毕竟属于项目当中的重中之重。

因为聊天一般分为群聊和私聊，所以我准备开发两种复用组件groupChat（群聊）和privateChat（私聊）。

关于组件的引入，有两种方案可选：动态组件模式 和 单一组件条件渲染

这里我选择使用 动态组件模式，其优点：

类型隔离：群聊/私聊逻辑完全解耦
性能优化：key 保证切换时完全重建实例，可以进行异步加载
可扩展性：后续想到新的聊天类型，添加起来也非常方便

组件通信规范：
- 父组件 → 子组件：Props
- 子组件 → 父组件：Emit
- 跨层级通信：Provide/Inject

这两种聊天组件当中也具有相同的结构，实现私聊和群聊组件的高复用性设计，关键在于将通用逻辑与特殊逻辑分离。

在这里插入图片描述

对于设计思路，准备使用组合式API + 插槽组件的方式。

动手：组件创建

创建相应的组件文件，groupChat.vue、privateChat.vue和BaseMessage.vue三个组件文件

在这里插入图片描述

在BaseMessage.vue中主要由三部分组成，这也是群聊和私聊的共同点，三部分分别是：

顶部：群聊显示聊天室名称，私聊显示对方用户名
内容：消息的滚动条列表，用户头像、消息气泡、消息时间，间隔时间较久的消息间显示时间分割线
底部：消息输入框，可输入文字、图片、表情包

可以先添加相应插槽进入每一块元素，这样可以增强组件的可扩展性。

在这里插入图片描述

接下来在群聊和私聊组件当中引入基础插件，传入聊天室名称

在这里插入图片描述

将群聊组件和私聊组件引入聊天室当中，使用动态切换的方式进行加载。

<div class="chat-main"><!-- 动态组件模式 --><component :is="curChatRoom.key" :key="curChatRoom.key" :chatRoom="curChatRoom" />
</div>
...
<script>import privateChat from "@/components/privateChat.vue";import groupChat from "@/components/groupChat.vue";// 定义组件选项，这样下面可以直接用字符串名称代表组件defineOptions({components:{groupChat,privateChat}})// 定义当前聊天的聊天室，动态组件的key，用于强制组件重新渲染const curChatRoom = reactive({roomId: "",key: "groupChat",roomName: "",roomType: "public"});// 切换聊天室，设置当前聊天室和组件const switchChatRoom = (room) => {curChatRoom.roomId = room.roomId;curChatRoom.key = room.roomType == "private" ? "privateChat" : "groupChat";curChatRoom.roomName = room.roomName;}
</script>

当前效果可做到点击切换左侧聊天室，右侧群聊的名称相应改变

在这里插入图片描述

现在已经生成了可复用的群聊组件。

组件交互

在最外层数据传入群聊groupChat和私聊private组件后，组件都需要根据变化的聊天室roomId去获取此聊天室的聊天记录并展示，因为当前我尚未在后端编写相应接口，先用模拟数据代替。

这里用户头像数据不放在聊天数据一起，这能够减轻聊天数据负担。

// 聊天数据
const mockChatHistory = [{username: '张三',time: new Date('2024-07-01 10:00:00').toLocaleString(),content: '大家好，今天天气不错！'},{username: '李四',time: new Date('2024-07-01 10:05:00').toLocaleString(),content: '是的，适合出去走走。'},{username: '王五',time: new Date('2024-07-01 10:10:00').toLocaleString(),content: '有没有推荐的地方？'}
];// 对应的头像
mockChatUserAvatar = {"张三": 'icon-animal-4',"李四": 'icon-animal-9',"王五": 'icon-animal-1'
}

得到这些数据后，可以将数据传入BaseMessage.vue基础组件当中，当然外部切换聊天室需要内部对roomId进行监听。

	// 假设这里有一个外部动态变化的响应式变量 propswatch(() => props.chatRoom?.roomId, async (newRoomId, oldRoomId) => {if (newRoomId) {await getChatUserAvatar();await getChatHistory();}});

注意：接下来很多内容都是在BaseMessage.vue基础组件中，基础组件由头部、消息列表、输入框三大部分组成

时间分割线

在聊天窗中判断是否添加时间切割线，通常可参考时间维度和聊天活跃度维度标准：

时间维度：

日期变化 ：当新消息与上一条消息不在同一天时，添加时间切割线，这是最常见的判断方式，能清晰区分不同日期的聊天记录。
设定时间间隔 ：根据预设的时间间隔（如每 5 分钟、每小时等）来判断。当两条消息的时间间隔超过设定值，就添加时间切割线，方便用户按特定时间范围查看聊天记录。

聊天活跃度维度：

消息密集程度 ：若一段时间内聊天信息较为密集，即使在同一天，也可能添加多个时间切割线，以区分不同活跃时段的聊天内容；反之，若聊天信息比较稀疏，即使跨越几天，也可能不添加切割线。

根据传入的时间判断时间分割线是否显示：

// 判断时间分隔线是否显示
const shouldShowTimeDivider = (index) => {if (index === 0) return true; // 第一个消息显示分隔线const currentTime = new Date(props.mockChatHistory[index].time);const previousTime = new Date(props.mockChatHistory[index - 1].time);if (currentTime - previousTime > 5 * 60 * 1000) { // 超过5分钟显示分隔线return true;} else {return false;}
}
// 时间分割线时间显示形式
const formatTime = (time) => {const date = new Date(time);const now = new Date();const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());const yesterday = new Date(today);yesterday.setDate(yesterday.getDate() - 1);const dayBeforeYesterday = new Date(today);dayBeforeYesterday.setDate(dayBeforeYesterday.getDate() - 2);// 今天：显示小时:分钟if (date >= today) {return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });} // 昨天：显示昨天 小时:分钟else if (date >= yesterday) {return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;}// 前天：显示前天 小时:分钟else if (date >= dayBeforeYesterday) {return `前天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;}// 今年：显示月份-日期else if (date.getFullYear() === now.getFullYear()) {return `${date.getMonth() + 1}月${date.getDate()}日 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;}// 往年：显示xxxx年else {return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;}
}

对于时间分割线上时间内容显示：

当日时间：hh:mm
昨天/前天: 昨天/前天 hh:mm
今年内: 月份日期 hh:mm
以往年份：年份月份日期 hh:mm

在这里插入图片描述

PS：这里对聊天内容界面的元素布局和样式等内容就不详细说明了，都算比较基础的了

消息输入框

聊天消息输入框需要兼顾用户体验、功能完备性和技术实现优雅性，当然现在我只进行基础的设计

需要考虑的内容

输入框高度调节
功能扩展区
@成员提及
表情插入

高度调节

给底部chat-footer元素添加伪类，高度3px，设置ns-resize双向调整大小光标

在这里插入图片描述

CSS样式：

&::before {content: '';position: absolute;top: 0px;left: 0;right: 0;height: 3px;background-color: #ccc;cursor: ns-resize;z-index: 1;
}

效果：

在这里插入图片描述

现在光设置css样式还不能拖动边线，需要添加相应的Js方法：（这里在onDragMove移动方法中，设置可移动的最大200px最小100px，chat-content是底部输入框上面的聊天内容区域）

// 底部footer输入框拖动方法
const footerRef = ref(null);
const isDragging = ref(false);
const startY = ref(0);
const startHeight = ref(0);
// 底部输入框顶部边拖动 鼠标按下事件
const onDragStart = (e) => {e.preventDefault(); // 阻止默认行为isDragging.value = true;startY.value = e.clientY;startHeight.value = footerRef.value.offsetHeight;document.addEventListener('mousemove', onDragMove);document.addEventListener('mouseup', onDragEnd);document.body.style.userSelect = 'none'; // 禁用文本选择
};
// 底部输入框顶部边拖动 鼠标移动事件
const onDragMove = (e) => {if (!isDragging.value) return;const dy = e.clientY - startY.value;const newHeight = startHeight.value - dy;if (newHeight >= 100 && newHeight <= 200) {footerRef.value.style.height = `${newHeight}px`;document.querySelector('.chat-content').style.height = `calc(100% - 50px - ${newHeight}px)`;}
};
// 底部输入框顶部边拖动 鼠标松开事件
const onDragEnd = () => {isDragging.value = false;document.removeEventListener('mousemove', onDragMove);document.removeEventListener('mouseup', onDragEnd);document.body.style.userSelect = ''; // 恢复文本选择
};onMounted(() => {footerRef.value = document.querySelector('.chat-footer');// 直接在footer元素上监听mousedown事件，通过event.target判断是否点击了顶部边框footerRef.value.addEventListener('mousedown', (e) => {if (e.offsetY <= 3) { // 判断是否点击了顶部3px区域onDragStart(e);}});
});

在这里插入图片描述

功能扩展区

有最基础的表情和聊天记录icon按钮，如果后续有需要可以继续添加扩展功能，考虑到后续可能群里和私聊功能不同，添加了slot扩展

<!-- 功能列表 -->
<div class="input-function-list"><div class="input-function-item" v-for="funItem in inputFunctionList" :key="funItem.name" :title="funItem.text"><svg class="icon" aria-hidden="true"><use :xlink:href="'#' + funItem.icon"></use></svg></div><slot name="input-extra-function"></slot>
</div>

基础输入框功能：

// 输入框功能列表
const inputFunctionList = [{ name: 'emoji', icon: 'icon-biaoqing', text: '表情', event: () => { console.log('点击了表情') }   },{ name: 'record', icon: 'icon-liaotianjilu', text: '聊天记录', event: () => { console.log('点击了聊天记录')} }
];

可编辑DIV输入框

使用div的contenteditable去制作一个可输入消息框，让div元素可编辑

<div class="input-area"><!-- 可扩展的输入区域 --><slot name="input-area-solt"><div ref="editableDiv" class="editable-area" contenteditable @input="handleInput"@keydown.enter.exact.prevent="sendMessage"@paste="handlePaste"></div></slot>
</div>

这里设计：

enter：发送消息
shift + enter：换行

通过@keydown.enter.exact.prevent已经让回车键和发送消息方法关联起来了，现在设置shift + enter 配置换行。在div中配置 @keydown.shift.enter.prevent="handleShiftEnter"

handleShiftEnter方法用于获取当前选区，在输入框文本对象末尾添加换行节点br，并重新设置光标位置

// 输入框换行事件处理
const handleShiftEnter = (e) => {e.preventDefault();const selection = window.getSelection();// 检查选区是否在可编辑区域内if (!selection.containsNode(editableDiv.value, true)) {return;}const range = selection.getRangeAt(0);// 创建并插入换行节点const br = document.createElement('br');range.insertNode(br);// 创建新范围并设置光标位置const newRange = document.createRange();newRange.setStartAfter(br);  // 在新创建的 <br> 元素后设置光标位置newRange.collapse(true);// 更新选区selection.removeAllRanges();selection.addRange(newRange);
}

效果：

在这里插入图片描述

当前的复制会将颜色复制过来，所以需要设置handlePaste复制方法，只复制文本内容

在这里插入图片描述

这里对于图片数据复制时，也需要进行在输入框自动缩小图片尺寸，主要修改包括：

检测剪贴板中的图片数据
使用 FileReader 读取原始图片数据(event.target.result)创建 img 元素
保持原有的 maxWidth 样式设置将图片缩小到最大宽度100px
保持图片比例不变
将缩小后的图片插入到可编辑区域
仍然保留原有的纯文本粘贴功能

// 输入框复制事件处理
const handlePaste = (e) => {e.preventDefault();// 检查是否由图片数据const clipboardData = e.clipboardData;if (clipboardData.files && clipboardData.files.length > 0) {const file = clipboardData.files[0];if (file.type.startsWith('image/')) {const reader = new FileReader();reader.onload = (event) => {const range = window.getSelection().getRangeAt(0);range.deleteContents();const imgElement = document.createElement('img');imgElement.src = event.target.result;imgElement.style.maxWidth = '100px';range.insertNode(imgElement);};reader.readAsDataURL(file);return;}}// 处理纯文本粘贴const text = e.clipboardData.getData('text/plain');document.execCommand('insertHTML', false, text);
}