开源在线客服系统-客服系统历史消息记录功能-点击加载历史聊天记录-分页展示历史消息功能实现
之前开发的开源在线客服系统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