VUE项目集成环信WebIM即时通讯以及所遇到的问题

前端开发 专栏收录该内容
224 篇文章 1 订阅

功能背景:

之前和朋友一起做了一个wbe项目集成环信的即时通信的功能,做的时候感叹web端文档太少,而且npm包有一些坑,记录下来写了这篇博客,之后不断有人加我微信问我,怎么集成.现在我再来重写一下这篇博客.

环信web集成功能介绍:

首先:在web端环信是不提供界面的,能拿到的官方的demo也只是用react写的编译后的文件,所以你要自己写UI

其次:使用聊天功能前的登录,是IM用户登录,不是用你的环信账号和密码

最后:这篇文章是以当前最新版sdk写的,当前最新版是

"easemob-websdk": "4.0.1",

正文:

这几天和朋友做的一个web项目中需要集成环信的即时通讯功能,上网查了很多资料,也试做了一个发送消息的demo.感觉用起来真是简单方便,只需要提供Appkey,账号和密码就可以登录环信,而且功能强大,支持发送表情,图片,文件,消息已读,以及视频直播.

    做demo的时候只直接使用<script>标签引入的sdk,正如环信所说

  集成方式,环信的webSDK集成文档是不包含Vue项目的集成的

我在集成的时候遇到了很多坑

比如找不到Strophe对象 ,再比如使用require方式引入strophe 包Base64未定义,真是头大.后来功夫不负有心人,终于让我变查资料,边摸索,终于解决了所有问题,用户能够上线了.

网上有一篇博文也是介绍环信SDK集成到Vue项目中 地址vue-cli项目集成环信WebIM 另外在环信社区里也有一个文章作为参考Vue-cli整合环信WebIM

 

下面说一下我的集成方式

  1. npm i easemob-websdk strophe.js  --save
      安装 easemob-websdk 和strophe.js 包 我用安装后是 
     "easemob-websdk": "^1.8.3",
     "strophe.js": "^1.2.16"
    
  2. 修改三个文件

    /node_modules/strophe.js/strophe.js

    /node_modules/easemob-websdk/src/connection.js

    /webim.config.js




    在connection.js中头部加入以下几行代码
var Strophe = require('strophe.js').Strophe;
var meStrophe = require('strophe.js');
$iq = meStrophe.$iq;
$build = meStrophe.$build;
$msg = meStrophe.$msg;
$pres = meStrophe.$pres;

如图

 

 

在strophe.js中

   setJid: function (jid) {
      this.jid = jid;
      this.authzid = Strophe.getBareJidFromJid(this.jid);
      this.authcid = Strophe.getNodeFromJid(this.jid);
    },

    getJid: function () {
      return this.jid;
    },
如图: 在strophe.js的2896行处添加二个方法,即Strophe.Connection.prototype中



在SDK的配置文件中 webim.config.js中
首行 var WebIM = {}; 替换成 

var WebIM = window.WebIM || {};

尾行添加
window.WebIM = WebIM

3:第三步修改main.js

先引入webim.config.js 再引入sdk为WebIM对象,然后将WebIM对象赋值到Vue的原型上

代码如下

require('./assets/lib/easemob-sdk/webim.config.js')
let WebIM = require('easemob-websdk')
Vue.prototype.$webim = WebIM

const conn = new WebIM.connection({
  isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
  https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
  url: WebIM.config.xmppURL,
  heartBeatWait: WebIM.config.heartBeatWait,
  autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
  autoReconnectInterval: WebIM.config.autoReconnectInterval,
  apiUrl: WebIM.config.apiURL,
  isAutoLogin: true
})

const options = {
  apiUrl: WebIM.config.apiURL,
  user: '1',
  pwd: 'xiuxiutrip123456',
  appKey: WebIM.config.appkey,
  success:function (re) {
    console.log('链接服务器正常')
  },
  error:function (err) {
    alert(err)
  }
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options

第四步:在组件中调用时

代码如下

this.$imoption.user = this.from_username
this.$imoption.pwd = this.currentUserpwd
this.$imconn.open(this.$imoption)
this.$imconn.listen({
    onOpened: function (message) {
         console.log('用户已上线')
     },
     onClosed: function (message) {
         console.log('用户已下线')
     },
     onEmojiMessage: this.receiveEmojiMessage,
     onPictureMessage: this.receivePictureMessage,
     onTextMessage: this.receiveTextMsg
})

到此vue项目集成环信webSDK算是吿一段落了

报错截图:

报此错的请修改 /node_modules/easemob-websdk/src/connection.js

 

报此错的请修改  /node_modules/strophe.js/strophe.js

 

报此错修改  webim.config.js

如果需要demo的话请把我所有博客点赞一遍,再请加我微信,免费发你代码

npm run dev 访问 http://localhost:8080/#/chat?from_username=2&to_username=1&to_nickname=梦

demo效果图如下

 

谢谢阅读.如果觉得对你有帮助请记得点赞或收藏.欢迎留言讨论.你的支持是我出产优秀博客的动力.

 

demo源码https://download.csdn.net/download/github_35631540/12498561

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值