使用小程序+网页简易实现多客户端实时弹幕

news2024/11/15 6:54:13

此文主要通过小程序+网页模拟多客户端通过轮询、WebSockets、订阅推送等方式简易实现实时弹幕。

    • 实现流程
      • 1、服务端
        • 1.1、创建项目
        • 2.2、接口定义
      • 2、客户端
        • 2.1、小程序端
        • 2.2、web端
      • 3、实现方式
        • 3.1、轮询
        • 3.2、WebSocket
        • 3.3、订阅推送

实现流程

1、服务端

1.1、创建项目

  1. 打开Visual Studio,创建新项目,选择包含API的应用程序模板。

在这里插入图片描述

  1. 填写项目名称及选择对应的保存位置,框架版本可根据开发习惯来选择。

在这里插入图片描述

  1. 服务端主要用于搭建API接口,选择MVC,其他选项默认即可。

在这里插入图片描述
在这里插入图片描述

2.2、接口定义

  1. 选中项目Models文件夹,创建一个实体类用于定义推送到客户端的各个字段属性值。

在这里插入图片描述

  1. 实体类中定义字段如下:弹幕内容、发送时间、发送人、来源、是否推送等,字段可根据实际业务场景来增减。

在这里插入图片描述

public class Barrage { 
	   /// <summary>
	   /// 弹幕内容
	   /// </summary>
	   public string BarrageContent { get; set; }
	
	   /// <summary>
	   /// 发送时间
	   /// </summary>
	   public DateTime SendTime { get; set; }
	
	   /// <summary>
	   /// 发送人
	   /// </summary>
	   public string CreateBy { get; set; }
	
	   /// <summary>
	   /// 来源 小程序 / web端
	   /// </summary>
	   public string From { get; set; }
	
	   /// <summary>
	   /// 是否推送
	   /// </summary>
	   public int IsPush { get; set; }
}
  1. 打开Controller文件夹中的Home控制器,定义两个方法以及一个List,分别用于接收存储以及弹幕推送等功能;这里需要注意的是每次只需要获取未推送的弹幕消息即可,获取弹幕的接口被调用后,即将推送过去的数据修改为已推送。

在这里插入图片描述

 /// <summary>
 /// 需要推送的弹幕数据
 /// </summary>
 List<Barrage> list = new List<Barrage>();

 /// <summary>
 /// 提交弹幕
 /// </summary>
 /// <param name="BarrageContent"></param>
 /// <param name="CreateBy"></param>
 /// <param name="From"></param>
 /// <returns></returns>
 public ActionResult ReceivingBarrage(string BarrageContent,string CreateBy,string From) {
     Barrage info = new Barrage();
     info.BarrageContent = BarrageContent;
     info.CreateBy = CreateBy;
     info.From = From;
     info.SendTime = DateTime.Now;
     info.IsPush = 0;
     list.Add(info);
     return Json("提交弹幕");
 }

 /// <summary>
 /// 获取弹幕内容
 /// </summary>
 /// <returns></returns>
 public ActionResult AcquireBarrage() {
     //根据时间排序获取未推送的数据
     var BarrageList = list.Where(x=>x.IsPush == 0).OrderByDescending(z=>z.SendTime);
     //数据推送后 将类型改为已推送
     return Json(BarrageList);
 }

2、客户端

2.1、小程序端

  1. 访问微信公众平台,点击账号注册。

在这里插入图片描述

  1. 选择小程序,并在表单填写所需的各项信息进行注册。

在这里插入图片描述
在这里插入图片描述

  1. 在开发管理选择开发设置,将AppID及AppSecret复制出来进行存储。

在这里插入图片描述

  1. 下载安装微信web开发者工具并创建一个新的项目,填入上图所复制的AppId。

在这里插入图片描述

  1. 在小程序创建一个组件用于展示弹幕效果。

在这里插入图片描述

  1. 组件所需属性值:距离屏幕顶部距离、行距单位、数据源、层级、弹幕行数等。

在这里插入图片描述

  /**
   * 组件的属性列表
   */
  properties: {
    //距离屏幕顶部距离
    top: {
      type: String,
      value: "10vh"
    },
    //每行间距单位
    rowSpacing: {
      type: String,
      value: "40rpx",
    },
    //数据源
    list: {
      type: Array,
      value: []
    },
    //层级
    zIndex: {
      type: Number,
      value: 999
    },
    //一个等于屏幕宽度的弹幕 滚动所需要的时间 单位毫秒
    speed: {
      type: Number,
      value: 10000
    },
    //动画速度波动范围-500~500ms之间选取随机值,用于控制每条弹幕的速度
    shakeSpeed: {
      type: Number,
      value: 500
    },
    //动画延时执行时间波动范围上限值 0~500ms之间选取随机值, 用于控制弹幕出厂顺序
    shakeDelay: {
      type: Number,
      value: 500
    },
    //弹幕行数
    rows: {
      type: Number,
      value: 2
    },
     //每项弹幕右外边距
     marRight: {
      type: String,
      value: "40rpx"
    },
    //是否循环
    loop: {
      type: Boolean,
      value: false
    }
  },
  1. 在组件wxml文件中将弹幕数据进行渲染。

在这里插入图片描述

<view animation="{{item.animation}}" wx:for="{{barrageInfo.list}}"
  style="z-index:{{zIndex}};top:{{item.top?item.top:top}}" class="barr" id="barr_{{index}}">
  <view class="item" wx:for-item="_item" style="margin-right:{{marRight}}" wx:for="{{item.list}}">
  <view class="box">
        <image src="{{_item.avatar}}"></image>
        <text>{{_item.words}}</text>
  </view>
  </view>
</view>
  1. 创建一个新的page,用于视频展示及弹幕推送等效果,同时在json文件中引用上面所创建的组件。

在这里插入图片描述

{
  "usingComponents": {
    "barrage": "/components/barrage"
  }
}
  1. 准备一个MP4格式的素材模拟数据源或者直播效果,同时在wxml中将组件及video将数据进行展示。

在这里插入图片描述

在这里插入图片描述

2.2、web端

  1. 通过HBuiderX开发工具创建一个默认的网站项目。

在这里插入图片描述

  1. 在index.html文件中简单实现弹幕展示及video效果。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<script>
	var inputText = document.getElementById("text");
	var danmuArea = document.getElementById("danmuArea");
	var colorInput = document.getElementById("textcolor");
	
	function sendDanmu() {
		var text = inputText.value;
		var msg = document.createElement("p");
		msg.innerText = text
		msg.style.color = colorInput.value;
		var top = Math.random() * 280;
		msg.style.top = top + "px";
		danmuArea.appendChild(msg)
		msg.setAttribute("class", "msg")
		inputText.value = "";
	}

</script>

3、实现方式

3.1、轮询

  1. 前期工作准备好后,再次回到小程序客户端;在页面增加一个文本框以及按钮用于获取所输入的弹幕信息及实现发送等功能。

在这里插入图片描述

  1. 文本框绑定bindinput事件,获取用户输入的弹幕内容。

在这里插入图片描述
在这里插入图片描述

  bindMsg(e) {
    this.setData({
      msg: e.detail.value
    });
  },
  1. 发送按钮绑定点击事件,给data中的list追加数据的同时调用API接口,提交数据。

在这里插入图片描述

    let that = this;
    let info = {
      "words": that.data.msg,
      "avatar": "../../images/head.jpg"
    };
    that.setData({
      barrageList: that.data.barrageList.concat(info),
      msg:'',
    });
    wx.request({
      url: that.data.requestUrl + '/Home/ReceivingBarrage',
      method: 'post',
      data: {
        BarrageContent: that.data.msg,
        CreateBy: '摔跤猫子',
        From: '小程序'
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
      }
    })
  1. 在onLoad事件中增加一个定时轮询请求,每隔1s请求一次,如果有数据即向弹幕list中进行推送。

在这里插入图片描述

在这里插入图片描述

    setInterval(() => {
      wx.request({
        url: that.data.requestUrl + '/Home/AcquireBarrage',
        method: 'post',
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          that.setData({
            barrageList:that.data.barrageList.concat(res.data)
          });
        }
      })
    }, 1000);
  1. 在web客户端中依法炮制,获取弹幕,发送弹幕即可。

3.2、WebSocket

后续更新实现代码;大体实现原理即利用WebSocket即时通信节省大量无效请求,减轻服务器压力和网络带宽的占用;服务器可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,双向平等对话。

3.3、订阅推送

后续更新实现代码;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/177415.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【docker概念和实践 5】容器命令和案例(1)

一、说明 docker的四个要素是&#xff1a;本地的Docker-engine、网上&#xff08;本地&#xff09;的仓库、镜像images、容器&#xff1b;初学者必须了解这是个概念的关系。但是&#xff0c;真正重要的概念是容器&#xff0c;因为&#xff0c;只有掌握了容器&#xff0c;才能具…

SpringBoot整合SSM

添加pom依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.16.18</version><scope>provided</scope></dependency><dependency><groupId>org.mybati…

macOS Monterey 12.6.3 (21G419) Boot ISO 原版可引导镜像

macOS Monterey 12.6&#xff0c;皆为安全更新&#xff0c;不再赘述。 macOS Monterey 12.6&#xff0c;发布于 2022 年 9 月 12 日&#xff08;北京时间今日凌晨&#xff09;&#xff0c;本次为安全更新。 今日&#xff08;2022-07-21&#xff09;凌晨&#xff0c;Apple 终于…

【Hadoop】HDFS高可用与高扩展原理分析(HA架构与Federation机制)

文章目录一、HDFS的高可用性&#xff08;HA架构&#xff09;二、HDFS的高扩展性&#xff08;Federation机制&#xff09;三、HA架构 Federation机制一、HDFS的高可用性&#xff08;HA架构&#xff09; 为保证HDFS的高可用性&#xff0c;即当NameNode节点机器出现故障而导致宕机…

【操作系统】—— Windows常用快捷键(带你快速了解)

&#x1f4dc; “作者 久绊A” 专注记录自己所整理的Java、web、sql等&#xff0c;IT技术干货、学习经验、面试资料、刷题记录&#xff0c;以及遇到的问题和解决方案&#xff0c;记录自己成长的点滴。 &#x1f341; 操作系统【带你快速了解】对于电脑来说&#xff0c;如果说…

【JavaEE】定时器的简单实现

目录 定时器 实现定时器 描述任务 保存任务 扫描任务 执行任务 定时器 在实现定时器之前&#xff0c;先来简单的了解一下什么是定时器。 定时器是软件开发中一个重要的组件。比如到了什么时候&#xff0c;干一件什么样的事情&#xff1b;多少秒之后干什么。本篇文章介绍…

活动星投票最美养生师展网络评选微信的投票方式线上免费投票

“最美养生师”网络评选投票_用户同什么方法挑选投票小程序_最好的投票小程序用户在使用微信投票的时候&#xff0c;需要功能齐全&#xff0c;又快捷方便的投票小程序。而“活动星投票”这款软件使用非常的方便&#xff0c;用户可以随时使用手机微信小程序获得线上投票服务&…

Hive函数大全–完整版(三)

官网参考地址&#xff1a; 官网UDF - Apache Hive 1. 基本数据类型 2. 基础运算符与函数 SQL结果A IS NULL 空A IS NOT NULL 非空 A LIKE B 模糊匹配A RLIKE B 正则表达式匹配A REGEXP B 正则表达式匹配 3. 类型转换 cast(expr as <type>)…

园区网典型组网架构及案例实践

什么是园区网园区网络是限定区域内&#xff0c;连接人与物的局域网络&#xff1b;园区网络通常只有一个管理主体&#xff1b;如果有多个管理主体&#xff0c;通常被认为为多个园区网络。园区网络典型架构小型园区网络典型架构小型园区网络应用于接入用户数量较少的场景&#xf…

SpringBoot 统一功能处理

SpringBoot 统一功能处理前言一、用户登录权限效验1.1 最初的用户登录验证1.2 Spring AOP 用户统一登录验证的问题1.3 Spring 拦截器1.3.1 准备工作1.3.2 自定义拦截器1.3.3 将自定义拦截器加入到系统配置1.4 拦截器实现原理1.4.1 实现原理源码分析1.4.2 拦截器小结1.5 扩展&am…

CBC模式的3DES加解密(课程设计报告)

目录一、实验内容二、实验原理2.1 DES加解密原理2.1.1 DES加解密的基本原理2.1.2 DES加解密的关键步骤2.2 3DES加解密原理2.3 分组密码CBC加解密模式原理2.4 填充原理三、实验过程3.1 变量说明3.1.1 主函数变量说明3.1.2 其他重要变量说明3.2 函数功能说明3.2.1主函数说明3.2.2…

并行训练方法-单机多卡

一、简单方便的 nn.DataParallel DataParallel 可以帮助我们&#xff08;使用单进程控&#xff09;将模型和数据加载到多个 GPU 中&#xff0c;控制数据在 GPU 之间的流动&#xff0c;协同不同 GPU 上的模型进行并行训练&#xff08;细粒度的方法有 scatter&#xff0c;gather …

学习记录670@项目管理之变更管理

变更的分类 按变更性质分为重大变更、重要变更和一般变更&#xff0c;可通过不同审批权限控制。按变更的迫切性分为紧急变更和非紧急变更&#xff0c;可通过不同的变更处理流程进行控制。按变更所发生的领域和阶段&#xff0c;可分为进度变更、成本变更、质量变更、设计变更、…

3小时精通opencv(四) 透视变换与图像拼接

3小时精通opencv(四) 透视变换与图像拼接 参考视频资源:3h精通Opencv-Python 文章目录3小时精通opencv(四) 透视变换与图像拼接透视变换图像拼接全部代码透视变换 透视变换建立两平面场之间的对应关系&#xff0c; 将原始图片投影到一个新的视平面上 # Author : JokerTon…

Elasticsearch7.8.0版本入门——JavaAPI操作(环境准备)

目录一、创建springboot项目二、pom.xml文件引入相关maven依赖三、创建客户端对象一、创建springboot项目 创建springboot项目步骤参考此博文链接&#xff1a;https://wwwxz.blog.csdn.net/article/details/91977374 二、pom.xml文件引入相关maven依赖 引入elasticsearch依赖…

NR PUSCH(七) 相干传输

微信同步更新欢迎关注同名mode协议笔记 这篇就是为记录一个概念在协议中的体现方式。相干传输被定义为一种UE能力。考虑到UE的实现成本&#xff0c;NR不要求所有的UE都能做到所有的天线端口都可以相干传输。NR定义了以下3种UE的相干传输能力。 (1)全相干&#xff08;Fully-coh…

正点原子Linux驱动第三期

目录 第一讲 系统镜像烧写 第二讲 u-boot编译 第三讲 uboot命令使用 第四讲 Uboot源码分析 第五讲 uboot顶层 Makefile分析 第六讲 Uboot启动流程 第七讲 uboot移植 第八讲 UBoot图形化界面配置 第九讲 Linux 内核移植 第十讲 Linux内核源码目录分析 第十一讲 Linux…

六、python操作mysql篇(黑马程序猿-python学习记录)

黑马程序猿的python学习视频&#xff1a;https://www.bilibili.com/video/BV1qW4y1a7fU/ 目录 1. 下载pymysql 2. 新建数据库 3. mysql服务器版本查询 4. 执行非查询性质的SQL 5. 执行查询性质的sql 6. 执行新增sql 1. 下载pymysql 右下角点击版本 选择解释器设置 点击加号 搜…

Python(for和while)循环嵌套及用法

Python 不仅支持 if 语句相互嵌套&#xff0c;while 和 for 循环结构也支持嵌套。所谓嵌套&#xff08;Nest&#xff09;&#xff0c;就是一条语句里面还有另一条语句&#xff0c;例如 for 里面还有 for&#xff0c;while 里面还有 while&#xff0c;甚至 while 中有 for 或者 …

无需下载就能使用的图像编辑器?能代替 Photoshop 吗?#Photopea

一款在线就能使用的图像编辑器&#xff0c;好用&#xff1f;还免费&#xff1f;Photopea 图源: Photopea 官网Photopea 可以处理光栅图形和矢量图形。您可以将它用于简单的任务&#xff0c;例如调整图像大小&#xff0c;也可以用于复杂的任务&#xff0c;例如设计网页、创建插图…