融云聊天--web SDK API
来源:互联网 发布:python的turtle库 编辑:程序博客网 时间:2024/05/21 13:43
因为产品需求,需要有聊天功能,客服功能。用的是融云的,他把什么方法都集成好了,用起来很方便。并且是免费的。但是第一次接触,并不是那么顺利,并且在网上搜不到相关核心资料,只能硬着头皮看文档,实在没办法就去融云提交工单。深知做前端第一次接触融云不不易,所以我在这梳理一下融云的相关方法。方便和我一样找不着头绪的前端使用。
1.聊天室的样式(包括消息的气泡)是你自己定义的。融云不提供样式的选择。这样的好处是,方便使用者创建属于自己的聊天样式。这么解释是因为我一开始以为样式不用自己写。
进入正题:
1.引入融云相关JS文档,这个不难理解。我建议一定要引最新版本。
<scriptsrc="http://res.websdk.rongcloud.cn/RongIMClient.emo ji-0.9.2.min.js"></script>
2.在初次加载融云中我们所要做的事情:
RongIMClient.init(APPKEY)//这是初始化,需要填参数就是你的APPKEY。这个不难理解。
3.获取融云的token,这个就不贴代码了,官方文档说的很清楚。
4.现在有了融云的token,就该链接融云的服务器了。
RongIMClient.connect(token, { onSuccess: function(userId) { console.log("Login successfully." + userId); }, onTokenIncorrect: function() { console.log('token无效'); }, onError:function(errorCode){ var info = ''; switch (errorCode) { case RongIMLib.ErrorCode.TIMEOUT: info = '超时'; break; case RongIMLib.ErrorCode.UNKNOWN_ERROR: info = '未知错误'; break; case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION: info = '不可接受的协议版本'; break; case RongIMLib.ErrorCode.IDENTIFIER_REJECTED: info = 'appkey不正确'; break; case RongIMLib.ErrorCode.SERVER_UNAVAILABLE: info = '服务器不可用'; break; } console.log(errorCode); } });
5.设置消息监听器
// 设置连接监听状态 ( status 标识当前连接状态) // 连接状态监听器 RongIMClient.setConnectionStatusListener({ onChanged: function (status) { switch (status) { //链接成功 case RongIMLib.ConnectionStatus.CONNECTED: console.log('链接成功'); break; //正在链接 case RongIMLib.ConnectionStatus.CONNECTING: console.log('正在链接'); break; //重新链接 case RongIMLib.ConnectionStatus.DISCONNECTED: console.log('断开连接'); break; //其他设备登陆 case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT: console.log('其他设备登陆'); break; //网络不可用 case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE: console.log('网络不可用'); break; } }}); // 消息监听器 RongIMClient.setOnReceiveMessageListener({ // 接收到的消息 onReceived: function (message) { // 判断消息类型 switch(message.messageType){ case RongIMClient.MessageType.TextMessage: console.log(message.content.content); //发送的消息内容将会被打印 break; case RongIMClient.MessageType.ImageMessage: // do something... break; case RongIMClient.MessageType.DiscussionNotificationMessage: // do something... break; case RongIMClient.MessageType.LocationMessage: // do something... break; case RongIMClient.MessageType.RichContentMessage: // do something... break; case RongIMClient.MessageType.DiscussionNotificationMessage: // do something... break; case RongIMClient.MessageType.InformationNotificationMessage: // do something... break; case RongIMClient.MessageType.ContactNotificationMessage: // do something... break; case RongIMClient.MessageType.ProfileNotificationMessage: // do something... break; case RongIMClient.MessageType.CommandNotificationMessage: // do something... break; case RongIMClient.MessageType.CommandMessage: // do something... break; case RongIMClient.MessageType.UnknownMessage: // do something... break; default: // 自定义消息 // do something... } }});
6.这样我们跟融云链接的差不多了。接下来我们就可以开始做发送消息。前提是你的聊天室的样式已将写好。
// 定义消息类型,文字消息使用 RongIMLib.TextMessage var msg = new RongIMLib.TextMessage({content:"hello",extra:"附加信息"}); //或者使用RongIMLib.TextMessage.obtain 方法.具体使用请参见文档 //var msg = RongIMLib.TextMessage.obtain("hello"); var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊 var targetId = "xxx"; // 目标 Id RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, { // 发送消息成功 onSuccess: function (message) { //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳 console.log("Send successfully"); }, onError: function (errorCode,message) { var info = ''; switch (errorCode) { case RongIMLib.ErrorCode.TIMEOUT: info = '超时'; break; case RongIMLib.ErrorCode.UNKNOWN_ERROR: info = '未知错误'; break; case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST: info = '在黑名单中,无法向对方发送消息'; break; case RongIMLib.ErrorCode.NOT_IN_DISCUSSION: info = '不在讨论组中'; break; case RongIMLib.ErrorCode.NOT_IN_GROUP: info = '不在群组中'; break; case RongIMLib.ErrorCode.NOT_IN_CHATROOM: info = '不在聊天室中'; break; default : info = x; break; } console.log('发送失败:' + info); } } );
这里需要注意的是,你的聊天类型;是私聊,群组要定义清楚
还有自定义消息:比如在群组聊天中,谁点了一个赞,我要在聊天室中显示:XXX点了一个赞。这时候就用到了自定义消息。
RongIMClient.registerMessageType('messageType','objectName','messageTag','message|[]')自定义消息注册位置: RongIMClient.init("appkey") 之后的第一行位置注册即可。
7.我说一个我遇到的Bug:在前端点赞,视频的点赞数量要+1,原生规定要传一个“fav”(这个fav是自定义的),并且类型是:TextMessage。将之放到extra中,但是我一开始放不进去。后来在控制台打印,他有一个方法:setSxtra()方法。最后就把”fav”给放进去了。
var fav=RongIMClient.TextMessage.obtain("1"); console.log(fav); fav.setExtra('fav'); console.log(fav.getExtra());
8.言归正传,这时候你已经把消息发送,推送给了融云,这时候再去融云消息监测方法那找你推送的消息,并且把它显示在你写好的聊天框中,就OK了。
9.想要获取历史聊天记录怎么办?不怕,有方法:
//getHistoryMessages RongIMClient.getInstance().getHistoryMessages(RongIMLib.ConversationType.PRIVATE, 'targetId', null, 20, { onSuccess: function(list, hasMsg) { // hasMsg为boolean值,如果为true则表示还有剩余历史消息可拉取,为false的话表示没有剩余历史消息可供拉取。 // list 为拉取到的历史消息列表 }, onError: function(error) { // APP未开启消息漫游或处理异常 // throw new ERROR ...... } });
写到这里,我们一个聊天室的基本需求功能已将实现。有一个表情我没有介绍到,等下次更新吧。
最后,希望可以帮到大家。有什么问题可以在下边留言,我看到会回复 ,大家一块成长!
- 融云聊天--web SDK API
- Android--使用融云SDK开发即时聊天(一)----基本环境搭建
- Android--使用融云SDK开发即时聊天(二)----设置单聊
- Android--使用融云SDK开发即时聊天(三)----启用客服
- 视频聊天SDK
- API SDK
- SDK API
- QQ 聊天机器人API
- 只能机器人聊天,API
- 融云聊天集成
- android简单即时聊天sdk
- web版即时聊天
- 怎么实现Web聊天
- web 聊天研究
- 即时聊天web即时通讯
- 聊天web项目
- 图灵机器人聊天api
- 融云即时聊天,IM
- 利用一致性哈希水平拆分MySql单表
- “木桶原理”——吾之见学习法,成长法
- 搜索旋转排序数组
- 常用SQL语句汇总
- ACM基础之四种输入类型及常见实现方法
- 融云聊天--web SDK API
- 构造函数相关内容
- json-c API总结
- 80.Which two statements are true regarding working with dates? (Choose two.)
- 如何将jar包加入到Maven本地仓库
- 5.9
- Socket原理与编程基础
- Linux NFS 服务器和客户端
- Java基于UDP协议的简单通讯实例