>[danger]把環信SDK集成到vueCli中 ---- 1. [登錄環信即時通信云]([https://www.easemob.com/](https://www.easemob.com/)), 注冊一個應用, 得到key值  2. vue項目中, 安裝以下模塊 `$ npm install --save easemob-websdk crypto-js underscore` 3. 在node_modules中配置代碼 (1) easemob-websdk/src/connection.js    ~~~ var meStrophe = require("../../strophe.js"); var Strophe = require("../../strophe.js").Strophe; ~~~ ~~~ var config = { xmppURL: 'im-api.easemob.com', apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com', appkey: '1135181219098181#shuangshenghuoyan', https: false, isMultiLoginSessions: true, isAutoLogin: true, isWindowSDK: false, isSandBox: false, isDebug: false, autoReconnectNumMax: 2, autoReconnectInterval: 2, isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol), heartBeatWait: 4500, isHttpDNS: false, msgStatus: true, delivery: true, read: true, saveLocal: false, encrypt: { type: 'none' } } ~~~ ~~~ WebIM.config = config; ~~~ (2) strophe.js/dist/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; }, ~~~ 4. main.js中配置環信 ~~~ /*****配置環信******/ // 1. 安裝并引入環信SDK import websdk from 'easemob-websdk' let WebIM = window.WebIM = websdk; Vue.prototype.WebIM = WebIM; // 2. 創建連接 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 }); // 3. 把鏈接對象擴展給Vue實例屬性(以后可以用this.myCon代表環信鏈接對象) Vue.prototype.myCon = conn; /*******配置環信結束***********/ ~~~ 5. store/index.js 設置業務代碼 ~~~ export default new Vuex.Store({ state: { // 保存聊天數據 chatData: [ { 'type': "text", "own": true, "content": "晚上吃飯了嘛?" }, { 'type': "text", "own": false, "content": "還沒吃呢, 你準備請我吃點什么?" }, { 'type': "text", "own": true, "content": "吃飯之前, 先念詩吧" }, { 'type': "text", "own": false, "content": "\n" + "人生若只如初見，何事秋風悲畫扇。\n" + "等閑變卻故人心，卻道故人心易變。\n" + "驪山語罷清宵半，淚雨零鈴終不怨。\n" + "何如薄幸錦衣郎，比翼連枝當日愿。" } ], }, mutations: { changeMessage(state, dataObj) { state.chatData.push(dataObj); } }, actions: { // 4. 注冊發送消息, 監聽事件 listenConnect({commit}, state) { let conn = state; conn.listen({ onOpened: function (message) { // 連接成功回調 // 如果isAutoLogin設置為false，那么必須手動設置上線，否則無法收消息 // 手動上線指的是調用conn.setPresence(); 如果conn初始化時已將isAutoLogin設置為true, 則無需調用conn.setPresence(); }, onClosed: function (message) { //連接關閉回調 }, onTextMessage: function (message) { // 收到文本消息 // 注意對象key關鍵字和chat里要解析時用的key保持一致 commit('changeMessage', { // 消息類型 'type': "text", // 是否是自己發送的(false代表接收他人消息) "own": false, // 具體消息值 "content": message['data'] }); }, onEmojiMessage: function (message) { //收到表情消息 }, onPictureMessage: function (message) { //收到圖片消息 }, onCmdMessage: function (message) { //收到命令消息 }, onAudioMessage: function (message) { //收到音頻消息 }, onLocationMessage: function (message) { //收到位置消息 }, onFileMessage: function (message) { //收到文件消息 }, onVideoMessage: function (message) { // 收到視頻消息 let node = document.getElementById('privateVideo'); let option = { url: message.url, headers: { 'Accept': 'audio/mp4' }, onFileDownloadComplete: function (response) { // 文件下載完成 node.src = WebIM.utils.parseDownloadResponse.call(conn, response); }, onFileDownloadError: function () { // 文件下載錯誤 console.log('File down load error.') } }; WebIM.utils.download.call(conn, option); }, onPresence: function (message) { //處理“廣播”或“發布-訂閱”消息，如聯系人訂閱請求、處理群組、聊天室被踢解散等消息 }, onRoster: function (message) { //處理好友申請 }, onInviteMessage: function (message) { //處理群組邀請 }, onOnline: function () { //本機網絡連接成功 }, onOffline: function () { //本機網絡掉線 }, onError: function (message) { //失敗回調 }, onBlacklistUpdate: function (list) { // 黑名單變動 // 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調這個函數，list則是黑名單現有的所有好友信息 console.log(list); }, onReceivedMessage: function (message) { //收到消息送達服務器回執 }, onDeliveredMessage: function (message) { //收到消息送達客戶端回執 }, onReadMessage: function (message) { //收到消息已讀回執 }, onCreateGroup: function (message) { //創建群組成功回執（需調用createGroupNew） }, onMutedMessage: function (message) { //如果用戶在A群組被禁言，在A群發消息會走這個回調并且消息不會傳遞給群其它成員 } // 其他方法見文檔 }); }, // 5. 本地發送消息變更事件 async localMessageChange({commit}, state) { commit('changeMessage', { 'type': "text", "own": true, "content": state }); } } }); ~~~ 接著看 [環信_聊天組件](%E7%8E%AF%E4%BF%A1_%E8%81%8A%E5%A4%A9%E7%BB%84%E4%BB%B6.md)