Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊
更新時(shí)間：2020年12月14日 16:27:26 作者：源哥哥吶
這篇文章主要介紹了Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
由于其他博客的相關(guān)融云的Vue項(xiàng)目開發(fā)不是特別完善，此項(xiàng)目加入了自己的一些思考，可供大家有一點(diǎn)方向。
1.融云官網(wǎng)注冊(cè)賬號(hào)，創(chuàng)建應(yīng)用并獲取必要的初始化參數(shù) appkey
2.融云web開發(fā)文檔 本人使用3.x 版本
3.vue項(xiàng)目引入cdn(index.html)
項(xiàng)目需求：用戶當(dāng)前會(huì)話列表+用戶當(dāng)前會(huì)話頁(yè)面
// 注意在dom之前引入 <script src="https://cdn.ronghub.com/RongIMLib-3.0.0-dev.js"></script>
4.在項(xiàng)目開始之前先獲取融云返回的Token(此操作需要后端操作，token用于后面初始化連接融云時(shí)使用)
// 獲取融云token
// RongToken --- api ---
getRongToken() {
let userId = this.$store.state.member.info.member_id
let name = this.$store.state.member.info.member_name
let portraitUri = this.$store.state.member.info.member_avatar
RongToken(userId,name,portraitUri).then((res) => {
if(res.code == 200) {
this.appToken = res.data.token
// 將融云token 存入vuex
this.$store.commit('setAppToken',res.data.token)
}else{
return;
}
})
},
5.融云初始化
// 初始化融云
initRong() {
this.IM = RongIMLib.init({
appkey: 'xxxxxxx' // 融云appkey
})
},
6.建立連接
// 建立連接
getConnect() {
var user = {
token: this.$store.state.im_chat.appToken
};
this.IM.connect(user).then((res) => {
// console.log('鏈接成功, 鏈接用戶 id 為: ', res.id);
// 改變用戶連接狀態(tài) 用于監(jiān)聽(tīng)用戶是否已連接
this.$store.commit('changeConnectStatus',true)
}).catch((error) => {
// console.log('鏈接失敗: ', error.code, error.msg);
});
},
7.會(huì)話列表(用于監(jiān)聽(tīng)會(huì)話列表及渲染當(dāng)前會(huì)話列表)
// 用于監(jiān)聽(tīng)會(huì)話列表
ImWatch() {
let IM = this.IM
let conversationList = [];
let option = {
count: 30
}
IM.Conversation.getList(option).then((allConversationList) => {
// console.log('獲取會(huì)話列表成功', allConversationList);
conversationList = IM.Conversation.merge({
conversationList: conversationList,
updatedConversationList: allConversationList
}); // TODO 更新會(huì)話列表界面
this.list = conversationList
});
IM.watch({
conversation: (event) =>{
var updatedConversationList = event.updatedConversationList; // 更新的會(huì)話列表
// console.log('更新會(huì)話匯總:', updatedConversationList);
// console.log('最新會(huì)話列表:', IM.Conversation.merge({
// conversationList: conversationList,
// updatedConversationList: updatedConversationList
// }));
this.list = updatedConversationList
},
message: function(event){
var message = event.message;
// console.log('收到新消息', message);
},
status: (event)=>{
var status = event.status;
if(status != RongIMLib.CONNECTION_STATUS.CONNECTED) {
this.$store.commit('changeConnectStatus',false)
}
switch (status) {
case RongIMLib.CONNECTION_STATUS.CONNECTED:
console.log('鏈接成功');
break;
case RongIMLib.CONNECTION_STATUS.CONNECTING:
console.log('正在連接中');
break;
case RongIMLib.CONNECTION_STATUS.DISCONNECTED:
console.log('已主動(dòng)斷開連接');
break;
case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
console.log('網(wǎng)絡(luò)不可用'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
break;
case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
console.log('Socket 鏈接錯(cuò)誤'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
break;
case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
console.log('其他設(shè)備登錄, 本端被踢'); // 己端被踢, 不可進(jìn)行重連. 否則會(huì)造成多端循環(huán)互踢
break;
case RongIMLib.CONNECTION_STATUS.BLOCKED:
console.log('鏈接斷開, 用戶已被封禁');
break;
default:
console.log('鏈接狀態(tài)變化為:', status);
break;
}
}
})
},
8.會(huì)話頁(yè)面(用于監(jiān)聽(tīng)當(dāng)前新消息是否是當(dāng)前聊天對(duì)象以及是否渲染在當(dāng)前會(huì)話頁(yè)面)
// 用于當(dāng)前會(huì)話頁(yè)面
ImWatch() {
let IM = this.IM
var conversation = IM.Conversation.get({
targetId: this.targetId,
type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
var option = {
timestrap: 0, // 為0從當(dāng)前時(shí)間最新獲取
count: 20
};
conversation.getMessages(option).then((result) =>{
var list = result.list; // 歷史消息列表
var hasMore = result.hasMore; // 是否還有歷史消息可以獲取
// console.log('獲取歷史消息成功', list, hasMore);
this.list = list
});
IM.watch({
message: function(event){
var message = event.message;
// console.log('收到新消息', message);
},
// 監(jiān)聽(tīng)會(huì)話
conversation:(res) => {
var updatedConversationList = res.updatedConversationList;
// 發(fā)送信息過(guò)來(lái)--用戶id
// 發(fā)送過(guò)來(lái)id != 當(dāng)前用戶id 或者當(dāng)前會(huì)話id 則不渲染在列表中
// 等于當(dāng)前id 或 會(huì) 話id 則即加入列表中
let updateId = updatedConversationList[0].latestMessage.content.user.id
let member_id = this.$store.state.member.info.member_id
let targetId = Number(this.targetId)
if(updateId != targetId && updateId != member_id){
return;
}
this.list.push(updatedConversationList[0].latestMessage)
},
status: (event)=>{
var status = event.status;
if(status != RongIMLib.CONNECTION_STATUS.CONNECTED) {
this.$store.commit('changeConnectStatus',false)
}
switch (status) {
case RongIMLib.CONNECTION_STATUS.CONNECTED:
console.log('鏈接成功');
break;
case RongIMLib.CONNECTION_STATUS.CONNECTING:
console.log('正在連接中');
break;
case RongIMLib.CONNECTION_STATUS.DISCONNECTED:
console.log('已主動(dòng)斷開連接');
break;
case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
console.log('網(wǎng)絡(luò)不可用'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
break;
case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
console.log('Socket 鏈接錯(cuò)誤'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
break;
case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
console.log('其他設(shè)備登錄, 本端被踢'); // 己端被踢, 不可進(jìn)行重連. 否則會(huì)造成多端循環(huán)互踢
break;
case RongIMLib.CONNECTION_STATUS.BLOCKED:
console.log('鏈接斷開, 用戶已被封禁');
break;
default:
console.log('鏈接狀態(tài)變化為:', status);
break;
}
}
})
},
9.會(huì)話頁(yè)面(用于點(diǎn)擊發(fā)送之后監(jiān)聽(tīng)發(fā)送信息及渲染當(dāng)前頁(yè)面)
// 監(jiān)聽(tīng)當(dāng)前發(fā)送的信息
send() {
if(this.context == '') {
Toast('請(qǐng)輸入內(nèi)容');
return;
}
var conversation = this.IM.Conversation.get({
targetId: this.targetId, // 發(fā)送的目標(biāo)id
type: RongIMLib.CONVERSATION_TYPE.PRIVATE, // 單聊
});
conversation.send({
messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
content: {
content: this.context, // 文本內(nèi)容
// 發(fā)送消息攜帶的參數(shù) 用于頁(yè)面渲染及相關(guān)判斷
user:{
id:this.$store.state.member.info.member_id,
username:this.$store.state.member.info.member_name,
shopname:this.storeName,
portraitUri:this.$store.state.member.info.member_avatar,
}
}
}).then((message) =>{
// console.log('發(fā)送文字消息成功', message);
this.context = ''
}).catch((error) => {
Toast('發(fā)送失敗，請(qǐng)重試')
});
}
到此這篇關(guān)于Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊的文章就介紹到這了,更多相關(guān)Vue使用融云實(shí)時(shí)個(gè)人單聊通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼的方法
這篇文章主要介紹了Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
不過(guò) Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計(jì)概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
Vue實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能
這篇文章主要為大家詳細(xì)介紹了如何Vue利用實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
Vue中$bus的用法及$on、$off的使用說(shuō)明
這篇文章主要介紹了Vue中$bus的用法及$on、$off的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
animate.css在vue項(xiàng)目中的使用教程
在vue項(xiàng)目中使用動(dòng)畫其實(shí)有多種方式，可以使用vue中的過(guò)渡transition，可以使用animate動(dòng)畫與transition配合使用，也可以單獨(dú)使用animate動(dòng)畫庫(kù)，下面我們開始介紹在vue中單獨(dú)使用animate動(dòng)畫，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue的全局提示框組件實(shí)例代碼,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue中如何動(dòng)態(tài)添加樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue2 監(jiān)聽(tīng)屬性改變watch的實(shí)例代碼
今天小編就為大家分享一篇Vue2 監(jiān)聽(tīng)屬性改變watch的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖代碼示例(個(gè)人需求)
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項(xiàng)目中實(shí)現(xiàn)節(jié)假日置灰顯示的功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時(shí)篩選條件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11