个人中心
gpt4 book ai didi

Vue在H5 项目中使用融云进行实时个人单聊通讯

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue在H5 项目中使用融云进行实时个人单聊通讯由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

由于其他博客的相关融云的vue项目开发不是特别完善，此项目加入了自己的一些思考，可供大家有一点方向.

1.融云官网注册账号，创建应用并获取必要的初始化参数 appkey 。

Vue在H5 项目中使用融云进行实时个人单聊通讯

2. 融云web开发文档 本人使用3.x 版本 。

3.vue项目引入cdn(index.html) 。

​ 项目需求：用户当前会话列表+用户当前会话页面 。

?
1
2
3
// 注意在dom之前引入
 
<script src= "https://cdn.ronghub.com/rongimlib-3.0.0-dev.js" ></script>

4.在项目开始之前先获取融云返回的token(此操作需要后端操作，token用于后面初始化连接融云时使用) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取融云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.融云初始化 。

?
1
2
3
4
5
6
// 初始化融云
initrong() {
   this .im = rongimlib.init({
     appkey: 'xxxxxxx' // 融云appkey
   })
},

6.建立连接 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 建立连接
 
getconnect() {
   var user = {
     token: this .$store.state.im_chat.apptoken
   };
   this .im.connect(user).then((res) => {
     // console.log('链接成功, 链接用户 id 为: ', res.id);
     // 改变用户连接状态 用于监听用户是否已连接
     this .$store.commit( 'changeconnectstatus' , true )
   }). catch ((error) => {
     // console.log('链接失败: ', error.code, error.msg);
   });
},

7.会话列表(用于监听会话列表及渲染当前会话列表) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// 用于监听会话列表
imwatch() {
   let im = this .im
   let conversationlist = [];
   let option = {
     count: 30
   }
   im.conversation.getlist(option).then((allconversationlist) => {
     // console.log('获取会话列表成功', allconversationlist);
     conversationlist = im.conversation.merge({
       conversationlist: conversationlist,
       updatedconversationlist: allconversationlist
     }); // todo 更新会话列表界面
     this .list = conversationlist
   });
   im.watch({
     conversation: (event) =>{
       var updatedconversationlist = event.updatedconversationlist; // 更新的会话列表
       // console.log('更新会话汇总:', updatedconversationlist);
       // console.log('最新会话列表:', 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( '已主动断开连接' );
         break ;
       case rongimlib.connection_status.network_unavailable:
         console.log( '网络不可用' ); // sdk 内部会自动进行重连
         break ;
       case rongimlib.connection_status.socket_error:
         console.log( 'socket 链接错误' ); // sdk 内部会自动进行重连
         break ;
       case rongimlib.connection_status.kicked_offline_by_other_client:
         console.log( '其他设备登录, 本端被踢' ); // 己端被踢, 不可进行重连. 否则会造成多端循环互踢
         break ;
       case rongimlib.connection_status.blocked:
         console.log( '链接断开, 用户已被封禁' );
         break ;
       default :
         console.log( '链接状态变化为:' , status);
         break ;
       }
     }
   })
},

Vue在H5 项目中使用融云进行实时个人单聊通讯

8.会话页面(用于监听当前新消息是否是当前聊天对象以及是否渲染在当前会话页面) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 用于当前会话页面
imwatch() {
   let im = this .im
   var conversation = im.conversation.get({
     targetid: this .targetid,
     type: rongimlib.conversation_type.private
   });
   var option = {
     timestrap: 0, // 为0从当前时间最新获取
     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);
     },
     // 监听会话
     conversation:(res) => {
       var updatedconversationlist = res.updatedconversationlist;
       // 发送信息过来--用户id
       // 发送过来id != 当前用户id 或者当前会话id 则不渲染在列表中
       // 等于当前id 或 会 话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( '已主动断开连接' );
         break ;
       case rongimlib.connection_status.network_unavailable:
         console.log( '网络不可用' ); // sdk 内部会自动进行重连
         break ;
       case rongimlib.connection_status.socket_error:
         console.log( 'socket 链接错误' ); // sdk 内部会自动进行重连
         break ;
       case rongimlib.connection_status.kicked_offline_by_other_client:
         console.log( '其他设备登录, 本端被踢' ); // 己端被踢, 不可进行重连. 否则会造成多端循环互踢
         break ;
       case rongimlib.connection_status.blocked:
         console.log( '链接断开, 用户已被封禁' );
         break ;
       default :
         console.log( '链接状态变化为:' , status);
         break ;
       }
     }
   })
},

9.会话页面(用于点击发送之后监听发送信息及渲染当前页面) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 监听当前发送的信息
send() {
   if ( this .context == '' ) {
     toast( '请输入内容' );
     return ;
   }
   var conversation = this .im.conversation.get({
     targetid: this .targetid, // 发送的目标id
     type: rongimlib.conversation_type.private, // 单聊
   });
   conversation.send({
     messagetype: rongimlib.message_type.text, // 'rc:txtmsg'
     content: {
       content: this .context, // 文本内容
       // 发送消息携带的参数 用于页面渲染及相关判断
       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('发送文字消息成功', message);
     this .context = ''
   }). catch ((error) => {
     toast( '发送失败，请重试' )
   });
}

Vue在H5 项目中使用融云进行实时个人单聊通讯

到此这篇关于vue在h5 项目中使用融云进行实时个人单聊通讯的文章就介绍到这了,更多相关vue使用融云实时个人单聊通讯内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/qq_41920747/article/details/110943429 。

最后此篇关于Vue在H5 项目中使用融云进行实时个人单聊通讯的文章就讲到这里了,如果你想了解更多关于Vue在H5 项目中使用融云进行实时个人单聊通讯的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 一分钟学会JavaScript中的try-catch
文章推荐： Python pandas.DataFrame调整列顺序及修改index名的方法
文章推荐： PHP实现文件分片上传的实例代码
文章推荐： Linux下远程连接Jupyter+pyspark部署教程
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com