之前开发的开源在线客服系统gofly，访客端一直没有展示历史聊天记录，最近抽时间给加上了
实现的效果就是，访客刚进聊天界面，如果存在历史记录，按5条分页，默认查询加载5条聊天记录。
如果历史记录超过5条，顶部出现 “点击加载更多” 按钮，点击按钮就分页查询历史记录，堆入消息记录数组里。
访客前端js部分，因为历史记录里需要区分是客服发的，还是访客发的，所以进行了判断。
js数组unshift的意思就是往数组前面插入元素
代码语言：javascript复制 //获取信息列表
getHistoryMessage:function(){
let params={
page:this.messages.page,
pagesize: this.messages.pagesize,
visitor_id: this.visitor.visitor_id,
}
let _this=this;
$.get("/2/messagesPages",params,function(res){
let msgList=res.result.list;
if(msgList.length>=_this.messages.pagesize){
_this.showLoadMore=true;
}else{
_this.showLoadMore=false;
}
for(let i in msgList){
let item = msgList[i];
let content = {}
if (item["mes_type"] == "kefu") {
item.is_kefu = true;
item.avator=item["kefu_avator"];
} else {
item.is_kefu = false;
item.avator=item["visitor_avator"];
}
item.time = item["create_time"];
_this.msgList.unshift(item);
}
if(_this.messages.page==1){
_this.scrollBottom();
}
_this.messages.page ;
});
},后端golang gin框架部分：
代码语言：javascript复制func GetMessagespages(c *gin.Context) {
visitorId := c.Query("visitor_id")
page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
pageSize, _ := strconv.Atoi(c.DefaultQuery("pagesize", "10"))
if pageSize > 20 {
pageSize = 20
}
count := models.CountMessage("visitor_id = ?", visitorId)
list := models.FindMessageByPage(uint(page), uint(pageSize), "message.visitor_id = ?", visitorId)
c.JSON(200, gin.H{
"code": 200,
"msg": "ok",
"result": gin.H{
"count": count,
"page": page,
"list": list,
"pagesize": pageSize,
},
})
}models部分，你可以参考我的代码，但是我的和你的业务表结构不一致，自己修改才能使用
代码语言：javascript复制//查询条数
func CountMessage(query interface{}, args ...interface{}) uint {
var count uint
DB.Model(&Message{}).Where(query, args...).Count(&count)
return count
}
//分页查询
func FindMessageByPage(page uint, pagesize uint, query interface{}, args ...interface{}) []*MessageKefu {
offset := (page - 1) * pagesize
if offset < 0 {
offset = 0
}
var messages []*MessageKefu
DB.Table("message").Select("message.*,visitor.avator visitor_avator,visitor.name visitor_name,user.avator kefu_avator,user.nickname kefu_name").Offset(offset).Joins("left join user on message.kefu_id=user.name").Joins("left join visitor on visitor.visitor_id=message.visitor_id").Where(query, args...).Limit(pagesize).Order("message.id desc").Find(&messages)
for _, mes := range messages {
mes.CreateTime = mes.CreatedAt.Format("2006-01-02 15:04:05")
}
return messages
}实现的效果图
这个客服系统是开源的，但是不能用于任何商业性项目。
官网地址：gofly.v1kf.com
开源地址：https://github.com/taoshihan1991/go-fly
