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

已于 2023-08-09 17:28:55 修改
阅读量3k 收藏 40
点赞数 37
分类专栏： 微信小程序 文章标签： 小程序 前端 websocket
于 2023-01-24 12:47:05 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/weixin_42794881/article/details/128755248
版权
微信小程序 专栏收录该内容
73 篇文章 1036 订阅 ¥9.90 ¥99.00
订阅专栏
本文介绍如何使用小程序和网页结合轮询、WebSocket、订阅推送等方式，实现多客户端实时弹幕功能。服务端涉及接口定义和常用字段类型，客户端包括小程序和web端的开发设置，组件创建及数据渲染。最后探讨了三种不同的实现方式及其优势。
摘要由CSDN通过智能技术生成

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

实现流程

1、服务端

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

在这里插入图片描述

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

了解本专栏 订阅专栏 解锁全文
摔跤猫子
关注
  • 37
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 28
    评论
专栏目录
订阅专栏
探索小程序的世界(专栏导读、基础理论)
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
07-04 1万+
相比于传统的App开发，小程序开发门槛较低。你可以使用HTML、CSS和JavaScript等前端技术来开发小程序，而无需学习复杂的移动开发框架和语言。这使得学习小程序开发更加容易上手。
微信小程序 弹幕功能简单实例
08-31
主要介绍了微信小程序 弹幕功能简单实例的相关资料,需要的朋友可以参考下
小程序弹幕实现
hohocj的博客
06-06 3777
其实，在微信开放文档中就有关于弹幕的组件。当然，这是在我自己实现了弹幕功能后才发现的，不然我肯定不会自己动手实现，能白嫖绝不动手。 实现弹幕功能最主要的点就是利用CSS3里面的动画效果 /**定义从右边向左边的移动的动画**/@keyframes first { from { left: 100%; }​ to { left: -200%; }} 有了这个动画效果，实现弹幕效果非常简单了 效果图： 思路： 在wxml中添加节点 在wxss中添加动.
实时弹幕实现
qq_52928592的博客
02-22 378
实时弹幕
datagridview实时更新数据_WebSocket 开发实战，三步实现实时弹幕系统
weixin_39614146的博客
11-28 265
前言 今年疫情的突袭，改变了很多人以往在生活和工作中的方式，视频会议、协同编辑、在线直播 / 教育等业务场景凸显重要性。人们通过线上方式，实时的获取信息、同步信息，以快捷且不受空间限制的形式完成沟通、学习、工作等需求。本文将以微信小程序实时弹幕功能为例，向大家介绍高实时业务场景的功能技术实现过程。实时弹幕功能的技术实现实现方式对比 短轮询短轮询是客户端每隔一段时间向服务器发出请求，服务器端在收到...
微信小程序入门:在小程序中播放视频和发送弹幕
qq_54484914的博客
08-20 4078
小程序入门，小程序播放视频，发送弹幕，彩色弹幕
Canvas + WebSocket + Redis 实现一个视频弹幕
github_38140984的博客
10-12 870
原文出自：https://www.pandashen.com 页面布局 首先，我们需要实现页面布局，在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频，添加输入弹幕的输入框、确认发送的按钮、颜色选择器、字体大小滑动条，创建一个 style.css 来调整页面布局的样式，这里我们顺便创建一个 index.js 文件用于后续实现我们的核心逻辑，先引...
用Qt实现一个桌面弹幕程序(九)-- -- 服务端的实现
ZeroFly的博客
03-23 2548
又跳票了一段时间，终于有空回归到整题了。。。最近都在学习Ogre所以好久没有更文章了，哈哈。不过杰洛君回来了~今天要讲的是一个服务端的实现方法~实现一个带界面的服务端我们先做一个有界面的服务端版本，然后再讲根据服务器具体的环境制作没有界面的版本~新建一个项目为TestSrv的项目吧~注意这里和弹幕程序不同，不需要用QMainWindow作为基类，只需要用QDialog作为基类就可以了~
计算机网络通信小程序,微信小程序远程控制电脑屏幕，使用WebSocket
weixin_35539198的博客
07-06 880
背景宇宙第一PHP花叔最近家里在装修，安装了一个投影仪，把电脑的画面投影到墙上，通过操控电脑来切换投影的画面。有一天他突然问我，我们能不能通过一个微信小程序来远程控制投影屏幕呢？接着我们讨论了一下，确实可以，因为微信小程序有WebSocket API。WebSocket虽不是新技术，但它结合微信小程序这个新产品，未来将诞生出更多线上线下的应用场景，值得我们关注。于是做了下面这个简易的DEMO，利用...
一个网页弹幕的简单实现(附源码和运行程序)
01-08
网页弹幕，附带源码和运行程序。 一个网页弹幕的简单实现，仅仅是能 work 的程度。 特别是 chrome 插件简直要去死啦！ 安装： 首先你需要 Chrome 开发版，要不然不能运行非商店的插件。如果是 Opera 的话那就www 然后打开 chrome://extensions，把 bin 下的 biubiubiu-extension.crx 文件拖进去 最后点击右上角的图标，开始~
弹幕效果实现
猿人在北京
08-04 2150
前言昨天晚上11点了还没睡着，惆怅能力不足，但不知道怎么能快速的提升自己。呜呼哀哉，临睡前看了一个弹幕的效果实现的技术视频，听着很好的，自己在做电商这块也没写过弹幕。今天来到公司趁着闲暇按照人家说的思路写了一下，有用得上的可以看看。 demo地址正文先来看一下最终实现的效果： 在这里，我只说一下重要的思想和代码块部分，关于其他的不再细说。代码很简单，基本上跑一下在瞅瞅就理解的差不多了。思想弹幕说
微信小程序开发中的视频播放和弹幕评论功能
最新发布
m0_72166538的博客
03-14 333
通过上述示例代码，我们简单介绍了微信小程序中视频播放和弹幕评论功能的实现。其中，视频播放功能通过使用<video>标签渲染视频元素，通过方法创建视频上下文对象，通过该对象控制视频的播放和暂停。弹幕评论功能通过使用<view>和<text>标签渲染评论列表，并使用函数定时显示和隐藏弹幕。当然，这只是一个简单的示例，实际开发中还可能涉及更复杂的功能和业务逻辑。希望本篇文章能对你理解和使用微信小程序开发中的视频播放和弹幕评论功能有所帮助。
关于 js自制多屏同步弹幕 原理的分析
GoodDaYForus的专栏
07-30 1831
已实现多屏同步弹屏,并且压力测试较为良好.但是, 页面在不断进行setInterval操作,对浏览器消耗较大,需要进行缓存机制的处理; 前、后台数据的交互太过频繁,需要优化数据交互逻辑; 如真实放在互联网上运行,同步机制需要更加灵活,需加入负载均衡机制; 待项目成熟应进行弹幕框架封装; ... ... 前端的坑还会继续一个个地去踩; 在路上, 会一个一个把坑尽量看清楚些, 看透彻了, 为了下一次快掉进去之前, 不抽自己嘴巴子, 而是昂首跨过去, “来哇,互相伤害哇”!
微信小程序--video组件实现视频弹幕功能
Huangxianlong的博客
07-24 7304
微信小程序播放视频有相应的组件来实现，我们只需要调用即可，video组件的部分参数如下图： 完整参数见微信小程序官方文档 PS：相关属性解析： danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 controls:是否显示视频控件 接下来是实现小程序视频实时弹幕功能，主要分为两个部分，播放视频和发送弹幕 1. 播放视频 视频video的wxml结构如下所示： <video class="video" id="danmuc...
【PHP】五分钟教你编写一个实时弹幕网站
热门推荐
杨森源的博客
12-08 1万+
由于博主是个忠实的英雄联盟粉丝，所以经常观看一些明星大神的直播。而一谈到直播，肯定会看到满屏幕飘来飘去的弹幕。那么问题来了，这些视频弹幕网站如何做到实时同步的？PHP如何开发一个类似的网站？首先要搞定的是前端页面，最起码得有个框，让弹幕飞起来吧。一想到前台，博主头就大（毕竟我不喜欢去扣前端代码，而且做出来的东西还巨丑）。那咱们就百度一下吧，看看有什么好用的弹幕插件，现在开源的东西那么多。经过搜索，找
Python爬虫自动化爬取b站实时弹幕实例方法
每日分享程序员技巧
10-12 1809
最近央视新闻记者王冰冰以清除可爱和专业的新闻业务水平深受众多网友喜爱，b站也有很多up主剪辑了关于王冰冰的视频。我们都是知道b站是一个弹幕网站，那你知道如何爬取b站实时弹幕吗？本文以王冰冰视频弹幕为例，向大家介绍Python爬虫实现自动化爬取b站实时弹幕的过程。 1、导入需要的库 import jieba # 分词 from wordcloud import WordCloud # 词云 from PIL import Image # 图片处理 import numpy as np # 图片处理 impor
websocket+netty实时视频弹幕交互功能（Java版）
z_ssyy的博客
05-31 1403
2021年了，还有不支持弹幕的视频网站吗，现在各种弹幕玩法层出不穷，抽奖，ppt都上弹幕玩法了，不整个弹幕都说不过去了，今天笔者就抽空做了一个实时视频弹幕交互功能的实现，不得不说这样的形式为看视频看直播，讲义PPT，抽奖等形式增加了许多乐趣。
小程序弹幕自动滚动实时更新数据功能
weixin_72436508的博客
01-16 1185
实现的原理就是动态数据，每次间隔一段时间渲染一条数据，每次渲染数据的时候会重新赋一个class，css属性会给初始值也就是在最右边，同时也会开始动画，6秒的时间，从最右边到最左边，而新数据渲染的时候，之前渲染的数据已经在往左边走了，所以两条数据会错开，就会有滚动的效果，如果要实现无限滚动，只需要用第二个动画，把循环次数改为infinite无限就行。这个时候我想到的是，动态数据，因为每次渲染一个新的数据的时候，都会重新给这个数据css，也就是都会从最右边隐藏的地方开始渲染。
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摔跤猫子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值