簡介
使用 Vue 框架開發的WebIM Demo，僅供參考集成：
- Vue Demo （體驗Demo）
- Github.com（Github 源碼地址）
項目運行
- 說明：音視頻功能必須使用 https + webkit瀏覽器
- NODEJS 版本建議 6+ 低于 13 （升級到13，結果用不了） 目前用的是 V8.11.4
1.將源碼克隆到本地
git clone https://github.com/easemob/webim-vue-demo.git
2.進入項目根目錄，安裝運行需要的依賴模塊
npm install
3.上述操作完成后
# 啟動測試
npm start (如需要測試音視頻功能，通過 HTTPS=true npm start 啟動)
# 打包發布，發布后文件在 build/ 目錄下
npm run build
4.修改appkey 運行
在WebIMConfig.js 中，將 appkey 改為自己在IM管理后臺申請的key，apiUrl ，xmppUrl 默認的無需更改，如果已聯系環信商務購買vip集群服務，需要更改成環信提供的地址，或者直接將 isHttpsDNS改為 true，就不需要在本地配置apiUrl ，xmppUrl
目錄介紹
目錄說明
| build | 打包后的文件 | |
| config | 項目的配置 | |
| node_modules | 項目依賴 | |
| static | 資源文件 | |
| travis | CI腳本 | |
| src | 項目源文件 | |
| components | 項目組件 |
| config | 表情和項目中ui配置 |
| pages | 項目頁面 |
| router | 路由 |
| store | vuex store |
| utils | sdk 引入和配置 |
Demo 文件說明
- 所有SDK 的調用都在 src/stroe，使用 VueX管理
SDK 集成
分為 NPM，本地引入文件 兩種方式，這里主要將下 Demo 集成方式：
demo 是使用 NPM 方式集成，代碼目錄：src/utils/WebIM.js
- 引入 SDK 和配置文件，實例化。
- 注冊 SDK 監聽事件
登陸/注冊
集成IM SDK，只有登陸成功后才能進行收發消息等操作
代碼目錄：src/pages/login
SDK 方法目錄：src/store/login
# 登陸
onLogin: function (context, payload) {context.commit("setUserName", payload.username);var options = {apiUrl: WebIM.config.apiURL,user: payload.username,pwd: payload.password,appKey: WebIM.config.appkey};WebIM.conn.open(options);localStorage.setItem("userInfo", JSON.stringify({ userId: payload.username, password: payload.password }));
},
# 注冊
onRegister: function (context, payload) {const _this = this;var options = {apiUrl: WebIM.config.apiURL,username: payload.username,password: payload.password,nickname: payload.nickname,appKey: WebIM.config.appkey,success: () => {//注冊成功，開發者自己定義提示},error: (err) => {//注冊失敗，開發者自己定義提示};WebIM.conn.registerUser(options);
},
消息模塊
代碼目錄：src/components/chat
SDK 方法目錄：src/store/chat
-
index 為發送消息 (群組消息需要設置type msg.setGroup("groupchat"))
-
message 為顯示消息上屏
-
圖片消息
代碼目錄： src/components/upLoadImage
-
附件消息
代碼目錄： src/components/upLoadFile
-
表情消息
代碼目錄： src/components/chatEmoji
-
錄音發送
支持直接錄音發送
代碼目錄：src/components/recorder
# 發送文本消息
onSendText: function(context, payload){const { chatType, chatId, message } = payload;const id = WebIM.conn.getUniqueId();const time = +new Date();const chatroom = chatType === "chatroom";const type = chatType === "contact" ? "singleChat" : "groupChat";const jid = {contact: "name",group: "groupid",chatroom: "id"};const msgObj = new WebIM.message("txt", id);msgObj.set({msg: message,to: chatId[jid[chatType]],chatType: type,roomType: chatroom,success: function(){//消息發送成功，開發者自己處理},fail: function(e){//消息發送失敗，開發者自己處理}});if(chatType === "group" || chatType === "chatroom"){msgObj.setGroup("groupchat");}WebIM.conn.send(msgObj.body);
}
好友功能
代碼目錄：src/components/addModel
SDK調用方法目錄：src/store/friendModule
- addFriend 添加好友
- friendBlack 好友黑名單
- getFriendRequest 收到好友請求
# 添加好友
addFriend: function(context, payload){const username = localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")).userId;const { id } = payload;WebIM.conn.subscribe({to: id,message: username + "請求添加你為好友"});
},
# 接受好友請求
acceptSubscribe: function(context, payload){WebIM.conn.subscribed({to: payload,message: "[resp:true]"});
},
# 拒絕好友請求
declineSubscribe: function(context, payload){const username = localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")).userId;const { id } = payload;WebIM.conn.unsubscribed({to: id,message: username + "拒絕您的好友請求"});
},
# 獲取好友黑名單
onGetFriendBlack: function(context, payload){WebIM.conn.getBlacklist();
},
# 添加好友黑名單
onAddBlack: function(context, payload){let addName = payload.userId.name;WebIM.conn.addToBlackList({name: addName,});Vue.$store.dispatch("onGetContactUserList", { type: "addBlack", addName });
},
# 移除好友黑名單
onRemoveBlack: function(context, payload){let blackName = payload.removeName;WebIM.conn.removeFromBlackList({name: blackName,success: function(){},error: function(){}});
},
# 刪除好友
onDeleteFriend: function(context, payload){let deleteName = payload.userId.name;WebIM.conn.removeRoster({to: deleteName,success: function(){ // 刪除成功conn.unsubscribed({to: deleteName});},error: function(){ // 刪除失敗}});
}
音視頻
單人和多人音視頻，代碼目錄:src/components/emediaModal
- index 初始化單人音視頻，注冊單人音視頻
- multiAVModal 多人音視頻 (請直接參考文件）
# 單人音頻呼叫
onCallVoice: function(context, payload){const { chatType, to } = payload;const type = chatType === "contact" ? "singleChat" : "groupChat";const userInfo = JSON.parse(localStorage.getItem("userInfo"));if(chatType === "contact"){WebIM.call.caller = userInfo.userId;WebIM.call.makeVoiceCall(to, null, payload.rec, payload.recMerge);}
},
# 單人視頻呼叫
onCallVideo: function(context, payload){const { chatType, to } = payload;const type = chatType === "contact" ? "singleChat" : "groupChat";const userInfo = JSON.parse(localStorage.getItem("userInfo"));if(chatType === "contact"){WebIM.call.caller = userInfo.userId;WebIM.call.makeVideoCall(to, null, payload.rec, payload.recMerge);}
},
# 接收音頻/視頻 邀請
accept(){WebIM.call.acceptCall();
},
# 掛斷
WebIM.call.endCall();
音視頻錄制
錄制功能，SDK V3.0.6 版本開始，由SDK 控制是否進行錄制（若SDK 不是此版本，錄制功能請聯系商務同事協調配置）
代碼目錄： src/components/videoSetting
SDK 方法調用目錄：src/store/chat
- 請參考發起音視頻的方法，第三個參數為是否錄制、第四個參數為是否合并，參數可以為空
群組功能
群組代碼目錄：src/components/group
SDK 調用方法目錄： src/store/group
onCreateGroup: function (context, payload) {const { groupname, desc, members, pub, approval } = payloadlet options = {data: {groupname: groupname, // 群組名desc: desc, // 群組描述members: members, // 用戶名組成的數組public: pub, // pub等于true時，創建為公開群approval: approval, // approval為true，加群需審批，為false時加群無需審批},success: function (resp) {//創建群組成功},error: function () { //創建群組失敗}};WebIM.conn.createGroupNew(options);
},
onJoinGroup: function (context, payload) {let options = {groupId: payload.select_groupid, // 群組IDsuccess: function (resp) {//加入成功，開發者自己處理},error: function (e) {//加入失敗，開發者自己處理};WebIM.conn.joinGroup(options);
},
onGetGroupBlack: function (context, payload) {let select_id = payload.groupid || payload.select_idlet option = {groupId: select_id,success: function (list) {//獲取成功},error: function () {}};WebIM.conn.getGroupBlacklistNew(option);
},
onGetGroupinfo: function (context, payload) {let gid = payload.select_id || payload.select_groupid;let options = {groupId: gid, //群組idsuccess: function (resp) {//獲取成功},error: function () { //獲取失敗}};WebIM.conn.getGroupInfo(options)
},
onInviteGroup: function (context, payload) {const { select_id, select_name } = payloadlet option = {users: [select_name],groupId: select_id};WebIM.conn.inviteToGroup(option);
},
# 收到進群申請 同意
onAgreeJoinGroup: function (context, payload) {const { joinName, joinGroupId } = payloadlet options = {applicant: joinName, // 申請加群的用戶名groupId: joinGroupId, // 群組IDsuccess: function (resp) {},error: function (e) { }};WebIM.conn.agreeJoinGroup(options);
},
# 收到進群申請 拒絕
onRejectJoinGroup: function (context, payload) {const { joinName, joinGroupId } = payloadlet options = {applicant: joinName, // 申請加群的用戶名groupId: joinGroupId, // 群組IDsuccess: function (resp) {},error: function (e) { }};WebIM.conn.rejectJoinGroup(options);
},
- groupSetting 群組設置
請參考 src/store/group
消息存儲
代碼目錄：store > chat > msgList
SDK 調用方法目錄：src/store/chat
如您已經開通 SDK 增值服務 消息漫游
- 關于持久化：這個demo采用的 SDK 的增值服務 消息漫游，拉取歷史消息展示
# 拉取歷史消息
getHistoryMessage: function(context, payload){const options = {queue: payload.name,isGroup: payload.isGroup,count: 10, // 每次獲取消息條數success: function(msgs){ },fail: function(){ }};WebIM.conn.fetchHistoryMessages(options);
},
若您未開通上述功能
- 可以采用 indexdb 做本地存儲
- 使用 增值功能 消息實時回調，將消息實時同步到開發者的服務器
- 使用 免費功能 Rest 拉取歷史消息，消息拉取有延遲，消息實時性要求不高的開發者使用此功能
消息撤回
代碼目錄：src/store/chat
recallMessage: function(context, payload){const { chatType, mid } = payload.message;const to = payload.to;const me = this;const chatTypeObj = {contact: "chat",group: "groupchat",chatroom: "chatroom"};const option = {mid,to,type: chatTypeObj[chatType],success: function(){console.log("消息已撤回")payload.message.status = "recall";payload.message.msg = "消息已撤回";Vue.$store.commit("updateMessageStatus", payload.message);},fail: function(){// me.$message('消息撤回失敗');},};WebIM.conn.recallMessage(option);
}
SDK 集成方式說明
NPM 集成
IM SDK, 音視頻 SDK 支持NPM 安裝，其中單人音視頻SDK 依賴 IM SDK
# 安裝 IM SDK
npm install easemob-websdk# 安裝單人音視頻
npm install easemob-webrtc# 安裝多人音視頻 SDK
npm install easemob-emedia
項目引入SDK
- 注：npm 安裝的只有 SDK，還需要本地引入WebIMConfgi.js 文件
import websdk from "easemob-websdk";
import emedia from "easemob-emedia";
import webrtc from "easemob-webrtc";
可直接參考 Demo目錄 src/utils/WebIM.js
引入本地文件 集成
- 需要下載 React Demo，Vue Demo 沒有將以下文件本地化
- 本地文件集成，需要在初始化和消息發送時加上 default
# 創建鏈接conn = WebIM.conn = new WebIM.default.connection({})# 消息WebIM.message = WebIM.default.message
1.下載Demo 后，將 SDK 目錄下的 webimSDK.js、EMedia_x1v1.js、EMedia_sdk-dev.js 拷貝到項目目錄下
2.再找到 WebIMConfig.js 文件拷貝到和上述文件的同級目錄下
3.引入文件
<script type='text/javascript' src='./WebIMConfig.js'></script>
<script type='text/javascript' src='./webimSDK.js'></script>
<script type='text/javascript' src='./EMedia_x1v1.js'></script>
<script type='text/javascript' src='./EMedia_sdk-dev.js'></script>
或 使用import引入本地目錄文件
import config from "./WebIMConfig.js"
import websdk from "./webimSDK.js";
import emedia from "EMedia_x1v1.js";
import webrtc from "EMedia_sdk-dev.js";
文件引入后，注冊監聽，就可以進行登陸，收發消息，音視頻等操作
常見錯誤
- 發送消息提示：禁止通訊，inter-app communication is not allowed
需要在初始化SDK 候加上 appKey: WebIM.config.appkey; - 訪問SDK，xmpp鏈接顯示多個域名或ip
需要在地址前加上//或使用 isHttpsDNS：true （在WebIMConfig.js中設置） - npm 安裝集成出現提示
在 webpack.base.conf.js如圖添加配置unknownContextCritical: false，exprContextCritical: false
總結
以上是生活随笔為你收集整理的WebIM Vue Demo 使用文档的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
