功能背景:

之前和朋友一起做了一個wbe專案整合環信的即時通訊的功能,做的時候感嘆web端文件太少,而且npm包有一些坑,記錄下來寫了這篇部落格,之後不斷有人加我微信問我,怎麼整合.現在我再來重寫一下這篇部落格.

環信web整合功能介紹:

首先:在web端環信是不提供介面的,能拿到的官方的demo也只是用react寫的編譯後的檔案,所以你要自己寫UI

其次:使用聊天功能前的登入,是IM使用者登入,不是用你的環信賬號和密碼

最後:這篇文章是以當前最新版sdk寫的,當前最新版是

"easemob-websdk": "^1.8.3",

正文:

這幾天和朋友做的一個web專案中需要整合環信的即時通訊功能,上網查了很多資料,也試做了一個傳送訊息的demo.感覺用起來真是簡單方便,只需要提供Appkey,賬號和密碼就可以登入環信,而且功能強大,支援傳送表情,圖片,檔案,訊息已讀,以及視訊直播.

    做demo的時候只直接使用<script>標籤引入的sdk,正如環信所說

  整合方式,環信的webSDK整合文件是不包含Vue專案的整合的

我在整合的時候遇到了很多坑

比如找不到Strophe物件 ,再比如使用require方式引入strophe 包Base64未定義,真是頭大.後來功夫不負有心人,終於讓我變查資料,邊摸索,終於解決了所有問題,使用者能夠上線了.

下面說一下我的整合方式

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效果圖如下

謝謝