WebIM Vue Demo 使用文檔

簡介

使用 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

createGroup 創建羣組

onCreateGroup: function (context, payload) {
  const { groupname, desc, members, pub, approval } = payload
  let 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);
},

addGroupUser 加入羣組

onJoinGroup: function (context, payload) {
  let options = {
  groupId: payload.select_groupid,                              // 羣組ID
  success: function (resp) {
    //加入成功，開發者自己處理
  },
  error: function (e) {
    //加入失敗，開發者自己處理
  };
  WebIM.conn.joinGroup(options);
},

groupBlack 羣組黑名單

onGetGroupBlack: function (context, payload) {
  let select_id = payload.groupid || payload.select_id
  let option = {
    groupId: select_id,
    success: function (list) {
      //獲取成功
    },
    error: function () {}
    };
  WebIM.conn.getGroupBlacklistNew(option);
},

groupInfo 羣組詳情

onGetGroupinfo: function (context, payload) {
  let gid = payload.select_id || payload.select_groupid;
  let options = {
    groupId: gid,  //羣組id
    success: function (resp) {
      //獲取成功
    },
    error: function () { 
      //獲取失敗
    }
  };
    WebIM.conn.getGroupInfo(options)
},

groupInvite 邀請好友進羣

onInviteGroup: function (context, payload) {
  const { select_id, select_name } = payload
  let option = {
    users: [select_name],
	groupId: select_id
  };
  WebIM.conn.inviteToGroup(option);
},

groupRequest 收到羣組申請

# 收到進羣申請 同意
onAgreeJoinGroup: function (context, payload) {
  const { joinName, joinGroupId } = payload
  let options = {
    applicant: joinName,                          // 申請加羣的用戶名
    groupId: joinGroupId,                              // 羣組ID
    success: function (resp) {
    },
    error: function (e) { }
    };
  WebIM.conn.agreeJoinGroup(options);
},

# 收到進羣申請 拒絕
onRejectJoinGroup: function (context, payload) {
  const { joinName, joinGroupId } = payload
  let options = {
    applicant: joinName,                // 申請加羣的用戶名
    groupId: joinGroupId,                    // 羣組ID
    success: 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 使用文檔

簡介

項目運行

目錄介紹

Demo 文件說明

SDK 集成

登陸/註冊

消息模塊

好友功能

音視頻

音視頻錄製

羣組功能

消息存儲

消息撤回

SDK 集成方式說明

NPM 集成

引入本地文件集成

常見錯誤

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

網絡爬蟲的祕密：如何高效地抓取JD.com視頻鏈接

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

WebIM Vue Demo 使用文檔

mpVue 集成環信小程序 SDK

環信多人音視頻會議功能實現

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

WebIM Vue Demo 使用文檔

簡介

項目運行

目錄介紹

Demo 文件說明

SDK 集成

登陸/註冊

消息模塊

好友功能

音視頻

音視頻錄製

羣組功能

消息存儲

消息撤回

SDK 集成方式說明

NPM 集成

引入本地文件 集成

常見錯誤

引入本地文件集成