通过vue实现在线直播源码的直播点赞

最新推荐文章于 2023-09-19 17:11:39 发布

云豹科技晓彤

最新推荐文章于 2023-09-19 17:11:39 发布

阅读量429

点赞数 1

分类专栏：直播平台源码文章标签： javascript

原文链接：https://blog.csdn.net/qq_37024887/article/details/106857564?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163028648616780271571101%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163028648616780271571101&biz_i

版权

直播平台源码专栏收录该内容

205 篇文章 2 订阅

订阅专栏

我们可以发现，在线直播源码的直播间中，在右下角会有给主播点赞的按钮，点赞越多，对主播来说好处越多，那么在线直播源码是怎么实现点赞功能的呢？

实现在线直播源码观众的点赞功能。
功能描述：最后一次点赞三秒后，在线直播源码把观众点赞的数目提交到后台服务器。

话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="dianzan">点赞</button>
        <div>点赞数：{{likeNum}}</div>
    </div>
</body>
<style>
  *{
      margin: 0;
      padding: 0;
      font-size: 30px;
  }    
  button{
      padding: 5px 10px;
  }
</style>

<script>
new Vue({
    el: '#app',
    data: function() {
        return { 
            liveId:'001',//直播间ID
            myLikeNum: 0,//记录当前观众每次点赞的数量
            likeNum: 0,//页面上显示的点赞数量
            TimeArr: [],//存放时间戳的数组
        }
    },
    methods: {
        dianzan(){//点赞  
            this.myLikeNum++;
            this.likeNum++; //点赞之后，页面要立刻有反馈
            this.TimeArr.push(new Date().valueOf());
            let that = this;
            setTimeout(function(){
                if(new Date().valueOf() - that.TimeArr[that.TimeArr.length-1] >= 3000){
                    console.log("3秒后，调用点赞服务");
                    console.log(that.myLikeNum);
                   // that.dianzanService();
                   //dianzanService方法中的路径、token都没填写，运行会出错，所以注释掉了。
                }else{
                    console.log("3秒内！不调用");
                }
            },3000);
        },
        dianzanService(){//点赞服务
            //点赞数目提交到服务器，
            //在成功的回调方法里把myLikeNum、TimeArr置空。
            //路径我用xxx代替了，
            putAction('/xxx/xxx/xxx?Id='+this.liveId+'&likeNum='+this.myLikeNum,'这里是token的值').then(res=>{        
                if(res.success && res.code == 0){
                    //调用方法更新token
                    this.myLikeNum = 0;//提交成功之后点赞数重置为0;
                    this.TimeArr = [];
                }else{//错误处理
                    this.$message({
                        message: res.message,
                        type: 'warning',
                        offset: 460
                    });
                }
            });                
        },
    }
})
</script>
</html>

在线直播源码页面最开始：

在这里插入图片描述

开始点赞：隔一秒，点一次，点五次：

在这里插入图片描述

控制台输出：

在这里插入图片描述

注意：

本例中在线直播源码调用点赞服务dianzanService成功后，并没有在页面中更新 likeNum的值。likeNum的值应该另写一个监听去获取服务器返回来的点赞数目。

声明：本文由云豹科技转发自五花漏博客，如有侵权请联系作者删除

云豹科技晓彤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过vue实现在线直播源码的直播点赞

我们可以发现，在线直播源码的直播间中，在右下角会有给主播点赞的按钮，点赞越多，对主播来说好处越多，那么在线直播源码是怎么实现点赞功能的呢？实现在线直播源码观众的点赞功能。功能描述：最后一次点赞三秒后，在线直播源码把观众点赞的数目提交到后台服务器。话不多说，上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
复制链接

扫一扫

专栏目录