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

之前开发的开源在线客服系统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

开源地址:唯一客服(开源学习版)
官网地址:唯一客服官网