直播与云聊天

前端直播功能开发总结

最近公司要开发一个直播功能，自己也是研究了很久，这里总结一下：
 

这里直播还是用的第三方的集成：视频用的是七牛云的集成，聊天用的是融云。

一、直播功能(七牛云)

下面是直播的快速入门文档：

https://developer.qiniu.com/pili/manual/1221/the-console-quick-start

这里前端功能没什么可说的，文档中都写的很详细。

我这里用的前端播放器是videojs,引入相关的js和css，只需要简单的设置就可以：

var myPlayer = videojs('demo-video',{

bigPlayButton : true,

textTrackDisplay : true,

posterImage: true,

errorDisplay : true,

controlBar : true

},()=>{

 

})

二、聊天室功能(融云)

融云这个就比较坑了，文档和demo对于web开发者很不友好，开发的时候很多接口还有问题。下面是心得：

聊天室对于pc端应当有两个界面，用户客户端观看界面和超级管理员的管理界面

 

客户端观看界面：

1 先引入相关文件

融云的服务器相关js：

<script src="http://cdn.ronghub.com/RongIMLib-2.3.2.js"></script>

chatroom  web相关js文件---下载地址：

http://downloads.rongcloud.cn/chatroom-1.0.0.zip

需要用到其中的  message-types.js 文件

2 链接融云服务器

 

这时候就需要后台的小伙伴协助，通过server 获取  token,详见 https://www.rongcloud.cn/docs/web.html#get_token

以及在融云上注册得到的 appkey，如下：

appInfo:{

appKey : "8tnym1br624m7",

token : "ZThhLI1Xa1BX5EMREAdArWSH6ouuI8NT/fNmMkzF+4IOKIoFvbsi6JnH8QmnSltLkCcsK8vOgKl3IZgfbxFiWg=="

},

通过此次进入的直播间的 房间号或者id  请求后台接口获得该融云聊天室的信息：

chatRoomInfo:{

"chatRoomId" : "chartroom-008",

"count" : 0

},

 

然后开始链接融云服务器

//首先需要初始化 init

RongIMLib.RongIMClient.init(appInfo.appKey);

 

//设置监听

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) {

console.log(message)

　　//这里可以根据接受到messageType。来判断展现方式或者进行相关处理　　

}

});

//链接及重新链接服务器

RongIMClient.connect(this.appInfo.token, {

onSuccess: function(userId) {

console.log("Connect successfully." + userId);

},

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(errorCode);

}

});

 

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

3.消息处理

通常在监听消息这步可以接受到message，就算成功了

一般的message通常是以下格式

{

content: 

　　{

　　messageName: "TextMessage", 

　　content: "123",

　　extra: "",

　　 user: {

　　　　"id" : “”

　　　　"name" :“”

　　　　"portrait" : “”

　　}

}

conversationType: 4

extra: undefined

isLocalMessage: undefined

messageDirection: 2

messageId: "4_32560"

messageType: "TextMessage"

messageUId: "B70T-8S90-IN8G-01JT"

objectName: "RC:TxtMsg"

offLineMessage: false

receiptResponse: undefined

receivedStatus: 1

receivedTime: 1542016057921

senderUserId: "391"

sentStatus: undefined

sentTime: 1542016058498

targetId: "41"

}

这里一般要用到content 和 messageType两个字段
 messagetype有种不同的分类，这里可以根据 结果的不同进行处理

 

超级管理员的控制界面

这里超级管理员的控制界面前面跟客户端基本一样，在操作这里多了开播通知，封禁，踢人等权限：

 

融云的通知消息类型：

 

这里我们用 chatroomStart 作为例子：

var time=1232132133   //时间戳，必填的字段，表示开播时间

var chatroomMessages = RongMessageTypes.chatroom;

var im = RongIMClient.getInstance();

im.registerMessageTypes(chatroomMessages);

var user= {

　　　　"id" : “”

　　　　"name" :“”

　　　　"portrait" : “”}

var ChatroomStart = RongIMClient.RegisterMessage.ChatroomStart;//chartRoomStart可根据发送消息类型的不同更换，下面的实例化也是一样

var msg = new ChatroomStart({

time:time,

extra:JSON.stringify(user)//这里我们在extra中以字符串的形式储存了用户信息

});

var chatroomType = RongIMLib.ConversationType.CHATROOM;

var chatroomId = chatRoomInfo.chatRoomId;

im.sendMessage(chatroomType, chatroomId, msg, {

onSuccess: function(message) {

console.log(message);

console.log("直播开始")

//自定义处理

},

onError: function(error) {

console.log(error);

}

});

 可以参考文档： https://www.rongcloud.cn/docs/messages/chatroom/messages.html