基於融雲的IM通信

時間 2019-12-11

標籤基於雲的通信简体版

原文原文鏈接

1、業務場景

項目的發展須要吧原來本身的寫的通信換爲第三方的，多家對比後選擇了融雲IM通信，項目要實現的功能這要是單聊、羣聊、聊天室、發送的內容爲文字、圖片、文件、語音通話與視頻通話。聽起來挺複雜的咱們一塊兒來實現一下，先從一個demo開始，文章會一直維護下去，知道項目本期項目開發結束。html

2、進行配置

2.1，註冊開發者賬號jquery

2.2，引入sdkgit

<script src="http(s)://cdn.ronghub.com/RongIMLib-2.3.0.min.js"></script>

3、demo代碼，實現收發消息

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
        <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
        <script src="http(s)://cdn.ronghub.com/RongIMLib-2.3.0.min.js"></script>
        <style>
            .content_box {
                width: 212px;
                min-height: 50px;
                border: 1px solid #ff0000;
            }
        </style>
    </head>

    <body>
        <div class="content_box"></div>
        <input type="text" name="inputBox" id="inputBox" value="" />
        <button class="postMessage">發消息</button>
        <script>
            $(".postMessage").click(function() {
                getMessage()
            })

            RongIMClient.init("c9kqb3rdcomoj"); //這是初始化，須要填參數就是你的APPKEY。這個不難理解。
            var token = "WsOfFQOvy/v3nZ80UpjcOO9l67FGL9fs1E72VNcKY11y1jg3lz2Y6w8Rm/HZ6EyrhVc9pd7SHAsQspRYfSvwo21Y8SDjLVSLxh4/gZ9YyFI=";
            // 鏈接融雲服務器。
            RongIMClient.connect(token, {
                onSuccess: function(userId) {
                    console.log("Login successfully." + userId);
                    //userId是申請token時的填寫的id，到時候能夠封裝在下面的extra中傳過去
                },
                onTokenIncorrect: function() {
                    console.log('token無效');
                },
                onError: function(errorCode) {
                    var info = '';
                    switch(errorCode) {
                        case RongIMLib.ErrorCode.TIMEOUT:
                            info = '超時';
                            //連接超時進行從新的連接start
                            var callback = {
                                onSuccess: function(userId) {
                                    console.log("Reconnect successfully." + userId);
                                },
                                onTokenIncorrect: function() {
                                    console.log('token無效');
                                },
                                onError: function(errorCode) {
                                    console.log(errorcode);
                                }
                            };
                            var config = {
                                // 默認 false, true 啓用自動重連，啓用則爲必選參數
                                auto: true,
                                // 重試頻率 [100, 1000, 3000, 6000, 10000, 18000] 單位爲毫秒，可選
                                url: 'cdn.ronghub.com/RongIMLib-2.2.6.min.js',
                                // 網絡嗅探地址 [http(s)://]cdn.ronghub.com/RongIMLib-2.2.6.min.js 可選
                                rate: [100, 1000, 3000, 6000, 10000]
                            };
                            RongIMClient.reconnect(callback, config);
                            //連接超時進行從新連接end
                            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);
                }
            });
            // 設置鏈接監聽狀態 （ 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.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 => 消息內容
                            console.log(message.content.content);
                            $(".content_box").text(message.content.content)
                            break;
                        case RongIMClient.MessageType.VoiceMessage:
                            // 對聲音進行預加載                
                            // message.content.content 格式爲 AMR 格式的 base64 碼
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.ImageMessage:
                            // message.content.content => 圖片縮略圖 base64。
                            // message.content.imageUri => 原圖 URL。
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.DiscussionNotificationMessage:
                            // message.content.extension => 討論組中的人員。
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.LocationMessage:
                            // message.content.latiude => 緯度。
                            // message.content.longitude => 經度。
                            // message.content.content => 位置圖片 base64。
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.RichContentMessage:
                            // message.content.content => 文本消息內容。
                            // message.content.imageUri => 圖片 base64。
                            // message.content.url => 原圖 URL。
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.InformationNotificationMessage:
                            // do something...
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.ContactNotificationMessage:
                            // do something...
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.ProfileNotificationMessage:
                            // do something...
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.CommandNotificationMessage:
                            // do something...
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.CommandMessage:
                            // do something...
                            console.log(message.content.content);
                            break;
                        case RongIMClient.MessageType.UnknownMessage:
                            console.log(message.content.content);
                            // do something...
                            break;
                        default:
                            console.log(message.content.content);
                            // do something...
                    }
                }
            });

            function getMessage() {

                //生成聊天內容
                $('.content_box').append();
                //在頁面追加你要生成的內容

                // 定義消息類型,文字消息使用 RongIMLib.TextMessage
                var msg = new RongIMLib.TextMessage({
                    content: $("#inputBox").val(),
                    extra: "附加要傳遞的值"
                });

                var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
                var targetId = "3045462476240907"; // 目標 Id

                RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    // 發送消息成功
                    onSuccess: function(message) {
                        console.log(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);
                    }
                });
            }
        </script>
    </body>

</html>

4、發送圖片、文件消息

4.1發送圖片
能夠經過發送文字的方法發送，圖片的地址等信息寫在extra裏邊，直接圖片保存到本身的服務器。
經過融雲發送圖片的方法，與發送文字相似，不過有限制，100kb如下，僅支持jpg格式
4.2發送文件
文件與圖片同理web

5、參考連接

http://www.rongcloud.cn/docs/...
http://www.rongcloud.cn/docs/...api

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。