阿里云直播互动Web
官方文档:互动消息Web端集成方法_视频直播(LIVE)-阿里云帮助中心
以下是代码实现:
<!-- 引入阿里云互动文件 -->
<script src="https://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js"></script>
<script src="https://g.alicdn.com/code/lib/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script crossorigin="anonymous" src="https://g.alicdn.com/apsara-media-box/imp-interaction/1.3.1/alivc-im.iife.js"></script>
用户行为:进入离开直播间、发送礼物和普通信息
<divid="msgList"class="mt-4"ref="scrollContainer":style="{ maxHeight: getBotHeightChatList() }"
></div>
// 互动
let authData = ref();
async function getImToken() {getImTokenApi(uuid.value, liveId.value).then((res) => {authData.value = res.data;oneLoginBtnMet();});
}let userIdNum = ref("");
let groupIdNum = ref("");
const oneLoginBtnMet = async () => {try {// 登录await login(authData.value.liveImCode);// 加入群组await joinGroup(authData.value.groupId);// 直播间提示性文字showMessageInfo("亲爱的朋友们,欢迎来到财经直播间!踏入这扇财富知识的大门,不论你是理财新手,渴望开启投资之路,还是资深玩家,寻求更多机遇,这里都有你想要的。新朋友们别拘谨,我们会循序渐进带你领略财经世界;老朋友们,感谢一路相伴,今天精彩依旧。市场风云变幻,在这里,我们一同紧盯热点,剖析数据,解读政策。大家有任何疑问或见解,随时畅所欲言,让我们在互动交流中,挖掘财富密码,携手驰骋财经沙场,共赴财富增长之旅! ");} catch (error) {console.log("一键登录+加入群组", error.code, error.msg);}
};
let groupManager;
let messageManager;
let joinedGroupId;
// 登录
async function login(userId) {// 先初始化,注意别忘了加 awaitawait engine.init({appId: authData.value.appId, // 开通应用后可以在控制台上拷贝appSign: authData.value.appSign, // 开通应用后可以在控制台上拷贝});// 初始化成功,监听事件listenEngineEvents();// 获取登录信息groupIdNum.value = authData.value.groupId;userIdNum.value = authData.value.liveImCode;// 初始化成功再登录,注意别忘了加 awaitawait engine.login({user: {userId, // 当前app登录的用户iduserExtension: authData.value.userName, // 用户扩展信息,可以是头像、昵称等封装为json字符串},userAuth: {timestamp: authData.value.timestamp, // 服务端返回timestamp值nonce: authData.value.nonce, // 服务端返回nonce值role: authData.value.role, // 是否为admin角色,如果不需要可以设置为空token: authData.value.token, // 服务端返回token值},});// 必须确保已经初始化,否则会返回空值groupManager = engine.getGroupManager();messageManager = engine.getMessageManager();
}
// 加入群组
async function joinGroup(groupId) {if (!groupManager) {return;}await groupManager.joinGroup(groupId);joinedGroupId = groupId;// 有用户加入或离开直播间 listenGroupEvents();// 处理用户互动:1、礼物图片 2、礼物信息 3、普通文字 这个具体根据公司业务处理listenMessageEvents();
}function listenEngineEvents() {// 处理回调事件 AliVCIMEngineListenerProtocolengine.on("connecting", () => {console.log("connecting");});engine.on("connectfailed", (err) => {console.log(`connect failed: ${err.message}`);});engine.on("connectsuccess", () => {console.log("connect success");});engine.on("disconnect", (code) => {console.log(`disconnect: ${code}`);});engine.on("tokenexpired", async (cb) => {// 令牌过期 获取新的登录信息的代码getImToken();});
}let memberCountValue = ref(0);function listenGroupEvents() {if (!groupManager) {return;}// 在适当的时机(例如进入房间后,且完成登录后)添加群组操作事件监听器groupManager.on("exit", (groupId, reason) => {// 退出群组// showMessage(`group ${groupId} close, reason: ${reason}`);});groupManager.on("memberchange", (groupId, memberCount, joinUsers, leaveUsers) => {if (joinUsers.length != 0) {showMessageInfo(`用户 ${joinUsers[0].userId} 加入直播间`);}if (leaveUsers.length != 0) {showMessageInfo(`用户 ${leaveUsers[0].userId} 离开直播间`);}// numberDummy 虚拟人数// memberCount 直播间真实人数// 有用户进入或离开直播间 人数要更新let numberDummy = Number(liveDetail.value.dummy);let memberCountValueNew = numberDummy + memberCount;memberCountValue.value = memberCountValueNew;});groupManager.on("mutechange", (groupId, status) => {console.log(groupId, "groupId");console.log(status, "status");// 群组的禁言状态发生了变化// showMessage(`有用户被禁言!`);// 禁言这里后端单独写了websocket接口处理});groupManager.on("infochange", (groupId, info) => {// 有人离开了群组showMessage(`group ${groupId} info change`);});
}function showMessage(text) {$("#msgList").append(`<div class="mb-2 msgLi" ref="msgLi">${text}</div>`);scrollToBottom();
}function showMessageInfo(text) {$("#msgList").append(`<div class="mb-2 msgLi infoText" ref="msgLi">${text}</div>`);danmus.value.splice(danmus.value.length, 0, text);scrollToBottom();
}const scrollContainer = ref(null);
const msgLi = ref(null);
// 消息滚动条始终保持在最底部
function scrollToBottom() {if (scrollContainer.value) {scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;}
}
相关文章:
阿里云直播互动Web
官方文档:互动消息Web端集成方法_视频直播(LIVE)-阿里云帮助中心 以下是代码实现: <!-- 引入阿里云互动文件 --> <script src"https://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js"></script> <script src&quo…...
python【输入和输出】
Python 有三种输出值的方式: 表达式语句print() 函数使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用。 ① 将输出的值转成字符串,可以使用 repr() 或 str() 函数来实现: str(): 函数返回一个用户易…...
网络安全建设方案,信息安全风险评估报告,信息安全检测文档(Word原件完整版)
一、概述 1.1工作方法 1.2评估依据 1.3评估范围 1.4评估方法 1.5基本信息 二、资产分析 2.1 信息资产识别概述 2.2 信息资产识别 三、评估说明 3.1无线网络安全检查项目评估 3.2无线网络与系统安全评估 3.3 ip管理与补丁管理 3.4防火墙 四、威胁细…...
nexus搭建maven私服
说到maven私服每个公司都有,比如我上一篇文章介绍的自定义日志starter,就可以上传到maven私服供大家使用,每次更新只需deploy一下就行,以下就是本人搭建私服的步骤 使用docker安装nexus #拉取镜像 docker pull sonatype/nexus3:…...
Redis为 List/Set/Hash 的元素设置单独的过期时间
一.业务简介 我们知道,Redis 里面暂时没有接口给 List、Set 或者 Hash 的 field 单独设置过期时间,只能给整个列表、集合或者 Hash 设置过期时间。 这样,当 List/Set/Hash 过期时,里面的所有 field 元素就全部过期了。但这样并不…...
高比例压缩:Linux 中的压缩命令与技巧
文章目录 高比例压缩:Linux 中的压缩命令与技巧1. 压缩格式的选择2. gzip 命令示例:压缩文件示例:解压文件 3. bzip2 命令示例:压缩文件示例:解压文件 4. xz 命令示例:压缩文件示例:解压文件 5.…...
73.矩阵置零 python
矩阵置零 题目题目描述示例 1:示例 2:提示: 题解思路分析Python 实现代码代码解释提交结果 题目 题目描述 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例…...
工业互联网项目开发工作流及各阶段核心关注点
工业互联网项目开发全流程V3.0 工业互联网项目开发工作流程及核心问题 一、需求分析 1、共享平台需求分析 这个平台要解决什么问题? 这个平台的用户群体是谁? 这个平台应该具备哪些主要功能? 这个平台的使用场景是什么? 这个平…...
简单易用的PDF工具箱
软件介绍 PDF24 Creator是一款简单易用的PDF工具箱,而且完全免费,没有任何功能限制。既可以访问官网在线使用各种PDF工具,也可以下载软件离线使用各种PDF工具。 软件功能 1、PDF转换 支持将多种文件格式(Word、PowerPoint、Exc…...
氧化铌在光学领域的独特贡献与应用拓展-京煌科技
在当今科技日新月异、各领域不断寻求突破创新的时代背景下,众多材料因其独特的性能而备受关注,氧化铌便是其中极具代表性的一种。作为铌的氧化物,其化学式为 Nb₂O₅,以无色或白色固体的形态存在,正凭借着优良的热稳定…...
EXCEL技巧
1. EXCEL技巧 1.1. 截取表格内某个字符之前的所有字符 1.1.1.样例 在单元格内输入函数: # 截取A1单元格内“分”字符左边的所有字符 LEFT(A1,FIND("分",A1)-1)1.1.2.截图...
Java 将RTF文档转换为Word、PDF、HTML、图片
RTF文档因其跨平台兼容性而广泛使用,但有时在不同的应用场景可能需要特定的文档格式。例如,Word文档适合编辑和协作,PDF文档适合打印和分发,HTML文档适合在线展示,图片格式则适合社交媒体分享。因此我们可能会需要将RT…...
shell的变量
在程序设计语言中,变量是一个非常重要的概念。也是初学者在进行Shell程序设计之前必须掌 握的一个非常基础的概念。只有理解变量的使用方法,才能设计出良好的程序。本节将介绍Shell中变量 的相关知识。 1、什么是变量 顾名思义,变量就是程序…...
【STM32】利用SysTick定时器定时1s
1.SysTick简单介绍 SysTick定时器是一个24位的倒计数定时器,当计数到0时,将从RELOAD寄存器中自动重装载定时初值,开始新一轮计数。 SysTick定时器用于在每隔一定的时间产生一个中断,即使在系统睡眠模式下也能工作。 关于SysTic…...
halcon3d 如何计算平面法向量!确实很简单
这个问题其实一直困扰了我很长时间,之前是怎么算的呢 对于一个平面,我会先求它的fit_primitives_object_model_3d去将它拟合,接下来用surface_normals_object_model_3d 算子生成它的法线,后用get_object_model_3d_params (ObjectModel3DNormals, ‘point_normal_x’, GenP…...
计算机网络_物理层
2.1物理层的基本概念 传输媒体 导引型传输媒体 双绞线 同轴电缆 光纤 非导引型传输媒体 微波通信 2~40GHz 物理层协议的主要任务 机械特性 电器特性 功能特性 过程特性 物理层概述 物理层考虑是怎样才能在连接各种计算机的传输媒体上传输数据比特流…...
Springboot——钉钉(站内)实现登录第三方应用
文章目录 前言准备1、创建钉钉应用,并开放网页应用2、配置网页应用各项参数发布版本 前端改造后端逻辑1、获取应用免登录 Access_token2、通过免登录 Access_token 和 Auth_Code 获取对应登录人信息 注意事项 前言 PC端的钉钉中工作台,增加第三方应用&a…...
libusb学习——简单介绍
文章目录 libusb 简介libusb 编译libusb 源码目录介绍核心代码文件平台支持例子 API使用libusb初始化和去初始化libusb设备处理和枚举libusb 杂项libusb USB描述符libusb 设备热插拔事件通知libusb 异步设备I/Olibusb 同步设备I/Olibusb 轮询与定时 libusb 涉及技术参考 libusb…...
Vue进阶(贰幺叁)node 版本切换
文章目录 一、前言1.1 什么是nvm? 二、查看已安装好的 node 版本三、下载 node 版本四、切换 node 版本五、查看在用 node 版本六、拓展阅读 一、前言 项目开发阶段,会涉及多node版本切换应用场景,可应用nvm实现node版本切换。 1.1 什么是nvm? nvm是…...
[AI] 大模型提示词:理解与高效使用指南
随着大模型(如GPT、Claude、PaLM等)在各领域的应用逐步普及,**提示词(Prompt)**的重要性愈发凸显。提示词作为与大模型交互的主要方式,不仅直接影响生成结果的质量,还决定了模型在特定任务中的适…...
关于linux网桥(Linux Bridge)的一些个人记录
文章目录 1. Linux Bridge简述2. 网桥创建创建配置持久化在Debian/Ubuntu系统上:在CentOS/RHEL系统上: 启用和验证 3. 关于linux网桥不转发ip帧的问题原因解决配置持久化 4. 查看网桥学习交换表手动添加或删除条目添加条目删除条目 配置静态条目设置条目…...
黑马天机学堂学习计划模块
核心功能 系统设计思路 代码分析 1. 学习记录管理 • 存储学习记录到 Redis: 利用 Redis 缓存学习记录,减少频繁的数据库访问。 public void writeRecordCache(LearningRecord record) {String key String.format("LEARNING:R…...
【华为云开发者学堂】基于华为云 CodeArts CCE 开发微服务电商平台
实验目的 通过完成本实验,在 CodeArts 平台完成基于微服务的应用开发,构建和部署。 ● 理解微服务应用架构和微服务模块组件 ● 掌握 CCE 平台创建基于公共镜像的应用的操作 ● 掌握 CodeArts 平台编译构建微服务应用的操作 ● 掌握 CodeArts 平台部署微…...
小R的蛋糕分享
小R的蛋糕分享 问题描述 小R手里有一个大小为 n 行 m 列的矩形蛋糕,每个小正方形区域都有一个代表美味度的整数。小R打算切割出一个正方形的小蛋糕给自己,而剩下的部分将给小S。她希望两人吃的部分的美味度之和尽量接近。 我们定义小R吃到的部分的美味度…...
24级 秋季学期期末考试安排(专升本)
1.删除 delete 2.耐心 patience 3.设计师 designer 4.身体的 physical 5.材料,物质 material 6.极其,极端 extremely 7.摩托车 motorbike 8.城市的 urban 9.意识 awareness 10.事故 accident 16.choose B:挑选 17.prove C:证明 1…...
点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)
文章目录 1. tabBar 的跳转方式2. tabBar 跳转的特点3. 你的配置分析4. 生命周期触发情况5. 总结 很多人不明白什么是第一次加载,两种情况讨论,第一种情况假设我是开发者,第一次加载就是指点击微信开发者工具上边的编译按钮,每点击…...
Web枚举:深入了解目标应用系统
Web枚举是渗透测试中重要的第一步,旨在全面收集目标系统的信息,以便后续攻击载荷的构建更具针对性和效率。本文将详细讨论如何通过各种方法识别目标Web应用的技术栈,并提取关键信息。 1. 识别目标系统的技术栈 技术栈指Web应用所依赖的技术组…...
【动态规划篇】欣赏概率论与镜像法融合下,别出心裁探索解答括号序列问题
本篇鸡汤:没有人能替你承受痛苦,也没有人能拿走你的坚强. 欢迎拜访:羑悻的小杀马特.-CSDN博客 本篇主题:带你解答洛谷的括号序列问题(绝对巧解) 制作日期:2025.01.10 隶属专栏:C/C题…...
Windows Docker 安装
使用别人写好的软件/工具最大的障碍是什么——必然是配环境。配环境带来的折磨会极大地消解你对软件、编程本身的兴趣。虚拟机可以解决配环境的一部分问题,但它庞大笨重,且为了某个应用的环境配置好像也不值得模拟一个全新的操作系统。 Docker 的出现让…...
Spring 设计模式:经典设计模式
Spring 设计模式:经典设计模式 引言 Spring 框架广泛使用了经典设计模式。 这些模式在 Spring 内部发挥着重要作用。 通过理解这些设计模式在 Spring 中的应用,开发者可以更深入地掌握 Spring 框架的设计哲学和实现细节。 经典设计模式 控制反转&am…...
vscode支持ssh远程开发
文章目录 一、生成ssh使用的公钥/密钥对二、使用vscode通过ssh连接服务器1.安装插件2.配置文件3.连接服务器4.新建文件夹,存放不同的任务 三、使用scp命令与服务器互传文件、文件夹1.检查Windows 系统是否支持scp命令2.在Windows系统本地的电脑向服务器传输文件、文…...
ssh2-sftp-client和ssh2配合使用js脚本快速部署项目到服务器
有时候因为服务器不能实现github或者gitlab的自动部署服务,所以就需要使用脚本来实现自动部署,可以省时省力,一劳永逸。这里就使用ssh2-sftp-client和ssh2来实现,即便是需要sudo权限,也是可以的。 1.先将本地打包后的…...
CODESYS MODBUS TCP通信(禾川Q1 PLC作为MODBUS TCP从站)
禾川Q1 PLC MODBUS TCP 通信(PLC作为MODBUS TCP通信主站) 禾川Q1 PLC MODBUS TCP通信(CODESYS平台完整配置+代码)-CSDN博客文章浏览阅读28次。MATLAB和S7-1200PLC水箱液位高度PID控制联合仿真(MODBUSTCP通信)_将matlab仿真导入plc-CSDN博客文章浏览阅读722次。本文详细介绍了如…...
2025年第三届“华数杯”国际大学生数学建模竞赛A题题目
问题A:他能游得更快吗? 背景介绍 在2024年巴黎奥运会上,中国游泳运动员潘展乐凭借出色的表现成为全球瞩目的焦点。年仅19岁的他在男子100米自由泳比赛中以46秒40 的成绩夺冠,并创造了自己保持的世界纪录。在男子4100米混合泳接力…...
一、智能体强化学习——强化学习基础
1.1 强化学习与深度学习的基本概念 1.1.1 强化学习的核心思想 什么是强化学习? 强化学习(Reinforcement Learning, RL):指在与环境(Environment)的反复交互中,智能体(Agent&#x…...
USB学习——基本概念
文章目录 USB(Universal Serial Bus)概述USB系统的描述USB总线传输方式USB的拓扑结构 USB的连接模型USB控制器及分类USB描述符USB 端点USB枚举过程USB 四种传输类型USB 事务批量传输(Bulk)中断传输(Interrupt)等时传输(Isochronous)控制传输(Control)端点…...
vue3 初体验
git代码git clone https://github.com/kailong321200875/vue-element-plus-admin.git 后端自己写python,Django架构 1.报错:跨域,代理的方式解决 server: {port:4000, ##前端启动端口proxy: {// 选项写法/api: {target: http://127.0.0.1…...
CAPL语法基础
CAPL语法基础 目录 CAPL语法基础1. 引言2. 数据类型、变量与常量2.1 数据类型2.2 变量2.3 常量2.4 案例1:使用变量和常量计算圆的面积 3. 运算符与表达式3.1 算术运算符3.2 关系运算符3.3 逻辑运算符3.4 位运算符3.5 案例2:使用运算符实现简单的逻辑判断…...
代码的形状:重构的方向
大概2周前写了一篇《代码的形状:从外到内的探索与实践》 涵树:代码的形状:从外到内的探索与实践 觉得这个话题还可以继续,它是一个从无形到有形的过程,而这个过程感觉就是王阳明先生说的“心即理”的探寻过程。 我讨论代码的形状ÿ…...
144.《在 macOS 上安装 Redis》
文章目录 在 macOS 上安装 Redis先决条件安装在前台启动和停止 Redis使用 launchd 启动和停止 Redis连接到 Redis后续步骤Next steps redis 官方安装教程是英文,本文只是将英文文档翻译成中文,方便大家阅读 redis官方安装教程:download redis…...
使用mysql报Communications link failure异常解决
背景 线上使用polarDB,基于mysql(5.7),架构为springbootmybatisplusdurid连接池,部分业务场景涉及大表更新和查询操作,在查询慢sql且超过一定时间时就会报出"Communications link failure"异常,主要体现在界…...
搭建一个fastapi的项目,调用ollama服务
1. 项目结构 my_project/ │ ├── app/ │ ├── main.py # FastAPI应用的入口 │ ├── services/ # 包含服务逻辑 │ │ └── ollama_service.py │ ├── models/ # 定义数据模型 │ │ └── response.py │ ├─…...
【update 更新数据语法合集】.NET开源ORM框架 SqlSugar 系列
系列文章目录 🎀🎀🎀 .NET开源 ORM 框架 SqlSugar 系列 🎀🎀🎀 文章目录 系列文章目录前言 🍃一、实体对象更新1.1 单条与批量1.2 不更新某列1.3 只更新某列1.4 NULL列不更新1.5 无主键/指定列…...
Elasticsearch—索引库操作(增删查改)
Elasticsearch中Index就相当于MySQL中的数据库表 Mapping映射就类似表的结构。 因此我们想要向Elasticsearch中存储数据,必须先创建Index和Mapping 1. Mapping映射属性 Mapping是对索引库中文档的约束,常见的Mapping属性包括: type:字段数据类…...
C#进阶-在Ubuntu上部署ASP.NET Core Web API应用
随着云计算和容器化技术的普及,Linux 服务器已成为部署 Web 应用程序的主流平台之一。ASP.NET Core 作为一个跨平台、高性能的框架,非常适合在 Linux 环境中运行。本篇博客将详细介绍如何在 Linux 服务器上部署 ASP.NET Core Web API 应用,包…...
执行这个composer require topthink/think-mongo 报错
安装tp5 mongodb扩展 执行这个composer require topthink/think-mongo 报错 解决方法: 1 把composer.json里的"overtrue/wechat": "4.2.11",注释掉再执行 2 composer require topthink/think-mongo1.* 安装mongo的1版本...
大语言模型训练数据集格式
1. SFT(有监督微调)的数据集格式 对于大语言模型的训练中,SFT(Supervised Fine-Tuning)的数据集格式可以采用以下方式: 输入数据:输入数据是一个文本序列,通常是一个句子或者一个段…...
stringRedisTemplate.execute执行lua脚本
stringRedisTemplate.execute执行lua脚本 1. 引入必要依赖 确保项目中已经引入了Spring Data Redis相关依赖,例如在 Maven 项目中,一般会有如下依赖(版本号根据实际情况调整): <dependency><groupId>or…...
鸿蒙UI(ArkUI-方舟UI框架)
参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-layout-development-overview-V13 ArkUI简介 ArkUI(方舟UI框架)为应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能ÿ…...
Linux-蓝牙协议
SPP (Serial Port Profile): 串口协议(SPP)是一个蓝牙配置文件,允许设备通过蓝牙模拟传统的串行端口通信。它通常用于无线串口连接,允许设备如计算机和外设(例如打印机或条形码扫描器)之间进行数据传输。A…...