web 直播&即時聊天------阿裏雲、融雲
阿新 • • 發佈：2017-05-18
rect pre 也會 image 連接服務器 發送 .get reload user
隨著直播越來越火，所在公司也打算制作自己的直播，所以去了解了這方面，使用後發現還是有些問題需要記錄的。
經過分析，制作直播應該是分為兩塊來做，即直播與實時評論。這裏先去制作實時評論，等直播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 直播&即時聊天------阿裏雲、融雲