开源在线客服系统-客服系统历史消息记录功能-点击加载历史聊天记录-分页展示历史消息功能实现

之前开发的开源在线客服系统gofly，访客端一直没有展示历史聊天记录，最近抽时间给加上了

实现的效果就是，访客刚进聊天界面，如果存在历史记录，按5条分页，默认查询加载5条聊天记录。

如果历史记录超过5条，顶部出现 “点击加载更多” 按钮，点击按钮就分页查询历史记录，堆入消息记录数组里。

访客前端js部分，因为历史记录里需要区分是客服发的，还是访客发的，所以进行了判断。

js数组unshift的意思就是往数组前面插入元素

        //获取信息列表
        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框架部分：

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部分，你可以参考我的代码，但是我的和你的业务表结构不一致，自己修改才能使用

//查询条数
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