融云聊天系统的应用

关注

原创最新推荐文章于 2026-04-14 09:16:20 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

融云IM聊天系统接口调用融云IM聊天系统接口调用代码调用代码 /** * 融云聊天获取数据 * * @param $url api地址 * @param $postData 传递数据 */ function getRongClound($url = "", $postData = "") { // 参数为空返回状态 if(empty($url) || empty($postData)) r... 阅读详情

因为产品需求，需要有聊天功能，客服功能。用的是融云的，他把什么方法都集成好了，用起来很方便。并且是免费的。但是第一次接触，并不是那么顺利，并且在网上搜不到相关核心资料，只能硬着头皮看文档，实在没办法就去融云提交工单。深知做前端第一次接触融云不不易，所以我在这梳理一下融云的相关方法。方便和我一样找不着头绪的前端使用。
1.聊天室的样式（包括消息的气泡）是你自己定义的。融云不提供样式的选择。这样的好处是，方便使用者创建属于自己的聊天样式。这么解释是因为我一开始以为样式不用自己写。
进入正题：
1.引入融云相关ＪＳ文档，这个不难理解。我建议一定要引最新版本。

        <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 ......
          }
        });

收录于