为了增强在线客服的消息到达能力,便于访客在浏览过程中注意查收坐席消息,增加此接口。会话过程中当访客未打开会话框时,坐席新消息将以卡片形式展示给访客查看。
示例效果图如下:
用户未读消息数是通过 postMessage 进行传递的,可以在页面中使用 postMessage 接收 IM 坐席发送的数据,主要包括消息时间、消息内容和新消息标记
坐席和用户建立或断开连接:
'flag=CHAT_CONNECTED&type=1'
flag:CHAT_CONNECTED 坐席和用户建立或断开连接标志 type:1 表示建立连接 0 表示断开连接(超时或结束会话)
接收新信息:
'flag=CHAT_MESSAGE&content=123&createTime=1535439575'
flag:CHAT_MESSAGE 接收新消息标志
content:消息内容
createTime:消息创建时间,单位秒
function getTime(timeString) { if (!timeString || timeString == 0) return ""; var time; var now = new Date(timeString * 1000); var year = now.getFullYear(); var month = now.getMonth() + 1; var day = now.getDate(); var hour = now.getHours(); var min = now.getMinutes(); var second = now.getSeconds(); if (now.toDateString() === new Date().toDateString()) { time = this.fillZero(hour) + ":" + this.fillZero(min) + ":" + this.fillZero(second); } else { time = month + "-" + day + " " + this.fillZero(hour) + ":" + this.fillZero(min) + ":" + this.fillZero(second); } return time; } function resolveParamsStrToObj(strParams) { var paramsArray = strParams.split("&"); var paramsObj = {}; var item; for (var i = 0; i < paramsArray.length; i++) { item = paramsArray[i].split("="); console.log(item); paramsObj[item[0]] = item[1]; } return paramsObj; } window.addEventListener( "message", function(evt) { if (typeof evt.data === "string") { var paramsObj = resolveParamsStrToObj(evt.data); //判断该消息来自内嵌iframe则执行; switch (paramsObj.flag) { case "CHAT_MESSAGE": var content = paramsObj.content; var createTime = getTime(paramsObj.createTime); receiveMsg.push({ createTime: createTime, content: content }); break; case "CHAT_CONNECTED": if (paramsObj.type === "1") { sessionStorage.setItem("chatConnected", true); } else { sessionStorage.setItem("chatConnected", false); } break; default: return; } } }, false );