vue h5页面 使用第三方聊天（环信集成web端）

项目需求： 实时聊天，发送文字，图片，以及文件 （该项目使用vant + vue 搭建）

首先，聊天也是我第一次写，之前只是维护，第一次采取了自己搭建的，源于后台协商socket-io 服务器比较难搭建，本着时间紧任务重的原因，最后果断采取了第三方聊天，在网上百度了好多资料，最后还是决定使用环信。官方文档属实是不想看，后来就疯狂百度，发现总是差一下，最后还是自己摸索吧。

[环信官方文档]： web集成官方文档

第一步： 需要注册环信即时通信云获得appkey，注册账号之后登录环信后台创建应用就可以得到appkey

第二步： 在vue项目中安装插件 npm install easemob-websdk --save
在main.js里引入 import websdk from 'easemob-websdk'

第三步： 在util里新建一个文件夹WebIM，文件夹下新建WebimConfig.js

const config = {
    xmppURL: 'im-api.easemob.com',            // xmpp Server地址，对于在console.easemob.com创建的appKey，固定为该值
    // apiURL: 'http://a1.easemob.com',          // rest Server地址，对于在console.easemob.com创建的appkey，固定为该值
    apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
    appkey: '678659375498374#demo',        // App key
    https : false,                            // 是否使用https
    isHttpDNS: true,                         //防止DNS劫持从服务端获取XMPPUrl、restUrl
    isMultiLoginSessions: false,              // 是否开启多页面同步收消息，注意，需要先联系商务开通此功能
    isAutoLogin: true,  
    isWindowSDK: false,
    isSandBox: false,                      // 自动出席，（如设置为false，则表示离线，无法收消息，需要在登录成功后手动调 用conn.setPresence()才可以收消息）
    isDebug: false,                           // 打开调试，会自动打印log，在控制台的console中查看log
    autoReconnectNumMax: 2,                   // 断线重连最大次数
    autoReconnectInterval: 2,                 // 断线重连时间间隔
    isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
    heartBeatWait: 4500,                       // 使用webrtc（视频聊天）时发送心跳包的时间间隔，单位ms
    msgStatus: true,
    delivery: true,                            // 是否发送已读回执
    read: true,
    saveLocal: false,                      
    encrypt: {
        type: 'none'
    },
    useOwnUploadFun: true     //发送url图片消息
}

export default config;

第四步： 将WebimConfig.js这个文件在main.js里引入
import webimconfig from './util/WebIM/WebimConfig'

//vue集成通信
import websdk from 'easemob-websdk'
import webimconfig from './util/WebIM/WebimConfig'
// 环信
let WebIM = window.WebIM = websdk;
WebIM.config = webimconfig;
// 环信实例
var conn = WebIM.conn = new WebIM.connection({
  appKey: WebIM.config.appkey,
  isHttpDNS: WebIM.config.isHttpDNS,
  isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
  https: WebIM.config.https,
  url: WebIM.config.xmppURL,
  apiUrl: WebIM.config.apiURL,
  isAutoLogin: true,
  heartBeatWait: WebIM.config.heartBeatWait,
  autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
  autoReconnectInterval: WebIM.config.autoReconnectInterval,
  isStropheLog: WebIM.config.isStropheLog,
  delivery: WebIM.config.delivery
})
var optionsIm = {
  apiUrl: WebIM.config.apiURL,
  user: '', //换成自己申请的账号就行，密码也需要换  
  pwd: '',
  appKey: WebIM.config.appkey,
  success: function (res) {
    console.log('链接服务器正常')
  },
  error: function (err) {
    console.log(err)
  }
}
Vue.prototype.$WebIM = WebIM;
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = optionsIm;

第五步： 我这个项目没有注册，我直接在登录里拿到账号密码，存储起来，传到后台，并入环信。

//测试账号
        this.$imoption.user = this.login_userName
        this.$imoption.pwd = this.login_password
        //存储账号密码
        this.saveGetUserInfo({name: this.login_userName, word: this.login_password })
        this.$imconn.open(this.$imoption);
        // 监听回调
        this.$imconn.listen({
          onOpened: function() {
            console.log("用户已上线");
          },
          onClosed: function() {
            console.log("用户下线");
          },
        });

第六步： 在聊天页发送（接收）文本消息，图片，以及文件

到此就是完整的聊天页面了，可以进行实时聊天发送图片以及文件，有不完善或者更好的方案的可以跟我交流，后续如果有语音，视频，推送等功能会继续更新…