<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/indexLi.css">
<link rel="stylesheet" href="../css/layer.css">
<link rel="stylesheet" href="css/room.css">
<link rel="stylesheet" href="../css/idangerous.swiper.css">
<link rel="stylesheet" href="../css/scrollBar.css">
<title>直播间</title>
</head>
<body style="background: #F5F5F5;color: #ffffff;">
<div class="header">
<div class="content">
<a href=""><img class="header-logo" src="images/header-logo.png" alt=""></a>
<nav class="nav">
<ul class="nav-ul">
<li class="nav-li">
<a href="../index.html">热门</a>
</li>
<li class="nav-li pay">
<a href="javascript:;">充值</a>
</li>
<li class="nav-li">
<a href="../view/public.html">公众号</a>
</li>
<li class="nav-li">
<a href="../view/us.html">联系我们</a>
</li>
</ul>
</nav>
<!-- 未登录 -->
<div class="login-no">
<div class="login">
<a class="login-btn" href="javascript:;">登录</a>
</div>
<div class="register">
<a href="javascript:;">注册</a>
</div>
<div class="line"></div>
</div>
<!-- 已登录 -->
<div class="lonin-yes">
<img class="header-avatar" src="images/avatar.png" alt="">
<p class="header-name">蒲公英christine</p>
<!-- 个人信息弹窗 -->
<div class="info-pop-box">
<div class="info-pop">
<img class="info-avatar" src="images/avatar.png" alt="">
<p class="login-out">退出</p>
<p class="info-name">蒲公英christine</p>
<p class="info-uid">Yabo ID:2569888</p>
<p class="info-score">507200/<span style="color: #ff6600">1214400</span></p>
<div class="progress-box">
<div class="propress"></div>
<img class="level level1" src="https://zhibocdn.lvdou66.com/comm/level/21.png" alt="">
<img class="level level2" src="https://zhibocdn.lvdou66.com/comm/level/22.png" alt="">
</div>
<div class="treasure-box">
<div class="treasure">
<p class="num">77</p>
<p class="txt">橙钻</p>
</div>
<div class="treasure">
<p class="num">0</p>
<p class="txt">银币</p>
</div>
</div>
<div class="personal">
<a class="per-center" href="">个人中心<img src="images/right-jt.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-l">
<div class="box-l-nick">
<!--<h2><img src="images/caveat.png" alt=""> 举报</h2>-->
<h2 style="height: 40px;"></h2>
<div class="face-box">
<div style="height: 90px;">
<img class="faceImg" src="" alt="">
</div>
<img class="rich-level" src="" alt="">
<p class="name"></p>
<p class="id">Yabo ID :</p>
<p class="city"><img src="images/this.png" alt=""> <span class="opc">深圳</span></p>
<button class="attention"><span style="font-weight: 700">+</span>关注</button>
</div>
</div>
<ul class="box-l-ul">
<li class="li-act"><img class="li-img1" src="images/man-act.png" alt=""><i style="display: none">1</i> <span class="man-text">--</span></li>
<li><i style="display: none">2</i><img class="li-img2" src="images/rich.png" alt=""> <span class="rich-text">--</span></li>
<li><i style="display: none">3</i><img class="li-img3" src="images/hot.png" alt=""> <span class="hot-text">--</span></li>
</ul>
<ul class="ul-list">
<!--<li>-->
<!--<span class="room-li1">1</span>-->
<!--<span class="room-li2"><img src="../images/tu.jpg" alt=""></span>-->
<!--<span class="room-li3">丫播达人秀<span class="level">86</span></span>-->
<!--</li>-->
</ul>
<div style="display: none" class="rich-list">
<ul class="rich-select">
<li class="rich-select-act">日榜<div class="triangle_border_up"><span></span><div class="shu"></div></div><span class="rich-rule">|</span><i style="display: none">1</i></li>
<li>周榜<div class="triangle_border_up"><span></span><div class="shu"></div></div><span class="rich-rule">|</span><i style="display: none">2</i></li>
<li>总榜<div class="triangle_border_up"><span></span><div class="shu"></div></div><i style="display: none">3</i></li>
</ul>
<ul class="ul-list2">
<!--<li>-->
<!--<span class="room-li1">1</span>-->
<!--<span class="room-li2"><img src="../images/tu.jpg" alt=""></span>-->
<!--<span class="room-li3">丫播达人秀<span class="level">86</span></span>-->
<!--<span class="room-li4">256123</span>-->
<!--</li>-->
</ul>
</div>
<ul style="display: none" class="hot-list">
<!--<li>-->
<!--<img class="hot-face" src="images/avatar.png" alt="">-->
<!--<p class="hot-name">wins小熊维尼</p>-->
<!--<p class="hot-more"><span class="hot-mun">52</span><img src="images/hot.png" alt=""> 2569888</p>-->
<!--</li>-->
</ul>
</div>
<div class="box-c ">
<!--<div class="look-end"></div>-->
<!--<div class="box-c-top">-->
<!--<p class="box-c-top-p1">本次直播已结束</p>-->
<!--<p class="box-c-top-p2"> <span class="box-c-top-more">666</span> 真人围观</p>-->
<!--</div>-->
<!--<div class="box-c-bottom">-->
<!--<p>猜你喜欢的主播</p>-->
<!--<ul class="box-c-ul">-->
<!--<li>-->
<!--<img class="box-c-img" src="images/faceid.jpg" alt="">-->
<!--<div class="online-num-box">-->
<!--<img class="online-icon" src="../images/animate-img/online-icon10.png" alt="">-->
<!--<span class="online-num">3549</span>-->
<!--</div>-->
<!--<p class="box-c-li-name">尼莫是条鱼</p>-->
<!--</li>-->
<!--<li>-->
<!--<img class="box-c-img" src="images/faceid.jpg" alt="">-->
<!--<div class="online-num-box">-->
<!--<img class="online-icon" src="../images/animate-img/online-icon10.png" alt="">-->
<!--<span class="online-num">3549</span>-->
<!--</div>-->
<!--<p class="box-c-li-name">尼莫是条鱼</p>-->
<!--</li>-->
<!--<li>-->
<!--<img class="box-c-img" src="images/faceid.jpg" alt="">-->
<!--<div class="online-num-box">-->
<!--<img class="online-icon" src="../images/animate-img/online-icon10.png" alt="">-->
<!--<span class="online-num">3549</span>-->
<!--</div>-->
<!--<p class="box-c-li-name">尼莫是条鱼</p>-->
<!--</li>-->
<!--<li>-->
<!--<img class="box-c-img" src="images/faceid.jpg" alt="">-->
<!--<div class="online-num-box">-->
<!--<img class="online-icon" src="../images/animate-img/online-icon10.png" alt="">-->
<!--<span class="online-num">3549</span>-->
<!--</div>-->
<!--<p class="box-c-li-name">尼莫是条鱼</p>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
</div>
<div class="box-r">
<div class="box-r-top">
<div class="gift-show-box">
<!--<p class="gift-show-content">-->
<!--<img class="gift-show-img" src="https://zhibocdn.lvdou66.com/comm/user/img/21372125/34f2610a28f146c5aa53ed5ed0e74fd1.jpg?x-oss-process=image/resize,w_100" alt="">-->
<!--<span class="gift-show-name">岳飞</span>-->
<!--<span class="gift-show-gift">送 新秀之星</span>-->
<!--<img class="gift-show-rich" src="https://zhibocdn.lvdou66.com/comm/gift/19bb97a48c9e4c63832bcd93b97e8fc0.png?x-oss-process=image/resize,w_150" alt="">-->
<!--<span class="gift-show-x">X</span>-->
<!--<span class="gift-show-num">88</span>-->
<!--</p>-->
</div>
<p class="msg-top">我们提倡绿色直播，封面和直播内容含吸烟，低俗，引诱暴露等将被查封停号</p>
<ul class="msg-ul">
</ul>
</div>
<div class="gift-box">
<div class="gift-top">
<input type="text" maxlength="22" class="msg-ipt" placeholder="与主播互动吧...">
<button class="msg-btn">发送</button>
</div>
<div class="gift-content">
<div class="swiper-container">
<div class="swiper-wrapper">
<!--<div class="swiper-slide">-->
<!--<div class="gift-box-li">-->
<!--<img src="https://zhibocdn.lvdou66.com/comm/gift/2b91e29f1711491084c72b887dffe525.gif" alt="">-->
<!--<p><img src="images/Ag.png" alt=""> 88</p>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<div class="pagination"></div>
</div>
<div class="gift-bottom">
<img src="images/Ag.png" alt=""> <span class="gift-Ag">--</span> <img src="images/zuan.png" alt=""> <span class="gift-lich">--</span> <span class="reg">充值></span><button class="gift-send">赠送</button>
</div>
</div>
</div>
</div>
</body>
<script src="../lib/jquery-3.1.1.min.js"></script>
<script src="../lib/idangerous.swiper.min.js"></script>
<script src="../layer-v3.1.0/layer/layer.js"></script>
<script src="../lib/jquery.cookie.js"></script>
<script src="../lib/flv.min.js"></script>
<script src="../lib/scrollBar.js"></script>
<script src="../js/com.js"></script>
<script>
$ip = "http://test.api.lvdou66.com/";
cdn = "https://zhibocdn.lvdou66.com/comm";
var bbb=location.href;
var data= url_get_params(bbb)
sessionStorage.roomID=data.roomID;
function url_get_params(url_path){
var url = url_path;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(url.indexOf("?")+1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
//获取硬币和钻石数量
//帧动画操控
var iconIndex = 2;
setInterval(function () {
for(var i=0;i<18;i++){
$(".gift-show-content").removeClass("gift-show-content"+i);
}
$(".gift-show-content").addClass("gift-show-content"+iconIndex)
if (iconIndex == 17) {
iconIndex = 1;
}else {
iconIndex++;
}
},58);
userRich()
function userRich(){
if($.cookie("ukk")!=undefined){
$.ajax({
url:$ip+"weblive/myinfo.html",
data:{
uid:$.cookie("ukk"),
token: $.cookie("tbb")
},
type:"post",
error: function (msg) {
console.log('请求出错');
$.cookie("ukk", null, {
path: "/",
expires: -1
});
$.cookie("tbb", null, {
path: "/",
expires: -1
});
layer.msg("登录失效，请重新登录。")
},
success: function (msg) {
var data=JSON.parse(msg);
// console.log(data)
if(data.code==1){
$(".gift-Ag").text(data.coin);
$(".gift-lich").text(data.diamond);
}
}
})
}else{
}
}
//拉流
$.ajax({
url: $ip + "weblive/room/enter.html",
data: {
uid: 21372129,
roomid: sessionStorage.roomID,
type:1
},
type: "post",
error: function (msg) {
console.log('请求出错');
window.location.href='../index.html'
},
success: function (msg) {
var data = JSON.parse(msg);
console.log(data)
if(data.code!=1){
like(1)
return;
}
//拉流播放
vdoid=data.vdoid;
wsip=data.ip;
console.log(wsip)
var html='<video id="videoElement" poster="images/l1.png" class="video-play"></video>'
$('.box-c').html(html);
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: data.url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load()
setTimeout(function() { flvPlayer.play(); }, 100);
flvPlayer.on("error", function (err) {
window.location.reload();
return;
})
}
document.addEventListener('DOMContentLoaded', function () {
flv_load();
});
join()
//检查断流
tt=0
var t1=setInterval(function () {
if(sessionStorage.cut=="true"){
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: data.url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load()
setTimeout(function() { flvPlayer.play(); }, 100);
}
document.addEventListener('DOMContentLoaded', function () {
flv_load();
});
flvPlayer.on("error", function (err) {
clearInterval(t1)
window.location.reload();
// like()
return;
})
}
},3000)
//直播结束
function like(i){
if(i==1){
$(".faceImg").attr("src",cdn+data.face+"?x-oss-process=image/resize,w_100");
}
$(".name").text(data.nickname);
$(".id").text("Yabo ID : "+sessionStorage.roomID)
var html=[];
html+='<div class="look-end"></div>';
html+='<div class="box-c-top">';
html+='<p class="box-c-top-p1">本次直播已结束</p>';
html+='<p class="box-c-top-p2"> <span class="box-c-top-more">--</span> 真人围观</p>';
html+='</div>';
html+='<div class="box-c-bottom">';
html+='<p>猜你喜欢的主播</p>';
html+='<ul class="box-c-ul">';
html+='</ul>';
$(".box-c").html(html);
$(".look-end").css("background","url("+cdn+""+data.face+")no-repeat");
$(".box-c-top-more").text(data.looknum);
//猜你喜欢
$.ajax({
url:$ip+"weblive/room/hotlist.html",
data:{
uid:0,
type:2
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
console.log(data);
var html=[];
for(var i=0;i<data.rooms.length;i++){
if(data.rooms[i]!=undefined){
if(data.rooms[i].uid!=sessionStorage.roomID){
html+='<li>';
html+='<img class="box-c-img" src='+cdn+''+data.rooms[i].faceimg+'?x-oss-process=image/resize,w_500 alt="">';
html+='<div class="online-num-box">';
html+='<img class="online-icon" src="../images/animate-img/online-icon10.png" alt="">';
html+='<span class="online-num">'+data.rooms[i].hot+'</span>';
html+='</div>';
html+='<p class="box-c-li-name">'+data.rooms[i].nickname+'</p>';
html+='<i style="display: none">'+data.rooms[i].roomId+'</i>'
html+='</li>';
}
}
}
$(".box-c-ul").html(html);
$(".box-c-ul li").on("click", function () {
window.location.href="index.html?roomID="+$(this).children("i").text();
})
}
})
//帧动画操控
var iconIndex = 2;
setInterval(function () {
$(".online-icon").attr('src','../images/animate-img/online-icon'+iconIndex+'.png');
if (iconIndex == 20) {
iconIndex = 1;
}else {
iconIndex++;
}
},40);
}
//游客连接socket
if($.cookie("ukk")==undefined){
$.ajax({
url:$ip+"weblive/user/index.html",
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
console.log(data)
wsUid=data.vid;
WebSocketTest()
}
})
}else{
wsUid= $.cookie("ukk");
WebSocketTest()
}
}
})
//加入房间
function join() {
$.ajax({
url: $ip + "weblive/room/joinroom.html",
data: {
uid: 21372129,
roomid: sessionStorage.roomID,
vdoid:vdoid,
jointype:"2"
},
type: "post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data = JSON.parse(msg);
console.log(data)
$(".faceImg").attr("src",cdn+data.room.faceimg+"?x-oss-process=image/resize,w_100");
$(".name").text(data.room.nickname);
$(".id").text("Yabo ID : "+data.room.roomId)
if(data.room.liked==false){
$(".attention").css("background","#999999");
$(".attention").text("已关注")
}
if(data.room.level==10000){
$(".rich-level").attr('src',"https://zhibocdn.lvdou66.com/comm/level/gf.png")
}else{
$(".rich-level").attr('src',"https://zhibocdn.lvdou66.com/comm/level/"+data.room.level+".png")
}
ji=data.room.level;
$(".man-text").text(data.room.num);
$(".rich-text").text(data.room.bonds);
if(data.room.hotResult.score>999999999){
data.room.hotResult.score=999999999
}
$(".hot-text").text(data.room.hotResult.score);
dayRich=data.room.dayGuard;
weekRich=data.room.weekGuard;
monRich=data.room.monGuard;
userList(0)
setInterval(function () {
userList(0)
},15000)
}
})
}
//点击切换榜单
$(".box-l-ul li").on("click", function () {
$(this).siblings("li").removeClass("li-act");
$(this).addClass("li-act");
if($(this).children("i").text()==1){
$(".li-img1").attr("src","images/man-act.png")
$(".li-img2").attr("src","images/rich.png")
$(".li-img3").attr("src","images/hot.png")
$(".ul-list").show();
$(".rich-list").hide();
$(".hot-list").hide();
}
if($(this).children("i").text()==2){
$(".li-img1").attr("src","images/man.png")
$(".li-img2").attr("src","images/rich-act.png")
$(".li-img3").attr("src","images/hot.png")
$(".ul-list").hide();
$(".rich-list").show();
$(".hot-list").hide();
guard(3)
}
if($(this).children("i").text()==3){
$(".li-img1").attr("src","images/man.png")
$(".li-img2").attr("src","images/rich.png")
$(".li-img3").attr("src","images/hot-act.png")
$(".ul-list").hide();
$(".rich-list").hide();
$(".hot-list").show();
}
})
//点击切换守护榜
$(".rich-select li").on("click", function () {
if($(this).children("i").text()=="1"){
$(this).addClass("rich-select-act");
$(this).siblings("li").removeClass("rich-select-act");
guard(3)
}
if($(this).children("i").text()=="2"){
$(this).addClass("rich-select-act");
$(this).siblings("li").removeClass("rich-select-act");
guard(1)
}
if($(this).children("i").text()=="3"){
$(this).addClass("rich-select-act");
$(this).siblings("li").removeClass("rich-select-act");
guard(2)
}
})
//拉取礼物信息
gift()
function gift(){
$.ajax({
url: $ip + "weblive/gift/list.html",
data: {
uid: 0,
},
type: "post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data = JSON.parse(msg);
console.log(data)
jsonArr=data.data;
console.log(jsonArr)
var mun=Math.ceil(data.data.length/8)
console.log(mun)
var html=[];
var list=8;
var gList=0;
giftMd5=data.md5;
for(var i=0;i<mun;i++){
html+='<div class="swiper-slide">';
for(var j=gList;j<list;j++){
if(data.data[j]!=undefined){
html+='<div class="gift-box-li">';
html+='<img src='+cdn+''+data.data[j].icon+'?x-oss-process=image/resize,w_150 alt="">';
if(data.data[j].currency==3){
html+='<p><img src="images/zuan.png" alt=""> '+data.data[j].price+'</p>';
}else{
html+='<p><img src="images/Ag.png" alt=""> '+data.data[j].price+'</p>';
}
html+='<o style="display: none">'+data.data[j].gid+'</o>';
html+='</div>';
}
}
html+='</div>';
list+=8;
gList+=8;
}
$(".swiper-wrapper").html(html);
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$(".swiper-slide .gift-box-li").on("click", function () {
$(this).addClass("li-click")
$(this).siblings("div").removeClass("li-click")
$(this).parent(".swiper-slide").siblings(".swiper-slide").children("div").removeClass("li-click")
gid=$(this).children("o").text();
console.log(gid);
})
}
})
}
//用户列表
function userList(o){
$.ajax({
url:$ip+"weblive/room/users.html",
data:{
roomid:sessionStorage.roomID,
count:o
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
// console.log(data)
var html=[];
for(var i=0;i<data.users.length;i++){
// if(data.users[i].uid!=dayRich&&data.users[i].uid!=weekRich&&data.users[i].uid!=monRich){
html+='<li>';
html+='<span class="room-li1">'+((o*20)+(i+1))+'</span>';
html+='<span class="room-li2"><img src='+cdn+''+data.users[i].face+' alt=""></span>';
html+='<span class="room-li3">'+data.users[i].nickname+'<span class="level">'+data.users[i].lev+'</span></span>';
html+='</li>';
// }else{
// console.log("有贵人");
// }
}
if(o==0){
$(".ul-list").html(html);
}else{
$(".ul-list .zl-scrollContentDiv").append(html);
}
if(o==0){
$(".ul-list").scrollBar();
}
}
})
}
userlistOk=true
var t1=setInterval(function () {
$(".ul-list .zl-scrollContentDiv").on("mousemove", function () {
if(Number($(".ul-list .zl-scrollContentDiv").css("top").split("p")[0])<-700){
if(userlistOk==true){
clearInterval(t1);
$(".ul-list .zl-scrollContentDiv").unbind("mousemove");
userList(1);
}
}
})
},2000)
$(".ul-list").on({
mouseover : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','1');
} ,
mouseout : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','0');
}
});
//小券榜
function guard(o){
$.ajax({
url:$ip+"weblive/rank/guard.html",
data:{
uid:sessionStorage.roomID,
page:1,
type:o
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
console.log(data)
var html=[];
for(var i=0;i<data.ranklist.length;i++){
html+='<li>';
html+='<span class="room-li1">'+(i+1)+'</span>';
html+='<span class="room-li2"><img src="../images/tu.jpg" alt=""></span>';
html+='<span class="room-li3">'+data.ranklist[i].nickname+'<span class="level">'+data.ranklist[i].lev+'</span></span>';
html+='<span class="room-li4">'+data.ranklist[i].score+'</span>';
html+='</li>';
}
$(".ul-list2").html(html);
$(".ul-list2").scrollBar();
}
})
}
$(".ul-list2").on({
mouseover : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','1');
} ,
mouseout : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','0');
}
});
//热力值排行
hotList()
function hotList(){
$.ajax({
url:$ip+"weblive/rank/hotrank.html",
data:{
roomid:sessionStorage.roomID,
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
console.log(data)
var html=[];
for(var i=0;i<data.ranklist.length;i++){
html+='<li>';
html+='<img class="hot-face" src='+cdn+''+data.ranklist[i].face+' alt="">';
html+='<p class="hot-name">'+data.ranklist[i].nickname+'</p>';
html+='<p class="hot-more"><span class="hot-mun">'+data.ranklist[i].rankId+'</span><img src="images/hot.png" alt="">'+data.ranklist[i].score+'</p>';
html+='<i style="display: none">'+data.ranklist[i].uid+'</i>'
html+='</li>';
}
$(".hot-list").html(html);
$(".hot-list").scrollBar();
$(".hot-list li").on("click", function () {
window.location.href="index.html?roomID="+$(this).children("i").text()
})
}
})
}
$(".hot-list").on({
mouseover : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','1');
} ,
mouseout : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','0');
}
});
//点击关注
$(".attention").on("click", function () {
attention()
})
function attention(){
$.ajax({
url:$ip+"weblive/room/like.html",
data:{
uid:$.cookie("ukk"),
token: $.cookie("tbb"),
roomid:sessionStorage.roomID
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
console.log(data)
if(data.code==1){
$(".attention").css("background","#999999");
$(".attention").text("已关注")
}
if(data.code==-11022){
layer.msg("已经关注了直播间")
}
}
})
}
$(".msg-ul").scrollBar();
$(".msg-ul").scrollTop()
$(".msg-ul").on({
mouseover : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','1');
} ,
mouseout : function(){
$(this).children(".zl-scrollBarBox").children(".zl-scrollBar").css('opacity','0');
}
});
//发送聊天消息
$(".msg-btn").on("click", function () {
msgSend();
})
$(window).on("keyup", function () {
if(event.keyCode == "13"){
msgSend()
}
})
function msgSend(){
if($.cookie("ukk")==undefined){
layer.msg("亲爱的用户，登录方可聊天噢~")
}else{
$.ajax({
url:$ip+"weblive/room/senddanmu.html",
data:{
uid:$.cookie("ukk"),
roomid:sessionStorage.roomID,
token: $.cookie("tbb"),
message:$(".msg-ipt").val()
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
console.log(data)
if(data.code==1){
$(".msg-ipt").val("");
}else{
layer.msg(data.msg);
}
}
})
}
}
//赠送礼物
$(".gift-send").on("click", function () {
if($.cookie("ukk")==undefined){
layer.msg("亲爱的用户，请登录。")
return;
}
giftPush()
})
function giftPush(){
$.ajax({
url:$ip+"weblive/gift/send.html",
data:{
uid: $.cookie("ukk"),
fid: sessionStorage.roomID,
gid:gid,
token: $.cookie("tbb"),
md5:giftMd5,
num:1
},
type:"post",
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data=JSON.parse(msg);
// console.log(data)
if(data.code==1){
userRich()
}else{
layer.msg(data.msg);
}
}
})
}
//websocket
var ws;
//websocket相关
function WebSocketTest() {
if ("WebSocket" in window)
{
// 打开一个 web socket
var url="ws://"+wsip+":21901/ws?uid="+wsUid+"&token=1&roomid="+sessionStorage.roomID+"&type=1";
ws = new WebSocket(url);
ws.onopen = function()
{
console.log("链接打开"+url);
};
ws.send= function () {
}
ws.onmessage = function (evt)
{
var received_msg = evt.data;
// console.log(evt)
var obj=JSON.parse( received_msg );
// console.log(obj);
//接收直播间信息
if(obj.cmd==9999){
var msg=JSON.parse(obj.data)
var html=[];
console.log("确实是收了直播间信息")
if(msg.msg.color==undefined){
// console.log(msg);
html+='<li class="msg">';
if(msg.msg.level!=0){
if(msg.msg.level==10000) html+='<span>'+msg.msg.nickname+' <img style="width: 22px;" src=https://zhibocdn.lvdou66.com/comm/level/gf.png>：'+msg.msg.msg+'</span>';
else html+='<span>'+msg.msg.nickname+' <img style="width: 22px;" src=https://zhibocdn.lvdou66.com/comm/level/'+msg.msg.level+'.png>：'+msg.msg.msg+'</span>';
}else{
html+='<span>'+msg.msg.nickname+' ：'+msg.msg.msg+'</span>';
}
html+='</li>';
$(".msg-ul .zl-scrollContentDiv").append(html);
sessionStorage.gun=true;
}else{
var giftArr=JSON.parse(obj.data)
// console.log(giftArr)
if(giftArr.msg.color!=undefined){
var mark=giftArr.msg.mark;
var color=giftArr.msg.color;
var msg=giftArr.msg.msg;
var nameS = parseInt(mark[0].split('-')[0]);
var nameE = parseInt(mark[0].split('-')[1]);
var html = msg;
for (var i = mark.length - 1; i > 0; i--) { //遍历 向主播吹了泡泡 中所有操作
S = parseInt(mark[i].split('-')[0]);
E = parseInt(mark[i].split('-')[1]);
gift = html.substring(S,E+1);
html = html.substring(0,S) + '<msg style="color:#'+color[i]+'">'+gift+'</msg>' + html.substr(E+1);
}
var levelStr = msg.substr(nameE+5);
var level = levelStr.substring(0,levelStr.indexOf('#'));
var name = msg.substring(nameS,nameE+1);
if (msg.substr(nameE + 1,1) == '#') { //是否有等级并字符串去掉名字
msg1 = html.substr(nameE+1);
mag2 = msg1.substr(level.toString().length+6);
html ='<img style="width: 21px;" src="http://zhibocdn.ishuaji.cn/comm/level/'+level+'.png" alt=""> ' + mag2;
}else {
html = html.substr(nameE+2);
}
html = '<msg style="color:#'+color[0]+'">'+name+'</msg>' + html; //拼接姓名
html = '<li class="msg"><span>' + html + '</span></li>';
$(".msg-ul .zl-scrollContentDiv").append(html);
sessionStorage.gun=true;
}
}
}
//欢迎新伙伴
if(obj.cmd==10024){
var welcome=JSON.parse(obj.data);
// console.log(welcome);
var html=[];
$(".man-text").text(welcome.num);
if(welcome.user.level==0){
var lucknum=Math.random();
if(lucknum<=0.1){
html+='<li class="msg">';
html+='<span>';
html += '<msg>'+$(".name").text()+'</msg>';
html += '<img style="width: 21px;" src="http://zhibocdn.ishuaji.cn/comm/level/'+ji+'.png" alt="">:';
html += ' 欢迎<msg>'+welcome.user.nickname+'</msg>来看我';
html+='</span>';
html+='</li>'
$(".msg-ul .zl-scrollContentDiv").append(html);
}
}else{
html+='<li class="msg">';
html+='<span>';
html += '<msg>'+$(".name").text()+'</msg>';
html += '<img style="width: 21px;" src="http://zhibocdn.ishuaji.cn/comm/level/'+ji+'.png" alt="">:';
html += ' 欢迎<msg>'+welcome.user.nickname+'</msg><img style="width: 21px;" src="http://zhibocdn.ishuaji.cn/comm/level/'+welcome.user.level+'.png" alt="">来看我';
html+='</span>';
html+='</li>'
$(".msg-ul .zl-scrollContentDiv").append(html);
}
}
//送礼热力值变化
if(obj.cmd==10023){
var hotArr=JSON.parse(obj.data);
console.log("热力值变化")
console.log(hotArr);
$(".rich-text").text(hotArr.bonds);
$(".hot-text").text(hotArr.hotResult.score);
}
//送礼特效展示
if(obj.cmd==10036){
var giftShow=JSON.parse(obj.data);
console.log("礼物效果")
console.log(giftShow);
Gid=giftShow.gid;
userId=giftShow.fromuser.uid;
insertGift()
function insertGift(){
gidOk=false;
for(var i=0;i<jsonArr.length;i++){
if(jsonArr[i].gid==Gid){
giftName=jsonArr[i].giftname;
giftIcon=jsonArr[i].icon;
break;
}
}
//叠加
for(var i=0;i<4;i++){
if($(".gift-show-box").children("p").eq(i).html()!=undefined){
if($(".gift-show-box").children("p").eq(i).children(".gif-num").text()==Gid&&$(".gift-show-box").children("p").eq(i).children(".gif-uid").text()==userId){
var html=[];
html+='<i style="display: none">5000</i>';
html+='<o style="display: none" class="gif-num">'+Gid+'</o>';
html+='<o style="display: none;" class="gif-uid">'+giftShow.fromuser.uid+'</o>'
html+='<img class="gift-show-img" src=https://zhibocdn.lvdou66.com/comm/user/img/21372125/34f2610a28f146c5aa53ed5ed0e74fd1.jpg?x-oss-process=image/resize,w_100 alt="">';
html+='<span class="gift-show-name">'+giftShow.fromuser.nickname+'</span>';
html+='<span class="gift-show-gift">送 '+giftName+'</span>';
html+='<img class="gift-show-rich" src=https://zhibocdn.lvdou66.com/comm'+giftIcon+'?x-oss-process=image/resize,w_150 alt="">';
html+='<span class="gift-show-x">X</span>';
html+='<span class="gift-show-num">'+giftShow.num+'</span>';
$(".gift-show-box").children("p").eq(i).html(html);
gidOk=true
}
}
}
if(gidOk==false){
var html=[];
html+='<p class="gift-show-content">';
html+='<i style="display: none">5000</i>';
html+='<o style="display: none" class="gif-num">'+Gid+'</o>';
html+='<o style="display: none;" class="gif-uid">'+giftShow.fromuser.uid+'</o>'
html+='<img class="gift-show-img" src="https://zhibocdn.lvdou66.com/comm/user/img/21372125/34f2610a28f146c5aa53ed5ed0e74fd1.jpg?x-oss-process=image/resize,w_100" alt="">';
html+='<span class="gift-show-name">'+giftShow.fromuser.nickname+'</span>';
html+='<span class="gift-show-gift">送 '+giftName+'</span>';
html+='<img class="gift-show-rich" src=https://zhibocdn.lvdou66.com/comm'+giftIcon+'?x-oss-process=image/resize,w_150 alt="">';
html+='<span class="gift-show-x">X</span>';
html+='<span class="gift-show-num">'+giftShow.num+'</span>';
html+='</p>';
$(".gift-show-box").append(html);
setTimeout(function () {
$(".gift-show-content").addClass("show");
},100)
}
}
}
//座驾进入
if(obj.cmd==10044){
console.log("座驾进入")
var carShow=JSON.parse(obj.data);
console.log(carShow);
}
};
ws.onclose = function()
{
// 关闭 websocket
console.log("连接已关闭...");
setTimeout(function () {
WebSocketTest()
},1000)
};
}
else
{
// 浏览器不支持 WebSocket
console.log("您的浏览器不支持 WebSocket!");
}
}
function send(message) {
if (!window.WebSocket) { return; }
if (ws.readyState == WebSocket.OPEN) {
ws.send(message);
} else {
alert("The socket is not open.");
}
}
setInterval(function () {
for(var i=0;i<4;i++){
if($(".gift-show-box").children("p").eq(i).html()!=undefined){
if($(".gift-show-box").children("p").eq(i).children("i").text()==0){
$(".gift-show-box").children("p").eq(i).addClass("out");
setTimeout(function () {
$(".out").remove();
},500)
}
else $(".gift-show-box").children("p").eq(i).children("i").text($(".gift-show-box").children("p").eq(i).children("i").text()-10)
}
}
},10)
</script>
</html>