使用cursor来开发UniApp + SQL Server 客服聊天功能
1. 功能概述
本功能基于UniApp + SQL Server实现了一个类似微信的即时聊天系统,支持用户和客服进行实时对话。主要特点:
- 实时消息对话
- 历史消息加载
- 新消息提醒
- 已读状态同步
- 多客服分配
在线演示
演示地址: http://demo.xiyueta.com/case/web20250222/
测试账号: demo
测试密码: 123456
使用效果
用户端聊天
- 简洁的聊天界面设计
- 支持文字和图片消息
- 消息状态实时显示
- 未读消息红点提醒
客服端管理
- 多会话同时处理
- 客户信息一目了然
- 快捷回复功能
- 消息记录永久保存
会话列表
- 最新消息优先显示
- 未读数量醒目提示
- 会话时间实时更新
- 支持会话置顶功能
我的
- 根据用户权限显示对应
- 并显示信息条数
2. 数据库设计
2.1 聊天消息表
CREATE TABLE pre20250222_chat (
message_id INT IDENTITY(1,1) PRIMARY KEY, -- 消息ID
sender_type TINYINT NOT NULL, -- 发送者类型(1:用户 2:客服)
sender_id INT NOT NULL, -- 发送者ID
accept_id INT NOT NULL, -- 接收者ID
content NVARCHAR(MAX) NOT NULL, -- 消息内容
is_read TINYINT DEFAULT 0, -- 是否已读(0:未读 1:已读)
create_time DATETIME DEFAULT GETDATE() -- 发送时间
)
-- 创建索引
CREATE INDEX idx_sender ON pre20250222_chat (sender_id, sender_type)
CREATE INDEX idx_accept ON pre20250222_chat (accept_id)
CREATE INDEX idx_create_time ON pre20250222_chat (create_time)
2.2 字段说明
- sender_type: 1表示用户发送,2表示客服发送
- sender_id: 发送者的用户ID
- accept_id: 接收者的用户ID
- is_read: 0表示未读,1表示已读
3. 核心设计思路
3.1 消息加载机制
1. 首次加载:
- 获取最新的10条消息
- 返回最新消息ID(latest_id)和最早消息ID(earliest_id)
- 用于后续的消息加载和更新
2. 历史消息加载:
- 触发条件: 滚动到顶部
- 参数: earliest_id(最早消息ID)
- 获取比earliest_id更早的消息
- 新消息插入到列表顶部
- 维持滚动位置,避免跳动
3. 新消息检查:
- 定时轮询(30秒)
- 参数: latest_id(最新消息ID)
- 获取比latest_id更新的消息
- 新消息追加到列表底部
- 可选自动滚动到底部
4. 发送消息:
- 先调用发送接口
- 成功后获取最新消息
- 参数: after_id(最新消息ID)
- 自动滚动到底部
3.2 已读状态处理
1. 客服查看时:
- 把用户发的消息标记为已读
UPDATE chat SET is_read=1
WHERE sender_type=1 AND sender_id={用户ID} AND accept_id={客服ID}
2. 用户查看时:
- 把客服发的消息标记为已读
UPDATE chat SET is_read=1
WHERE sender_type=2 AND accept_id={用户ID}
4. 前端实现
4.1 技术选型
- Vue3 Composition API: 更好的代码组织和复用
- UniApp: 实现多端统一开发
- Scroll View: 实现滚动加载
4.2 核心代码与问题解决
4.2.1 消息列表组件
<template>
<scroll-view
class="message-list"
scroll-y
:scroll-anchoring="true" <!-- 解决iOS滚动抖动 -->
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="loadMoreMessages"
@scrolltolower="onScrollToLower"
:scroll-into-view="scrollIntoView"
ref="messageListRef"
>
<!-- 加载提示 -->
<view class="load-more">
<text v-if="loading">加载中...</text>
<text v-else-if="!hasMore">没有更多消息了</text>
<text v-else>下拉加载更多</text>
</view>
<!-- 消息列表 -->
<view
v-for="(message, index) in messages"
:key="message.message_id"
:id="'msg-' + message.message_id"
class="message-item"
:class="getMessageClass(message)"
>
<!-- 日期分割线 -->
<view class="date-divider" v-if="showDateDivider(index)">
{{ formatDate(message.create_time) }}
</view>
<!-- 消息内容 -->
<view class="content">
<view class="bubble">{{ message.content }}</view>
<view class="time">{{ formatTime(message.create_time) }}</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
// 状态管理
const messages = ref([])
const loading = ref(false)
const refreshing = ref(false)
const hasMore = ref(true)
const scrollIntoView = ref('')
const latestMessageId = ref(0)
const earliestMessageId = ref(999999)
// 定时器
let refreshTimer = null
// 格式化时间
const formatTime = (time) => {
return dayjs(time).format('HH:mm')
}
// 格式化日期
const formatDate = (time) => {
const date = dayjs(time)
const today = dayjs()
if(date.isSame(today, 'day')) {
return '今天'
} else if(date.isSame(today.subtract(1, 'day'), 'day')) {
return '昨天'
}
return date.format('MM-DD')
}
// 显示日期分割线
const showDateDivider = (index) => {
if(index === 0) return true
const curr = dayjs(messages.value[index].create_time)
const prev = dayjs(messages.value[index - 1].create_time)
return !curr.isSame(prev, 'day')
}
// 获取消息样式
const getMessageClass = computed(() => (message) => {
return {
'self': message.sender_id === userInfo.value.user_id,
'other': message.sender_id !== userInfo.value.user_id,
'unread': !message.is_read
}
})
// 获取消息列表
const getMessages = async () => {
if (loading.value) return
loading.value = true
try {
const params = {
pageSize: 10,
chat_with_id: chatWithId.value
}
// 加载历史消息
if (refreshing.value) {
params.before_id = earliestMessageId.value
}
// 获取新消息
else {
params.after_id = latestMessageId.value
}
const res = await api.chat.list(params)
if(res.status === 'y') {
const { list, latest_id, earliest_id } = res.data
// 更新消息ID范围
if(latest_id) latestMessageId.value = latest_id
if(earliest_id) earliestMessageId.value = earliest_id
// 更新消息列表
if(refreshing.value) {
messages.value = [...list, ...messages.value]
} else {
messages.value = [...messages.value, ...list]
// 新消息滚动到底部
scrollIntoView.value = `msg-${latest_id}`
}
hasMore.value = list.length === 10
}
} finally {
loading.value = false
refreshing.value = false
}
}
// 定时刷新
const startRefreshTimer = () => {
refreshTimer = setInterval(async () => {
await getMessages()
}, 30000)
}
onMounted(() => {
getMessages()
startRefreshTimer()
})
onUnmounted(() => {
if(refreshTimer) clearInterval(refreshTimer)
})
// 页面显示时刷新
onShow(() => {
getMessages()
})
</script>
<style lang="scss" scoped>
.message-list {
height: calc(100vh - 100rpx); // 减去输入框高度
background: #f5f5f5;
.date-divider {
text-align: center;
font-size: 24rpx;
color: #999;
margin: 20rpx 0;
}
.message-item {
margin: 20rpx;
&.self {
.content {
flex-direction: row-reverse;
}
.bubble {
background: #95EC69;
}
}
.content {
display: flex;
align-items: flex-start;
}
.bubble {
max-width: 60%;
padding: 20rpx;
border-radius: 8rpx;
background: #fff;
word-break: break-all;
}
.time {
font-size: 24rpx;
color: #999;
margin: 0 20rpx;
}
}
}
</style>
4.2.2 常见问题及解决方案
1. iOS滚动抖动问题
- 问题:iOS端滚动加载时会出现抖动
- 解决:添加scroll-anchoring属性固定滚动位置
<scroll-view :scroll-anchoring="true">
2. 消息时间分组显示
- 问题:需要按日期分组显示消息
- 解决:比较相邻消息时间,显示日期分割线
const showDateDivider = (index) => {
if(index === 0) return true
const curr = dayjs(messages.value[index].create_time)
const prev = dayjs(messages.value[index - 1].create_time)
return !curr.isSame(prev, 'day')
}
3. 新消息提醒
- 问题:新消息需要提醒用户
- 解决:监听新消息,显示角标和震动提醒
const checkNewMessage = async () => {
const res = await api.chat.unreadCount()
if(res.data > 0) {
// 设置角标
uni.setTabBarBadge({
index: 2,
text: String(res.data)
})
// 震动提醒
uni.vibrateShort()
}
}
4. 图片消息预览
- 问题:图片消息需要支持预览
- 解决:使用uni.previewImage实现图片预览
const previewImage = (url) => {
uni.previewImage({
urls: [url],
current: url
})
}
5. 后端实现
5.1 核心功能设计
5.1.1 消息排序策略
1. 历史消息查询
- 使用message_id降序排序
- 优点:可以准确获取指定ID之前的消息
- 实现:WHERE message_id < earliest_id ORDER BY message_id DESC
2. 新消息查询
- 使用message_id升序排序
- 优点:保证消息按发送顺序显示
- 实现:WHERE message_id > latest_id ORDER BY message_id ASC
5.1.2 已读状态更新
- 批量更新以提高性能
- 根据角色区分更新逻辑
- 使用事务确保数据一致性
5.2 核心SQL实现
' 获取消息列表
dim sql: sql = "SELECT c.*,"
sql = sql & "u1.username as sender_name,"
sql = sql & "u2.username as accept_name "
sql = sql & "FROM " & db_PREFIX & "chat c "
sql = sql & "LEFT JOIN " & db_PREFIX & "user u1 ON c.sender_id = u1.user_id "
sql = sql & "LEFT JOIN " & db_PREFIX & "user u2 ON c.accept_id = u2.user_id "
sql = sql & "WHERE (c.sender_id=" & chatWithId & " AND c.accept_id=" & userId & ") "
sql = sql & "OR (c.sender_id=" & userId & " AND c.accept_id=" & chatWithId & ") "
' 根据查询类型构建条件
if beforeId <> "" then
' 获取历史消息 - 降序排序
sql = sql & "AND c.message_id < " & beforeId & " "
sql = sql & "ORDER BY c.message_id DESC "
elseif afterId <> "" then
' 获取新消息 - 升序排序
sql = sql & "AND c.message_id > " & afterId & " "
sql = sql & "ORDER BY c.message_id ASC "
else
' 首次加载 - 降序排序后反转
sql = sql & "ORDER BY c.message_id DESC "
end if
' 分页
if beforeId = "" and afterId = "" then
sql = sql & "OFFSET 0 ROWS FETCH NEXT 10 ROWS ONLY"
end if
' 更新已读状态
dim updateSql: updateSql = "UPDATE " & db_PREFIX & "chat SET is_read=1 "
updateSql = updateSql & "WHERE accept_id=" & userId & " "
if userRs("role") = 1 then
' 客服查看 - 更新用户发送的消息
updateSql = updateSql & "AND sender_type=1 AND sender_id=" & chatWithId
else
' 用户查看 - 更新客服发送的消息
updateSql = updateSql & "AND sender_type=2"
end if
conn.Execute(updateSql)
' 获取最新消息ID
dim maxSql: maxSql = "SELECT MAX(message_id) as max_id FROM " & db_PREFIX & "chat "
maxSql = maxSql & "WHERE (sender_id=" & chatWithId & " AND accept_id=" & userId & ") "
maxSql = maxSql & "OR (sender_id=" & userId & " AND accept_id=" & chatWithId & ")"
' 获取最早消息ID
dim minSql: minSql = "SELECT MIN(message_id) as min_id FROM " & db_PREFIX & "chat "
minSql = minSql & "WHERE (sender_id=" & chatWithId & " AND accept_id=" & userId & ") "
minSql = minSql & "OR (sender_id=" & userId & " AND accept_id=" & chatWithId & ")"
5.3 SQL优化说明
1. 联表查询
- 使用LEFT JOIN获取发送者和接收者信息
- 避免多次查询用户表
- 减少数据库访问次数
2. 索引使用
- message_id主键索引用于分页
- sender_id和accept_id索引用于筛选
- create_time索引用于排序
3. 分页优化
- 使用OFFSET-FETCH替代TOP
- 支持跳页查询
- 性能更好
4. 批量更新
- 一次更新多条记录
- 减少数据库操作
- 提高性能
6. 总结
本项目基于UniApp + SQL Server打造的即时聊天系统，实现了实时对话、历史消息、已读状态等核心功能，提供了流畅的用户体验和稳定的性能表现。
关于作者
如果本文章对您有所帮助，欢迎交流和探讨技术问题。
QQ： 313801120
更多文章： www.xiyueta.com/
希望能一起成长，共同探索更多开发技巧！