WebIM即时通讯插件使用文档

研发人:张喜津、张宏伟 研发日期: 2021年11月15日 示例框架: Vue 2.0

简介

WebIM即时通讯插件是基于环信和腾讯sdk开发的一款具有(腾讯)群聊、(环信)聊天室、发送文本消息、文件等功能的sdk应用，为了用户能够方便快速集成对接环信sdk和腾讯sdk提供支持。(目前暂只支持环信sdk 腾讯sdk正在开发中)

引入

• 在程序执行入口配置文件 以vue main.js为例

// WebIM即时通讯插件
import WebIm from "./microVideoIm-sdk/index"
// easemob-web 环信Web
// easemob-xcx 环信小程序
// tencent-web 腾讯Web
// tencent-xcx 腾讯小程序
Vue.use(WebIm, {
    type: 'easemob-web',
    key: "1139211024231272#lxs" // 腾讯应用appid 或环信应用appkey
    ......
});

• 实际应用(以vue为例)

<template>
	<div>
        <button @click="sendContent">发送</button>
        <input type="file" class="hide" ref="imgDom" @change="pictureChange" />
    </div>
</template>

<script>
export default {
	name: "imTest",
	components:{},
	data() {
	    return {
            txtContent:"发送的文本消息内容",
            imgFile:{}
        }
    },
    mounted() {
        
        // this.msgList = localStorage.getItem("msgList");//本地缓存历史消息
        
        //登录业务系统获取im用户信息登录im系统
        this.$webIm.login((res)=>{
            //加入聊天室
            this.$webIm.joinChatRoom(res.data.roomId).then((joinRes)=>{
                ......
            })
            //也提供了退出聊天室的方法可根据实际业务场景使用
            this.$webIm.quitChatRoom(res.data.roomId).then((quitRes)=>{
                ......
            })
            ......
        })

        //  ["SDK_READY","MESSAGE_RECEIVED"]
        //  登录登出监听，接收新消息方法监听
        //  第一个是注册的监听事件类型参数，第二个是传过去的函数用于事件被触发时获取回调参数

        this.$webIm.addMessageHanlder("SDK_READY",this.listenLoginStatus)
        this.$webIm.addMessageHanlder("MESSAGE_RECEIVED", this.listenReceiveMessage);
        this.$webIm.addMessageHanlder("ON_ERROR", this.listenOnError);

    },
    methods:{
        sendContent(){

            //  发送文本信息
            //  参数分别为接收方、消息主体内容
            this.$webIm.sendTextMessage("163406711685121",this.txtContent).then((res)=>{
                ......
            })

            //  发送图片信息
            //  参数分别为接收方、消息主体内容
            //  扩展参数chatType 聊天模式 
            //  onFileUploadProgress 上传进度回调 传入自定义具名函数接收回调结果
            //  onFileUploadError 文件上传失败回调
            //  onFileUploadComplete 文件上传成功回调
            this.$webIm.sendImgMessage(
                    "163406711685121",
                    e.target,
                    {
                        chatType: "chatroom", 
                        onFileUploadProgress: this.onProgress,
                        onFileUploadError: this.onFileError,
                        onFileUploadComplete: this.onFileSuccess
                    }
                ).then((res)=>{
                ......
            })

        },
        listenLoginStatus(response){
            ......
        },
        listenReceiveMessage(response){
            ......
        },
        listenOnError(response){
            ......
        },
        onProgress(response){
            ......
        },
        onFileError(response){
            ......
        },
        onFileSuccess(response){
            ......
        }
    }
};
</script>

属性

• 项目初始化参数

• type [String]

指定使用的im系统类型 环信web easemob-web 腾讯web tencent-web

• key [String]

对应im系统的应用密钥

• 登录 (需要先实现bussiness定义的业务接口获取登录im系统需要的账户信息)

• uid [String]

账户名 (需在im系统上与数据库同步的账户名)

• ukey [String]

登录密码 (需在im系统上与数据库同步的账户密码或用户签名)

• 发送消息

• toUser [String]

接收人账户名/群组id/聊天室id (注: 腾讯没有聊天室只有群组ID)

• msgObj [String|File]

消息内容 可发送文本消息、音视频文件、以及一些其他的文件

• onFileUploadProgress [function]

文件类信息发送进度回调函数

• onFileUploadError [function]

文件类信息发送失败回调函数

• onFileUploadComplete [function]

文件类信息发送完成回调函数

• promise [function]

返回给前端一个peomise对象
相应参数: {
    code: 0, //0程序执行成功 1程序执行失败
    data: data, //环信或者腾讯sdk的响应结果
    messgae: '', //执行状态描述
}

方法

• 登录im系统

login(){
    //先执行系统的获取用户信息的方法拿到腾讯或者环信需要的用户信息
    //然后执行登录对应im系统的操作
    //登录成功自动启动监听事件
    ...
}

• 登出im系统

logout(){
    //登出im系统(监听事件自动关闭)
    ...
}

• 发送文本消息

sendTextMessage(
    user,
    msg,
    {
        chatType
    }
){
    //msg 传消息字符串或者JSON对象
    ...
}

• 发送文件消息

sendFileMessage(
    user,
    fileObj,
    {
        chatType,
        onFileUploadProgress,
        onFileUploadError,
        onFileUploadComplete
    }
){
    //fileObj 支持音频视频文档等任意文件格式的对象
    ...
}

• 发送音频文件消息

sendAudioMessage(
    user,
    audioFile,
    {
        chatType,
        onFileUploadProgress,
        onFileUploadError,
        onFileUploadComplete
    }
){
    //audioFile 传音频文件对象
    ...
}

• 发送视频文件消息

sendVideoMessage(
    user,
    videoFile,
    {
        chatType,
        onFileUploadProgress,
        onFileUploadError,
        onFileUploadComplete
    }
){
    //videoFile 传视频文件对象
    ...
}

事件

• 启动监听事件

// 配置监听事件列表 socket-api.js
messageHanlder = {
    'SDK_READY': [], // 腾讯/环信登录登出监听
    'MESSAGE_RECEIVED': [], // 腾讯/环信接收新消息方法监听
    'ON_ERROR': [],// 腾讯/环信错误信息监听
};

xxx.vue
//添加自定义监听处理器 例如 消息监听
this.$webIm.addMessageHanlder("MESSAGE_RECEIVED",function(response){})

部分功能使用说明

插件的 api/business-api.js 向开发人员定义了 使用本插件前先要实现的业务接口 如登录接口,需要开发人员实现业务系统的login方法获取im系统登录信息才能正常使用插件的登录方法