xigua_im v1.2.8

xigua-fe-im

聊天插件

Install

<script src="http://zhishi.oss-cn-beijing.aliyuncs.com/xigua-im/xigua.im.min.js"><script>

$ yarn add xigua_im -S
or
$ npm i xigua_im -S

Usage

• 使用script标签引入

<script>
  var IM = XM.default;
  var app = new IM(options);
  app.changeData({});
</script>

• 使用package引入

import IM from 'xigua_im';
const im = new IM(options);
im.changeData({});

Options

options是一个对象。

• isSendAudio: 是否显示发送语音
• isScratch: 是否显示发送工程文件和本课问题
• canSendFile: 是否可以发送工程文件，需要isScratch为true才生效
• canSendQuestion: 是否可以发送本课问题，需要isScratch为true才生效
• pollTime: 轮询周期，单位是ms，默认是4000
• hasTicket: 后端传回来数据或者是cc里面的数据
• lectureId: 后端传回来数据或者是cc里面的数据
• projectDataLogId: 后端传回来数据或者是cc里面的数据
• csrf: 服务端渲染的页面，需要校验csrf
• lastLectureId: 后端传回来数据或者是cc里面的数据
• methods: 扩展用户自定义的发送操作，以及发送成功后的回调操作
  • sendAudio: 发送语音
  • sendText: 发送文本
  • sendFile: 发送工程文件
  • sendQuestion: 发送本课问题

methods: {
  sendAudio(type, blob, next) {
    // blob - 发送语音blob文件
    ...业务操作
  },
  sendText(type, text, next) {
    // text - 发送的文本消息
    ...业务操作
  },
  sendFile(next) {
    ...业务操作
  },
  sendQuestion(type, next) {
    ...业务操作
  }
}

说明：

• type
  • success: 操作成功
  • error: 操作失败
• next方法是用户与插件的联系通道，目前只是支持，传入message来更新消息列表

{
  avatar: "https://m.xiguacity.cn/static/shawn.png",
  content: "Hey, 我看到了你的作品哦。哇哦！新人测试-向右滚，恭喜你成功的完成了孙小弟寻宝大冒险中最重要的一部分工作 👏这节课中，我们学习了云列表，还知道了可以用云列表把角色的状态储存起来，同步给其他玩家哦，真棒😘不过现在游戏是不是还不太完整呢，下节课里，我们要继续完成这款游戏，快点去试试吧💪",
  file_length: 0,
  fromMe: false,
  fromWhom: "58ce51ab1ee603113b3a32fc",
  messageId: "5c333f6ab2cdd331c02267e4",
  message_type: "ordinary"
}

具体的message里面的参数，参照接口定义的返回参数

• sendAudio、sendText、sendQuestion三个方法，在插件内部已经做了网络请求的处理；由于sendFile要和scratch以及flash交互，因此需要用户完成网络请求，将拿到的message通过next方法，传入插件，更新消息列表

Instance method

• changeData 在插件内部发送网络请求的时候，根据不同的场景会存在不同的请求参数，而这些请求参数，插件内部是不知道的。 同时，用户在初始化过后，需要改变插件的内部状态

// 隐藏发送语音
im.changeData({
  isSendAudio: false
});

// 改变请求参数
im.changeData({
  projectDataLogId: 'xxx',
  lectureId: 'xxx'
})