互联网基建成果,快速实现一个clubhouse要多久

最近国外的一款基于语音的社交软件clubhouse掀起了一股热潮,尤其是在Eleon Musk的带动下,整个互联网圈内人都在第一时间抢先体验。

不管它为什么会火,肯定不是技术上有什么特别的优势。随着整个互联网技术生态的不断发展,互联网基础建设的不断完善,想快速实现一个产品,还是有很多的方案可以选择。

而今天给大家带来的是Github上的一个clubhouse的开源实现。

NesHouse 是一个基于 Agora、LeanCloud 服务,使用 Alpine.js 、Bulma Css、NES.css 构建的前端项目,这个项目实现了一套基于 NES 风格的 clubhouse,你可以使用 NESHouse 来创建自己的线上直播间,也可以将其分享出去,邀请别人一起参与讨论。

特性

  • 多聊天直播间支持

  • 管理员权限

  • 多主播同时发言

  • 观众申请发言

  • 管理员禁言主播

  • 生成分享链接

界面

依赖服务

  • LeanCloud 国际版

  • Agora.io 声网 +(非必需)Vercel

如何使用

使用流程

  1. 注册一个 LeanCloud 国际账户,并创建一个项目,用于后续的项目配置

  2. 注册一个 Agora 声网账号,并创建一个项目,获取 AppID。创建项目时请选择调试模式,仅 APPID 鉴权

  3. 从 LeanCloud 的应用后台 - 你使用的应用 - 设置 - 应用 Keys 中找到 AppID 和 AppKey,将其记录下来,以备后用。

  4. 从 LeanCloud 的应用后台 - 你使用的应用 - 存储 - 服务设置 中启用 Live Query

  5. 在 LeanCloud 的应用后台 - 你使用的应用 - 存储 - 结构化数据 ,并创建一个名为 RoomUser 的 Class。

  6. 将上面记录的声网的应用 AppID 和 LeanCloud 的 AppID 和 APPkey 填写到 js/config.js 顶部的配置中。

  7. 将修改好的文件部署到你自己的服务器上,并配置域名指向。

配置说明

js/config.js

const AVAPPID = "" // LeanCloud AppID
const AVAPPKEY = "" // LeanCloud AppKey
const BASEURL = "" // 最终网页所在的路径,生成的分享链接会基于这个地址产生
const DEFAULT_TEXT = "Please contact <a href='mailto:bestony@linux.com'>bestony@linux.com</a> to Learn more" // 页面顶部展示的文字
const AGORAAPPID = "" // 声网服务的 AppID

Demo

  • 创建房间: https://neshouse.com/admin.html

  • 默认主页: https://neshouse.com/admin.html

Demo 使用流程

  1. 在 域名/admin.html 中输入房间名 & 用户昵称,创建一个新的房间

  2. 点击下方的 Log in to chat room as Administrator 以管理员身份登陆房间

  3. 复制输入框内的链接,分享给你的朋友,邀请他们加入房间。

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

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

相关文章

阿里帝国到底有多庞大

马云&#xff0c;男&#xff0c;1964年9月10日生于浙江省杭州市&#xff0c;祖籍浙江省嵊州市谷来镇&#xff0c; 阿里巴巴集团主要创始人&#xff0c;现担任阿里巴巴集团董事局主席、日本软银董事、TNC中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事…

如何搭建一个内部组件共享平台

如今前端越来越趋于组件化的开发方式&#xff0c;最大的益处就是UI页面和逻辑的共用。在开发者的眼里&#xff0c;如果你打开一个网站&#xff0c;组件化的开发方式会让你看起来像这个样子&#xff1a;逻辑功能上我们会封装成一个库&#xff0c;然后NPM发布到公共仓库上&#x…

不要讨厌HATEOAS

或我如何学会不再担心和爱HATEOAS REST已成为实现Web服务的事实上的解决方案&#xff0c;至少已成为一种流行的解决方案。 这是可以理解的&#xff0c;因为REST在使用HTTP规范时提供了一定程度的自我文档。 它经久耐用&#xff0c;可扩展&#xff0c;并提供了其他一些理想的特…

前端如何进行日志驱动开发

日志在开发过程中的作用自不必说&#xff0c;一旦程序出现问题&#xff0c;我们首先想到的是通过日志监控去追查。 好的日志可以通过应用程序执行的历史记录模拟出用户在使用程序的时候操作的完整过程。 想知道发生了什么 为了便于我们分析程序哪里出现问题&#xff0c;我们…

消息钩子学习工程

前奏近来一直在自学Windows Hook相关的知识&#xff0c;已经尝试多种注入方式。尤其对消息钩子方式很感兴趣&#xff0c;因为看到Spy能够截获系统中绝大多数应用的消息流&#xff0c;就很想知道它的工作原理&#xff0c;打算制作属于自己的Spy。消息钩子简介&#xff1a;消息钩…

[Angular] 笔记 8:list/detail 页面以及@Input

1. list 页面 list/detail 是重要的 UI 设计模式。 vscode terminal 运行如下命令生成 detail 组件&#xff1a; PS D:\Angular\my-app> ng generate component pokemon-base/pokemon-detail --modulepokemon-base/pokemon-base.module.ts CREATE src/app/pokemon-base/p…

javaone_JavaOne 2012 – 2400小时! 一些建议

javaone您可能已经看到JavaOne 2012 Content Catalog在线。 计划委员会经过数周的紧张工作&#xff0c;对每个提案进行了分类&#xff0c;审查&#xff0c;评分和讨论&#xff0c;我们终于设法为您设置了&#xff08;希望如此&#xff09;有趣的组合。 整整105天或2400小时&…

推荐几个最近Star过的Github仓库

平时逛Github的时候&#xff0c;总是顺手对一些自己认为好的仓库给个 Star&#xff0c;一是对作者的鼓励&#xff0c;二来推荐给关注自己的人&#xff08;首页动态可见&#xff09;。 下面列举了一些我平时 Star 过的仓库&#xff0c;顺便也推荐给我的读者。 Front-End Checkli…

使用Gatling + Gradle + Jenkins Pipeline为您的JAX-RS(和JavaEE)应用程序进行连续压力测试...

在这篇文章中&#xff0c;我将解释如何使用Gatling项目为您的JAX-RS Java EE端点编写压力测试&#xff0c;以及如何将它们与Gradle和Jenkins Pipeline集成&#xff0c;因此&#xff0c;除了进行简单的压力测试外&#xff0c;您还可以使用以下方法&#xff1a; 连续的压力测试&a…

使用 VuePress 搭建一个自己的知识文档

最近准备对前端知识做一个梳理&#xff0c;将自己的平时遇到的问题和解决方案形成一个知识文档。本文记录了搭建 VuePress 的主要过程&#xff0c;同时也提供了部分自定义的配置&#xff0c;示例地址&#xff1a;http://doc.i-fanr.com 环境搭建 VuePress 有着比较完善的中文文…

金三银四跳槽面试季,我整理前端知识做了个网站

每年的金三银四&#xff0c;都将迎来求职面试的一个高峰期&#xff0c;为什么会有那么多的求职需求&#xff1f;多是因为以下几个来源&#xff1a;已拿 offer 等年终奖的&#xff1a;年前已经找到机会&#xff0c;领了年终奖辞职要到新公司报到的临时起意要辞及裸辞的&#xff…

hadoop的Map阶段的四大步骤

深入理解map的几个阶段是怎样执行的。转载于:https://www.cnblogs.com/xubiao/p/7846080.html

小程序 Typescript 最佳实践

小程序结合TypeScript开发&#xff0c;如果用第三方框架&#xff0c;首选Taro已完美支持。但是如果你选择原生开发&#xff0c;那么下面的这份实践可能会帮到你。小程序 Typescript 最佳实践使用 gulp 构建&#xff08;支持 typescript 和 less/sass/scss&#xff09;使用 type…

这款电脑升降桌美到我了

一直在寻觅一款集颜值与功能于一体的电脑升降桌&#xff0c;这款乐歌 E5 电动桌终于成功地满足了我的需求。有黑白两款颜色可选&#xff0c;但其中白色钢化玻璃版常适合用来作为白色系桌面的基础——四周圆角设计&#xff0c;再加上碳素钢的桌体框架&#xff0c;整体非常有质感…

分享一个引起极度舒适的工作桌面

干净整洁的桌面或许不能带给你工作效率的提升&#xff0c;但一定会给你带来愉悦的心情。长期码字一定需要一个升降桌&#xff0c;可自由地调节高度&#xff0c;以保证舒适的坐姿和灵活的视角。另外坐久了&#xff0c;累了还能站立工作一会儿。有了外显之后&#xff0c;如果不需…

canvas绘制多边形

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>canvas绘制多边形</title> </head> <body> <canvas id"canvas" style"border: 1px solid darkcyan;" width…

ehcache rmi_EhCache复制:RMI与JGroups

ehcache rmi最近&#xff0c;我正在研究一种需要复制缓存的产品。 缓存提供程序已经确定-EhCache&#xff0c;剩下的就是有关传输的问题。 哪一个是最佳选择&#xff1f; 这里的最佳选择是指性能更好的选择。 仅在两个可用传输之间进行了性能评估-JGroups和RMI&#xff0c;对其…

Element Table 可以实现哪些常见的有用的功能

最近项目中频繁使用 table 功能&#xff0c;因为 UI 框架使用的又是 Element UI&#xff0c;于是总结下在 Element 下 el-table 组件使用技巧。1.行背景色table 组件提供了 row-style 属性&#xff0c;说明&#xff1a;行的 style 的回调方法&#xff0c;也可以使用一个固定的 …

如果在这样的环境中写代码,会不会很高效

桌面环境分享系列又来了。我会把平时看到的好的桌面布置分享给大家&#xff0c;帮助大家在桌面整理和打造方面提供一些新的想法和创意。如何评价一个开发桌面的好坏&#xff0c;首先一定要清爽整洁&#xff0c;该有的家伙事儿一定要有。不是要看上去要有多高大上&#xff0c;重…

Vue 页面如何监听用户预览时间

最近的业务中涉及到这样一个需求&#xff0c;在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed&#xff0c;分别在其中加入开始计时和清除计时的逻辑&#xff0c;通过后台的接口上报对应…