一、效果图
二、主要功能
1. 创建自己的语音直播间
2. 查询所有直播间列表
3.加入房间
4.申请上位
5.麦克风控制
6.声音控制
7.赠送礼物(特效 + 批量移动动画)
8.退出房间
三、原理
1.uniapp 实现客户端H5、安卓、苹果
2.webRTC实现语音直播间(具体原理网上有很多文章我就不讲了,贴个图)
3.使用node.js搭建信令服务器(我用的是socket)
4.礼物及特效使用svga
四、踩坑及解决方案
1. 客户端(这里重点在于app端)一定要在视图层创建webRTC!!!不要在逻辑层创建!!!因为会要求使用安全连接,也就是说要用到SSL证书,这个很多人都没有,有的话当我没说。如何在视图层创建RTC呢?在uniapp中使用renderjs!
2. (这里重点也在于app)客户端创建和信令服务器进行通信的socket时app端在页面跳转后socket状态消失无法响应信令服务器消息。解决方案是:一定不要在客户端视图层创建socket!!!也就是说socket不要创建在renderjs里,要在逻辑层用uniapp提供的api进行创建,然后使用uniapp文档中说明的逻辑层和视图层的通信方式进行通信,这样虽然在开发中有些繁琐,但是能解决问题。
onShow(){
// socketTask是使用uniapp提供的uni.connectSocket创建出来的socket实例
// watchSocketMessage代理了socket实例的onMessage方法
socketTask.watchSocketMessage = (data) => {
this.watchSocketMessage(data)
}
}
methed:{
watchSocketMessage(){
// 这里是收到信令服务器socket后的逻辑
}
}
// 这里是逻辑层和renderjs通信的方式,通过监听状态的改变从而触发renderjs的对应的方法
// 注意在页面刚加载完成后这些方法会被默认触发一边,所以要在这些放方法做好判断return出去
3.连接顺序的问题,一定是:新进入的用户通过信令服务器给房间已有用户发送Offer,用户接收到Offer回应Answer,记住这个逻辑!
4.因为webRTC是运行在视图层的(也就是浏览器),而苹果默认浏览器是Safari,Safari浏览器默认机制是在用户主动和页面进行交互后,自动播放声音才会生效(也就是才有声音),所以在IOS端所有用户进入直播房间后默认都是静音的,用户主动开启音频才会受到直播间的声音(这是目前我发现的最好的解决办法)
五、核心代码(只有关键步骤)
1. 客户端socket
const socketTask = {
socket: null,
connect: () => {
getApp().globalData.socket = uni.connectSocket({
url:'ws://180.76.158.110:9000/socket/websocketv',
// url: 'ws://192.168.3.254:9000/socket/websocketv',
complete: (e) => {
console.log(e);
},
});
getApp().globalData.socket.onOpen((data) => {
console.log("111111111");
getApp().globalData.socket.send({
data: JSON.stringify({
type: "newConnect",
userId: uni.getStorageSync('user').id,
})
})
})
getApp().globalData.socket.onClose((res) => {
console.log("连接关闭", res);
getApp().globalData.socket = null;
setTimeout(() => {
socketTask.connect()
}, 3000)
})
getApp().globalData.socket.onError((err) => {
console.log("连接异常", err);
getApp().globalData.socket = null;
setTimeout(() => {
socketTask.connect()
}, 1)
})
getApp().globalData.socket.onMessage((data) => {
socketTask.watchSocketMessage(data)
})
},
start: function() {
this.connect()
},
watchSocketMessage: function() {
// 这里实现自己的业务逻辑
}
}
export default socketTask
2.客户端房间列表页
async onShow() {
if (!getApp().globalData.socket) {
await socketTask.start();
}
socketTask.watchSocketMessage = (data) => {
console.log("===========收到新消息==========",data);
this.watchSocketMessages(data)
}
},
methed:{
// 监听socket消息
watchSocketMessages(res) {
try {
const socket_msg = JSON.parse(res.data);
console.log("收到新消息", socket_msg);
switch (socket_msg.type) {
case "homeList":
if (socket_msg.data.length == 0) {
this.homeList = [];
uni.showToast({
title: "暂无房间,快去创建一个吧",
icon: "none"
})
} else {
this.homeList = socket_msg.data;
}
break
case "leave":
getApp().globalData.socket.send({
data: JSON.stringify({
type: "homeList",
userId: this.userInfo.userId,
})
})
break
case "createSuccess":
uni.redirectTo({
url: `broadRoom?rid=${socket_msg.data.groupId}&&userId=${this.userInfo.id}&&groupInfo=${JSON.stringify(socket_msg.data)}`
})
break
}
} catch (e) {
}
},
}
3.客户端直播间
逻辑层:
async onShow() {
const that = this;
if (!getApp().globalData.socket) {
console.log("socket不存在,重新连接");
await socketTask.start();
}
socketTask.watchSocketMessage = (data) => {
this.watchSocketMessage(data)
}
// 编译平台信息
uni.getSystemInfo({
success(res) {
console.log("当前平台是", res);
if (res.osName == 'ios') {
console.log("我是ios", res)
that.isMedia = 'ios';
} else {
console.log("我是安卓", res)
that.isMedia = 'android';
}
}
})
}
methed:{
async watchSocketMessage(date) {
const data = JSON.parse(date.data);
switch (data.type) {
case "join":
console.log("join成功", data);
this.newMessaGes(data);
this.setUserList(data.admin);
this.updataNewMic(data)
// 找出自己以外的其他用户
const arr = this.userList.filter((item, index) => {
return item.userId !== this.userId
})
console.log("找出自己以外的其他用户", arr)
// 通知renderjs层创建RTC
this.RTCJoin = arr;
this.updataIsShow()
break
case "newjoin":
this.newMessaGes(data);
this.setUserList(data.admin);
break
case "offer":
//通知renderjs层有新人进入创建answer
console.log("收到offer", data)
this.RTCOffier = data;
break
case "answer":
// 找到对应peer,设置answer
console.log("收到offer", data)
this.RTCAnswer = data;
break
case "candidate":
// 找到对应的peer,将candidate添加进去
this.RTCCandidate = data;
break
case "leave":
if (data.data == "房主已解散房间") {
this.closesAdmin()
} else {
const datas = {
data,
}
this.newMessaGes(datas)
this.setUserList(data.admin);
this.updataNewMic(data);
}
break
case "apply-admin":
this.updataIsApply(data.data)
break
case "newMic":
this.updataNewMic(data)
break
case "uplMicro":
this.updataNewMic(data)
break
case "newMessage":
this.newMess = data;
break
}
},
}
视图层:
4.信令服务器
略(就是socket,里面写swich,不会私信,小额收费)