融云单聊

最新推荐文章于 2022-04-20 15:22:24 发布
最新推荐文章于 2022-04-20 15:22:24 发布
阅读量209 收藏 1
点赞数 2
文章标签： 前端 后端 javascript ViewUI
原文链接：http://www.cnblogs.com/yuanshen/p/11579700.html
版权

最近的项目，涉及到了融云即时通讯，于是我简单的了解了一下。（感觉在朝前端的路上越走越远啊。。。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
</head>
<body>
    <div class="box" style="background: skyblue; width: 300px; height: 500px; position: relative;">
        <div style="position: absolute; top: 70px; left: 40px">
            <input id="chatbox" type="text" placeholder="请输入聊天内容">
            <button onclick="sendMessage()">发送</button>
        </div>
        <div id="sendnews" style="width: 200px; height: 50px; background: #f0f0f0; position: absolute; top: 200px; left: 50px">我发出的消息</div>
        <div id="getnews" style="width: 200px; height: 50px; background: #f0f0f0; position: absolute; top: 350px; left: 50px">我收到的消息</div>
    </div>
</body>
</html>

<!-- <script src="http://cdn.ronghub.com/RongIMLib-2.2.4.min.js"></script> -->
<script src="http://cdn.ronghub.com/RongIMLib-2.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    //appkey
    RongIMLib.RongIMClient.init("k51hidwqk4ynb");
    
    //本人的token
    var token = "TqDBcSJS18nxZOO1JYNRoq/hIhHK6N7jzohMJvkXG7l6QJVVjrFMC+AvrgeVhSae2OUQmgnlag4Tovqxi/pqHQ==";

    // 连接状态监听器
    RongIMClient.setConnectionStatusListener({
        onChanged: function (status) {
            // 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.DOMAIN_INCORRECT:
                    console.log('域名不正确');
                    break;
                case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
                    console.log('网络不可用');
                    break;
            }
        }
    });

     // 消息监听器
    RongIMClient.setOnReceiveMessageListener({
        // 接收到的消息
        onReceived: function (message) {
            // 判断消息类型
            switch(message.messageType){
                case RongIMClient.MessageType.TextMessage:
                    // message.content.content => 文字内容
                    //打印接收到的消息
                    $('#getnews').text(message.content.content);
                    console.log(message.content.content);
                    //message接受到的消息（包含发送的信息，也可以在extra中添加要传递的值，如：时间等）
                    break;
                case RongIMClient.MessageType.VoiceMessage:
                    // 对声音进行预加载                
                    // message.content.content => 格式为 AMR 的音频 base64
                    break;
                case RongIMClient.MessageType.ImageMessage:
                   // message.content.content => 图片缩略图 base64。
                   // message.content.imageUri => 原图 URL。
                   break;
                case RongIMClient.MessageType.DiscussionNotificationMessage:
                   // message.content.extension => 讨论组中的人员。
                   break;
                case RongIMClient.MessageType.LocationMessage:
                   // message.content.latiude => 纬度。
                   // message.content.longitude => 经度。
                   // message.content.content => 位置图片 base64。
                   break;
                case RongIMClient.MessageType.RichContentMessage:
                   // message.content.content => 文本消息内容。
                   // message.content.imageUri => 图片 base64。
                   // message.content.url => 原图 URL。
                   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...
            }
        }
    });

    // 连接融云服务器。
    RongIMClient.connect(token, {
        onSuccess: function(userId) {
            console.log("LoginId:"+ userId);
            //userId是申请token时的填写的id，到时候可以封装在下面的extra中传过去
        },
        onTokenIncorrect: function() {
            console.log('token无效');
        },
        onError:function(errorCode){
            var info = '';
            switch (errorCode) {
                case RongIMLib.ErrorCode.TIMEOUT:
                    info = '超时';
                    break;
                case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:
                    info = '不可接受的协议版本';
                    break;
                case RongIMLib.ConnectionState.IDENTIFIER_REJECTED:
                    info = 'appkey不正确';
                    break;
                case RongIMLib.ConnectionState.SERVER_UNAVAILABLE:
                    info = '服务器不可用';
                    break;
            }
            console.log(info);
        }
    });

    //发送消息封装到方法里随时调用
    function sendMessage(){
        //生成聊天内容
        var news = $('#chatbox').val();
        //定义消息类型,文字消息使用 RongIMLib.TextMessage
        var msg = new RongIMLib.TextMessage({content:news,extra:"附加要传递的值"});
        var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊
        var targetId = "2"; // 目标 Id
        RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
            // 发送消息成功
            onSuccess: function (message) {
                  //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                  $('#sendnews').text(message.content.content);
                console.log("发送成功");
            },
            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 + errorCode);
            }
        });
    }
</script>

直接上代码了，大部分都是从官方文档复制粘贴的没啥好说了，我在搞通单聊之后发现，好像聊天页面还要自己设计，奈何本人只是个后端，后面也没深入了解，想到我刚看文档，完全不清楚怎么下手，所以把写好的代码放到博客，希望能帮到跟我一样的朋友吧。

想要看看效果的，可以注册一个融云账号，找到下图指的地方，自己生成两个融云id和token，appkey也记得换成自己的，然后搞两个页面，就能自己跟自己聊天了

 

转载于:https://www.cnblogs.com/yuanshen/p/11579700.html

weixin_30882895
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【融云SDK集成实现单聊Ａpp】
bingdian__2011的博客
12-07 3495
本人菜鸟一枚，自学不才，在Android开发圈子也是摸打滚爬，3，4年，之前没有写博客的习惯，只是自己总结一些，没有分享。当然好多还是参考的大神们分享的东西，去github fork  别人的代码。。话不多说，开干！【1】SDK的集成套路，注册登录SDK官网点击打开链接，下载SDK,看集成文档。【2】特别值得一提的是，融云的SDK,模块化很好，下载SDK时，可以先择需要集成的模块，见下图：IMKi...
融云IM接入记录（1）——单聊
点滴积累
04-18 5447
前言 本篇为开篇，会涉及很多基本的东西，所以篇幅较大，若是觉得行文啰嗦还请各位大佬不要打我。 本篇目的，是从0开始到实现单聊则打住，后续的特定需求会新开特定篇来写。 若是跟着文章走，遇见了坑请看文末的坑总结章节，相信很快你就能成功接入。 去融云开发平台申请key什么的我就不说了，会申请QQ号就会申请这个 有什么问题请直接留言指出，欢迎批评指正。 跑个官方Demo压压惊 不管怎样，接入...
Android接入融云即时通讯SDK，实现单聊和发送自定义消息。
然了个然
04-20 4364
项目中用到了融云IM聊天功能和自定义消息，今天记录一下接入的过程。 先看下效果图~ 打开融云官网：https://www.rongcloud.cn/注册账号登录后进入控制台找到服务管理然后创建自己的应用完成后就可以看到对应的Key。 进入开发者中心下载对应的SDK我这里选择的是手动集成方式，你也可以选择Maven集成。 我这里只保留了即时通讯组件 然后新建一个项目，把下载的SDK导入进来。 在IMKIt build.gradle中把IMLib这个库依赖进去 api pro...
融云实现单聊
02-27
融云实现单聊，只是最简单的实现聊天效果，参考官网开发指南
融云单聊demo
11-01
本demo提供了Android端集成融云即时通讯单聊例子.
融云集成单聊与会话列表
05-15 1562
写在前面，因为公司做的项目需要聊天功能，所以在网上找了下方案后，果断选择了融云，因为免费，有100个测试位。本来没想着写这个文章，无奈融云的文档写的相（fei）当（chang）简（la）单（ji），在系统里建工单问客服问题，回复太慢了，所以记录下来，防止大家继续踩坑。 融云集成步骤 1.注册 去融云官方网站注册，点击官方网址， 2.获取app key 和 app secert 登录成功后可以...
融云单聊最新SDK
05-22
融云单聊最新SDK 融云单聊最新SDK 融云单聊最新SDK 融云单聊最新SDK
融云单聊界面
01-05
Android 融云 连键融云服务器 单聊启动的 和 图标的屏蔽 实现
Android 融云单聊
03-09
是用于安卓系统的，对接融云的聊天功能
融云集成(单聊+会话列表)
W_FOOD的博客
12-27 3006
根据融云官方提供的SDK下载下来,然后根据融云官方提供的文档进行导包操作等,接下来开始咱们代码实现单聊的旅途:在清单文件里加入: <provider android:name="android.support.v4.content.FileProvider" //自己的包名.FileProvider android:autho
融云集成一个聊天室页面(vue版本)
李墨瞳的博客
09-21 7058
  首先，说一下使用情况。因为需求，需要做一个聊天室页面，因为不是专门的点对点聊天，是类似直播，但是是文字直播平台的那种。现在一般的课堂，可能会需要这种。分为2个端，一个是讲师端，一个是用户端。讲师端可能是单独的APP。用户端的页面可能是内嵌到专门的APP，或者是微信公众平台。我这次做的就是一个用户端。讲师端由原生来写，因为需要H5页面能兼容微信还有在手机端都能用。   然后，说明一下，用了vu...
融云IM集成
余生|的博客
12-26 1511
首先到融云官方网站下载融云 SDK。融云 SDK 各部分功能以插件化的形式独立提供，开发者可以根据自己的需要，自由组合下载。各组件的功能如下需要什么功能就导入该功能的组件并与自己的APP进行依赖在融云开发平台创建应用获取AppKey与token值将 PushLib 中的 jar 包 和 pushDaemon -> libs 目录下应用所支持平台的 so 拷贝到您应用的 libs 目录下，另外还需要将
Android集成融云单聊
c_bulrush的博客
12-26 983
第一步. 点击此处下载第二步 新建自己的Demo,导入IMKit和IMLib两个Module,添加依赖第三步.初始化,并在清单文件中进行配置public class App extends Application { @Override public void onCreate() { super.onCreate(); //初始化
Android--使用融云SDK开发即时聊天（二）----设置单聊
小麟的博客
03-16 7491
上一次我们做了一个连接测试，测试显示连接成功，这次我们做一个单聊测试。 一、新建一个javabean，命名为Friend 有三个String字段，分别为userId,name,portraitUri; 分别生成其getter和setter还有构造方法（AS快捷键为ALT+Insert）。   二、重新配置MainActivity 因为我们的这次目的是开发一个单聊模式，实现2个用
Vue 在H5 项目中使用融云进行实时个人单聊通讯
yuangegena_Blog
12-09 1384
Vue 在H5 项目中使用融云进行实时个人单聊通讯 由于其他博客的相关融云的Vue项目开发不是特别完善，此项目加入了自己的一些思考，可供大家有一点方向。 1.融云官网注册账号，获取----。。。## Vue 在H5 项目中使用融云进行实时通讯 由于其他博客的相关融云的Vue项目开发不是特别完善，此项目加入了自己的一些思考，可供大家有一点方向。 1.融云官网注册账号，创建应用并获取必要的初始化参数 appkey 2.融云web开发文档 本人使用3.x 版本 3.vue项目引入cdn(index.html)
Android中如何集成融云SDK单聊
移动开发Android
08-23 6108
1. 首先依赖下载的工程，例如——Rong_Cloud_Android_IMKit_SDK_v2_7_0_dev，依赖工程中需要修改的是申请下来的 RONG_CLOUD_APP_KEY。2.在应用程序主入口加入一下代码package com.bwie.test.rongyu; import android.app.ActivityManager; import android.app.Appl
Android&融云单聊的实现
裴泓博
09-19 4320
1)首先下载融云即时通讯的SDK 导入融云的通讯界面库，以及通讯功能库 IMKit，IMLib 2)在build.gradle中的dependencies中添加 compile project(':IMKit') compile project(':IMLib') 然后syon now，就Ok   在mainfest中添加 aut
android.intent.action.view 融云,Android集成融云单聊
weixin_42361623的博客
05-28 342
第一步.点击此处下载 第二步新建自己的Demo,导入IMKit和IMLib两个Module,添加依赖 第三步.初始化,并在清单文件中进行配置public class App extends Application {@Overridepublic void onCreate() {super.onCreate();//初始化RongIM.init(this);//token值String toke...
关于融云的单聊通讯那点事
dragonandsky的博客
11-08 2097
这里写自定义目录标题关于融云的单聊通讯那点事用了两天两夜做出的是最简单的事how (怎么实现)1.合理[借助融云官方文档](https://docs.rongcloud.cn/v4/views/im/ui/guide/private/intro/private.html)2.初始化相关信息在activity中调用application实现初始化实现初始化后我们就可以实现相关函数的调用怎么套用？实现融云提供给的消息接收与发送功能以上就是我个人对整个项目的开发（谈不上项目，比较low）但是还是实现了基本的通讯
uniapp 融云 聊天
最新发布
07-27
4. 根据您的需求，在合适的页面中创建聊天窗口，可以是单聊、群聊或者其他类型的会话。 5. 在页面中使用融云提供的 API，实现发送消息、接收消息、显示聊天记录等功能。 这只是一个简单的流程概述，具体的实现细节...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值