web 直播&即時聊天------阿里雲、融雲


隨着直播越來越火,所在公司也打算制作自己的直播,所以去了解了這方面,使用后發現還是有些問題需要記錄的。

經過分析,制作直播應該是分為兩塊來做,即直播與實時評論。這里先去制作實時評論,等直播ok后,也會將相應心得寫上來。

我們直播采用了阿里雲,評論采用了融雲

 

其實融雲的api還是比較清晰的,只不過web demo只有ng的,個人對ng不是很熟悉,所以只能自己慢慢摸索。

 

1. 注冊帳號,根據提示創建應用,獲取appkey

2. 引入sdk(請去官網選擇最新版本)

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

3. 初始化sdk

RongIMClient.init("xxx"); //"xxx"代表你的appkey

4. 設置監聽器

 // 設置連接監聽狀態 ( 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.VoiceMessage:
                // 對聲音進行預加載                
                // message.content.content 格式為 AMR 格式的 base64 碼
                RongIMLib.RongIMVoice.preLoaded(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...
        }
    }
});

顧名思義,狀態連接監聽器是用來檢測當前用戶的狀態的,消息監聽器也就是我們接受消息的。

5. 獲取token(在我的應用中自行獲取即可)

6. 連接服務器

 

var token = "xxx"; //"xxx"代表你自己的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);
            }
      });

7. 發送消息

 // 定義消息類型,文字消息使用 RongIMLib.TextMessage
 var msg = new RongIMLib.TextMessage({content:"hello",extra:"附加信息"});
 //或者使用RongIMLib.TextMessage.obtain 方法.具體使用請參見文檔
 //var msg = RongIMLib.TextMessage.obtain("hello");
 var conversationtype = RongIMLib.ConversationType.CHATROOM; // 聊天室
 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);
                }
            }
        );
因為是直播所以選擇了聊天室,大家根據自己的需求更改即可

RongIMLib.ConversationType.CHATROOM; ==> 選擇聊天室
targetId = "xxx"; ==> 如果是聊天室就填寫創建聊天室的id,私聊就是目標用戶的id,以此類推

8. 進入聊天室
 
         

  var chatRoomId = "xxx"; // 聊天室 Id。
  var count = 1;// 拉取最近聊天最多 50 條

RongIMClient.getInstance().joinChatRoom(chatRoomId, count, {
  onSuccess: function() {
       // 加入聊天室成功。
       console.log('加入聊天室成功。');
  },
  onError: function(error) {
    // 加入聊天室失敗
  }
});

當沒有聊天室的時候,此方法會創建聊天室

9.其他

基本上的功能就是這樣了,像其他的功能(同步回話列表,表情等)大家去官網查看,這里就不講解了...

如若您發現有任何問題,歡迎交流指正...

 

  西北有高樓,上與浮雲齊

 

下一篇: web 直播&即時聊天------阿里雲、融雲(二)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM