vue+webpack 集成环信---

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39704039/article/details/81100316

因为vue拿不到window对象 所以直接引入原生获取使用集成报错(有解决的小伙伴欢迎 告知)。

所以修改React Native SDK集成 来完成vue的集成 :http://docs.easemob.com/im/react-native/sdk-integration?s[]=xmldom

1.根据顺序进行拷贝相关文件 

因为是以前 写的东西 官方的文件 被我修改过 很多修改过的地方不记得  可以先下载我的文件(有什么不懂的地方可以解答)

额。没有找到上传压缩包的地方 可以加qq(1473366740)

2.安装xmldom依赖  npm install --save xmldom

页面引入:
import '../../../native/strophe-1.2.8.js'

import websdk from '../../../native/Sdk'

import xmldom from 'xmldom'
import config from '../../../native/WebIMConfig'
import WebIm from '../../../native/Sdk/src/connection'
var WebIM = window.WebIM = WebIm.WebIM
window.WebIM.config = config.confis

data(){return {WebIM:WebIM}}

建立连接:(更具需要在什么时候连接  *到end之前都要写在一个方法里面*)

//连接begain

var _this = this

(设置的是WebIMConfig文件里面的内容)
      this.conn = new WebIM.connection({
          https: WebIM.config.https, 
          url: WebIM.config.xmppURL,
          isAutoLogin: WebIM.config.isAutoLogin,
          isMultiLoginSessions: WebIM.config.isMultiLoginSessions
      });

监听连接:

this.conn.listen({
        onOpened: function (message) {          //连接成功回调,连接成功后才可以发送消息
              console.log("%c [opened] 连接已成功建立", "color: green");
          },
          onTextMessage : function(message){
              // console.log('接收到文字的消息',message)
          },
           onFileMessage: function (message){
            // console.log('接收到文件消息',message.url)
            },
            onEmojiMessage: function onEmojiMessage(message) {
             // console.log('接收到表情的消息',message)
            },
            onPictureMessage: function (message) {
            // console.log("接收到图片的消息", message);
            },
           onOffline: function () {                //本机网络掉线 == 没有网络
            // console.log('处理断线重连')
           },
           onClosed: function ( message ) {  //连接关闭回调
              // console.log('链接关闭了',message)
             },
           onError: function (message) {  //失败回调
              if (message && message.type == 1) {

                 //在appKey 下没有找到你连接的号 会走这里
                 //console.warn('连接建立失败!请确认您的登录账号是否和appKey匹配。')
              }
          }
      })

// 登录信息
      var options = {
          apiUrl:(location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',//不用动
          user: 账号名,
          pwd: 账号密码,
          appKey: 环信的appKey
      }
            console.log('登录信息',options)
      this.conn.open(options)

//连接end

到此为如果打印出了连接已成功建立表示你成功连接上了环信

发送消息:

1.发送文字

sendPrivateText: function () {
            const that = this
            var id = that.conn.getUniqueId();                   // 生成本地消息id
            var msg = new WebIM.message('txt', id);     // 创建文本消息 标记类型
            msg.set({
                    msg: that.message,                  // 消息内容
                    to: that.list[that.saveIndex].hxId,  //发送给谁的环信id
                    roomType: false,
                    success: function (id, serverMsgId) {
                            var emojiMessage  = that.WebIM.utils.parseEmoji(that.message); //这个是处理表情的方法
                    },
                    fail: function(e){
                            console.log("发送失败",e);
                    }
            });
            msg.body.chatType = 'singleChat';
            that.conn.send(msg.body);
        },

2.发送图片

<input type="file" name="file" id="file_" class="imgFile"  @change="sendPrivateImg">

sendPrivateImg: function () {
             const that = this
             var index = '';
            var id = this.conn.getUniqueId();                   // 生成本地消息id
            var msg = new WebIM.message('img', id);        // 创建图片消息
            var input = document.getElementById('file_');  // 选择图片的input
            var file = this.WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
            var allowType = { //限制图片的格式
                'jpeg': true,
                'jpg': true,
            };
            if (file.filetype.toLowerCase() in allowType) {
                        msg.set({
                            apiUrl: this.WebIM.config.apiURL,
                            file: file,
                            to: that.list[that.saveIndex].hxId,                       // 接收消息对象
                            roomType: false,
                            chatType: 'singleChat',
                            onFileUploadError: function () {      // 消息上传失败
                                    // console.log('onFileUploadError');
                            },
                            onFileUploadComplete: function () {   // 消息上传成功
                                    // console.log('onFileUploadComplete');
                            },
                            success: function () {                // 消息发送成功
                            },
                            flashUpload: this.WebIM.flashUpload
                        });
                this.conn.send(msg.body);
            }else{
                    this.$alert("支持的图片格式有 jpeg/jpg、png、gif、bmp,图片文件最大5M。")
                }
        },

3.发送文件

sendPrivateFile: function () {
            const that = this
            var id = that.conn.getUniqueId();                   // 生成本地消息id
            var msg = new WebIM.message('file', id);        // 创建文件消息
            var input = document.getElementById('file2');  // 选择文件的input
            var file = WebIM.utils.getFileUrl(input);      // 将文件转化为二进制文件
             var uri = '';
            var allowType = {//限制格式
                    'rar':true,
                    'zip':true,
            };
            if (file.filetype.toLowerCase() in allowType) {
                var option = {
                    apiUrl: WebIM.config.apiURL,
                    file: file,
                    to: that.hxId,                      // 接收消息对象
                    roomType: false,
                    chatType: 'singleChat',
                    onFileUploadError: function () {      // 消息上传失败
                    },
                    onFileUploadComplete: function (e) {
                                        uri = e.uri+'/'+e.entities[0].uuid  // 消息上传成功
                    },
                    success: function () {

file.filename//文件名字 uri //文件路径
                    },
                    flashUpload: WebIM.flashUpload
                };
                msg.set(option);
                this.conn.send(msg.body);
            }else{
                     this.$alert("支持上传Office文件、pdf、txt、ai/psd、rar/zip格式,文件最大5M。")
                }
        },

展开阅读全文

没有更多推荐了,返回首页