基于umi使用ChatUI Pro(4) 收发消息,进页面发消息,查看历史消息

633 阅读1分钟

发送消息和接收消息

1.发送消息和接收消息

 requests: {
            send: function (msg) {
              const data = msg.content;

              // 依据聊天框发送文本消息时
              console.log(msg,'msg',msg.type)
              if(msg.type === 'text'){
                return   [{  //返回的是数组对象(单个对象也能被解析,相当于只返回一条消息)
                  content: msg.content,
                  type: msg.type,
                  _id: msg._id,
                }]
              }    
              // if (msg.type === 'text') {  //官网案列请求后端接口返回数据
              //   return {
              //     url: '/xiaomi/ask.do',
              //     data: {
              //       q: data.text,
              //     },
              //   };
              // }
              // ... 其它消息类型的处理
            },
        }

2.接收到的消息进行数据处理

     handlers: {  //后端返回的数据格式不匹配,可以尝试这个工具
            parseResponse: function (res, requestType) {
              // 根据 requestType 处理数据
              // if (requestType === 'send' && res.Messages) {
              //   // 用 isv 消息解析器处理数据
              //   return isvParser({ data: res });
              // }
              // 不需要处理的数据直接返回
              return res;
            },
        }

3.一进页面就发送消息

    1.在地址后面携带
        ?query='携带的消息'
    2.通过在config里配置
        config: {
            query: '携带的消息'
        }
        
    当地址后面有query消息,而不是自己想发送的,可以在config里将消息内容设置为空

遇到的坑: 官网设置的位置错误,没有说在config下设置query

4.查看历史消息

    需要在config下进行配置
    var bot = new ChatSDK({ 
        config: { 
            // (可选)配置按钮文案 
            loadMoreText: '点击加载更多', 
        }, 
        requests: { 
        // 配置接口 
            history: function () { 
                //return { url: '/api/history', }; 请求的后端接口
                return {
                    "list": [
                      {
                        "_id": "msg_1",
                        "type": "text",
                        "content": {
                          "text": "my text"
                        },
                        "createdAt": 1597825988479
                      }
                    ],
                    "noMore": false  //是否继续展示加载更多
                }
            }, 
        }, 
    });
    noMore属性需要注意