网页访客未读消息接口

2018-08-29 09:06:29
10,250

接口使用场景

为了增强在线客服的消息到达能力,便于访客在浏览过程中注意查收坐席消息,增加此接口。会话过程中当访客未打开会话框时,坐席新消息将以卡片形式展示给访客查看。

示例效果图如下:

blob.png

接口说明

用户未读消息数是通过 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
);

该文章对您是否有用?