互联网基建成果,快速实现一个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中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事…

resteasy 统一异常_RESTEasy教程第3部分:异常处理

resteasy 统一异常在开发软件应用程序时&#xff0c;异常处理是显而易见的要求。 如果在处理用户请求时发生任何错误&#xff0c;我们应该向用户显示一个错误页面&#xff0c;其中包含详细的异常消息&#xff0c;错误代码&#xff08;可选&#xff09;&#xff0c;更正输入和重…

哪些网站在+1s后有神奇的功能

1s 有些网站&#xff0c;当我们给它 1s 时&#xff0c;会有意想不到的奇效。 github 1s 在 GitHub 域名后面加 1s 可以直接使用 vscode online 打开仓库代码&#xff0c;例如 https://github1s.com/fantingsheng/front-end https://github1s.com/fantingsheng/front-end^^ …

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

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

标准C程序设计七---46

Linux应用 编程深入 语言编程标准C程序设计七---经典C11程序设计 以下内容为阅读&#xff1a; 《标准C程序设计》&#xff08;第7版&#xff09; 作者&#xff1a;E. Balagurusamy&#xff08;印&#xff09;&#xff0c; 李周芳译 清华大学出版社…

不要讨厌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 有着比较完善的中文文…

代码重构学习

文章&#xff1a;浅谈重构中踩过的坑 文章中有一个很好的&#xff0c;优化if else多分支判断的例子&#xff0c;将方法抽象出来&#xff0c;根据不同场景实现抽象类&#xff0c;然后用写一个工厂类&#xff0c;一个工厂方法&#xff0c;通过传入类型&#xff0c;进行实例化。 很…

pta 朋友圈

某学校有N个学生&#xff0c;形成M个俱乐部。每个俱乐部里的学生有着一定相似的兴趣爱好&#xff0c;形成一个朋友圈。一个学生可以同时属于若干个不同的俱乐部。根据“我的朋友的朋友也是我的朋友”这个推论可以得出&#xff0c;如果A和B是朋友&#xff0c;且B和C是朋友&#…

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

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

web框架和后台开发_Web开发框架–第1部分:选项和标准

web框架和后台开发在我的公司&#xff0c;我们正在评估未来几年将使用哪种Web开发框架。 自上次评估以来&#xff0c;我们一直在使用由Struts 2驱动的Java应用服务器作为MVC&#xff0c;将Tiles作为模板引擎&#xff0c;将jQuery用于Javascript awesomennes&#xff0c;将DWR用…

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…

DIY注释

从Java 5开始&#xff0c;Java中出现了注释。 我想做一个自己的注释&#xff0c;只是为了看看需要什么。 但是&#xff0c;我发现它们只是接口。 有擦 接口后面没有牙。 必须执行一些代码。 我认为这是橡胶行之有效的方法&#xff0c;我真的找到了解决方法。 首先&#xff0c…