簡(jiǎn)介
使用 Vue 框架開(kāi)發(fā)的WebIM Demo，僅供參考集成：
- Vue Demo （體驗(yàn)Demo）
- Github.com（Github 源碼地址）
項(xiàng)目運(yùn)行
- 說(shuō)明：音視頻功能必須使用 https + webkit瀏覽器
- NODEJS 版本建議 6+ 低于 13 （升級(jí)到13，結(jié)果用不了） 目前用的是 V8.11.4
1.將源碼克隆到本地
git clone https://github.com/easemob/webim-vue-demo.git
2.進(jìn)入項(xiàng)目根目錄，安裝運(yùn)行需要的依賴模塊
npm install
3.上述操作完成后
# 啟動(dòng)測(cè)試
npm start (如需要測(cè)試音視頻功能，通過(guò) HTTPS=true npm start 啟動(dòng))
# 打包發(fā)布，發(fā)布后文件在 build/ 目錄下
npm run build
4.修改appkey 運(yùn)行
在WebIMConfig.js 中，將 appkey 改為自己在IM管理后臺(tái)申請(qǐng)的key，apiUrl ，xmppUrl 默認(rèn)的無(wú)需更改，如果已聯(lián)系環(huán)信商務(wù)購(gòu)買vip集群服務(wù)，需要更改成環(huán)信提供的地址，或者直接將 isHttpsDNS改為 true，就不需要在本地配置apiUrl ，xmppUrl
目錄介紹
目錄說(shuō)明
| build | 打包后的文件 | |
| config | 項(xiàng)目的配置 | |
| node_modules | 項(xiàng)目依賴 | |
| static | 資源文件 | |
| travis | CI腳本 | |
| src | 項(xiàng)目源文件 | |
| components | 項(xiàng)目組件 |
| config | 表情和項(xiàng)目中ui配置 |
| pages | 項(xiàng)目頁(yè)面 |
| router | 路由 |
| store | vuex store |
| utils | sdk 引入和配置 |
Demo 文件說(shuō)明
- 所有SDK 的調(diào)用都在 src/stroe，使用 VueX管理
SDK 集成
分為 NPM，本地引入文件 兩種方式，這里主要將下 Demo 集成方式：
demo 是使用 NPM 方式集成，代碼目錄：src/utils/WebIM.js
- 引入 SDK 和配置文件，實(shí)例化。
- 注冊(cè) SDK 監(jiān)聽(tīng)事件
登陸/注冊(cè)
集成IM SDK，只有登陸成功后才能進(jìn)行收發(fā)消息等操作
代碼目錄：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 }));
},
# 注冊(cè)
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: () => {//注冊(cè)成功，開(kāi)發(fā)者自己定義提示},error: (err) => {//注冊(cè)失敗，開(kāi)發(fā)者自己定義提示};WebIM.conn.registerUser(options);
},
消息模塊
代碼目錄：src/components/chat
SDK 方法目錄：src/store/chat
-
index 為發(fā)送消息 (群組消息需要設(shè)置type msg.setGroup("groupchat"))
-
message 為顯示消息上屏
-
圖片消息
代碼目錄： src/components/upLoadImage
-
附件消息
代碼目錄： src/components/upLoadFile
-
表情消息
代碼目錄： src/components/chatEmoji
-
錄音發(fā)送
支持直接錄音發(fā)送
代碼目錄：src/components/recorder
# 發(fā)送文本消息
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(){//消息發(fā)送成功，開(kāi)發(fā)者自己處理},fail: function(e){//消息發(fā)送失敗，開(kāi)發(fā)者自己處理}});if(chatType === "group" || chatType === "chatroom"){msgObj.setGroup("groupchat");}WebIM.conn.send(msgObj.body);
}
好友功能
代碼目錄：src/components/addModel
SDK調(diào)用方法目錄：src/store/friendModule
- addFriend 添加好友
- friendBlack 好友黑名單
- getFriendRequest 收到好友請(qǐng)求
# 添加好友
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 + "請(qǐng)求添加你為好友"});
},
# 接受好友請(qǐng)求
acceptSubscribe: function(context, payload){WebIM.conn.subscribed({to: payload,message: "[resp:true]"});
},
# 拒絕好友請(qǐng)求
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 + "拒絕您的好友請(qǐng)求"});
},
# 獲取好友黑名單
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 初始化單人音視頻，注冊(cè)單人音視頻
- multiAVModal 多人音視頻 (請(qǐng)直接參考文件）
# 單人音頻呼叫
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);}
},
# 接收音頻/視頻 邀請(qǐng)
accept(){WebIM.call.acceptCall();
},
# 掛斷
WebIM.call.endCall();
音視頻錄制
錄制功能，SDK V3.0.6 版本開(kāi)始，由SDK 控制是否進(jìn)行錄制（若SDK 不是此版本，錄制功能請(qǐng)聯(lián)系商務(wù)同事協(xié)調(diào)配置）
代碼目錄： src/components/videoSetting
SDK 方法調(diào)用目錄：src/store/chat
- 請(qǐng)參考發(fā)起音視頻的方法，第三個(gè)參數(shù)為是否錄制、第四個(gè)參數(shù)為是否合并，參數(shù)可以為空
群組功能
群組代碼目錄：src/components/group
SDK 調(diào)用方法目錄： src/store/group
onCreateGroup: function (context, payload) {const { groupname, desc, members, pub, approval } = payloadlet options = {data: {groupname: groupname, // 群組名desc: desc, // 群組描述members: members, // 用戶名組成的數(shù)組public: pub, // pub等于true時(shí)，創(chuàng)建為公開(kāi)群approval: approval, // approval為true，加群需審批，為false時(shí)加群無(wú)需審批},success: function (resp) {//創(chuàng)建群組成功},error: function () { //創(chuàng)建群組失敗}};WebIM.conn.createGroupNew(options);
},
onJoinGroup: function (context, payload) {let options = {groupId: payload.select_groupid, // 群組IDsuccess: function (resp) {//加入成功，開(kāi)發(fā)者自己處理},error: function (e) {//加入失敗，開(kāi)發(fā)者自己處理};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)
},
- groupInvite 邀請(qǐng)好友進(jìn)群
onInviteGroup: function (context, payload) {const { select_id, select_name } = payloadlet option = {users: [select_name],groupId: select_id};WebIM.conn.inviteToGroup(option);
},
- groupRequest 收到群組申請(qǐng)
# 收到進(jìn)群申請(qǐng) 同意
onAgreeJoinGroup: function (context, payload) {const { joinName, joinGroupId } = payloadlet options = {applicant: joinName, // 申請(qǐng)加群的用戶名groupId: joinGroupId, // 群組IDsuccess: function (resp) {},error: function (e) { }};WebIM.conn.agreeJoinGroup(options);
},
# 收到進(jìn)群申請(qǐng) 拒絕
onRejectJoinGroup: function (context, payload) {const { joinName, joinGroupId } = payloadlet options = {applicant: joinName, // 申請(qǐng)加群的用戶名groupId: joinGroupId, // 群組IDsuccess: function (resp) {},error: function (e) { }};WebIM.conn.rejectJoinGroup(options);
},
- groupSetting 群組設(shè)置
請(qǐng)參考 src/store/group
消息存儲(chǔ)
代碼目錄：store > chat > msgList
SDK 調(diào)用方法目錄：src/store/chat
如您已經(jīng)開(kāi)通 SDK 增值服務(wù) 消息漫游
- 關(guān)于持久化：這個(gè)demo采用的 SDK 的增值服務(wù) 消息漫游，拉取歷史消息展示
# 拉取歷史消息
getHistoryMessage: function(context, payload){const options = {queue: payload.name,isGroup: payload.isGroup,count: 10, // 每次獲取消息條數(shù)success: function(msgs){ },fail: function(){ }};WebIM.conn.fetchHistoryMessages(options);
},
若您未開(kāi)通上述功能
- 可以采用 indexdb 做本地存儲(chǔ)
- 使用 增值功能 消息實(shí)時(shí)回調(diào)，將消息實(shí)時(shí)同步到開(kāi)發(fā)者的服務(wù)器
- 使用 免費(fèi)功能 Rest 拉取歷史消息，消息拉取有延遲，消息實(shí)時(shí)性要求不高的開(kāi)發(fā)者使用此功能
消息撤回
代碼目錄：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 集成方式說(shuō)明
NPM 集成
IM SDK, 音視頻 SDK 支持NPM 安裝，其中單人音視頻SDK 依賴 IM SDK
# 安裝 IM SDK
npm install easemob-websdk# 安裝單人音視頻
npm install easemob-webrtc# 安裝多人音視頻 SDK
npm install easemob-emedia
項(xiàng)目引入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 沒(méi)有將以下文件本地化
- 本地文件集成，需要在初始化和消息發(fā)送時(shí)加上 default
# 創(chuàng)建鏈接conn = WebIM.conn = new WebIM.default.connection({})# 消息WebIM.message = WebIM.default.message
1.下載Demo 后，將 SDK 目錄下的 webimSDK.js、EMedia_x1v1.js、EMedia_sdk-dev.js 拷貝到項(xiàng)目目錄下
2.再找到 WebIMConfig.js 文件拷貝到和上述文件的同級(jí)目錄下
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";
文件引入后，注冊(cè)監(jiān)聽(tīng)，就可以進(jìn)行登陸，收發(fā)消息，音視頻等操作
常見(jiàn)錯(cuò)誤
- 發(fā)送消息提示：禁止通訊，inter-app communication is not allowed
需要在初始化SDK 候加上 appKey: WebIM.config.appkey; - 訪問(wèn)SDK，xmpp鏈接顯示多個(gè)域名或ip
需要在地址前加上//或使用 isHttpsDNS：true （在WebIMConfig.js中設(shè)置） - npm 安裝集成出現(xiàn)提示
在 webpack.base.conf.js如圖添加配置unknownContextCritical: false，exprContextCritical: false
總結(jié)
以上是生活随笔為你收集整理的WebIM Vue Demo 使用文档的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
