最近国外的一款基于语音的社交软件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. 复制输入框内的链接,分享给你的朋友,邀请他们加入房间。

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

  1. 大数据早报:甲骨文公司投资4300万美元在总部建高中 18项全球互联网领先科技成果公布中国占6成 (12.6)

    数据早知道,上36dsj看早报! 来源36大数据,作者:奥兰多 『融资』用大数据+AI帮助患者解决 "找医生难"问题,「妙寻医生」获数百万元天使轮融资 近日,寻医平台妙寻医生已完成 ...

  2. 大数据早报:甲骨文公司投资4300万美元在总部建高中 18项全球互联网领先科技成果公布中国占6成 (12.6)...

    数据早知道,上36dsj看早报! 来源36大数据,作者:奥兰多 『融资』用大数据+AI帮助患者解决 "找医生难"问题,「妙寻医生」获数百万元天使轮融资 近日,寻医平台妙寻医生已完成 ...

  3. 《快速搞垮一个技术团队的20个“必杀技”》

    来源| 技术领导力(ID:jishulingdaoli) 前几天老K组局,约了几位沪上互联网公司技术大佬,共同研讨一个话题:如何快速搞垮一个技术团队?你没看错,这是一直困扰我的问题. 聊下来发现,这个 ...

  4. 互联网的中层管理,一个庞大且易脆的群体

    这几年,互联网行业开始慢下来了.前阵子,华为被曝出裁掉了1100 余中层管理者. 即使后来任正非发表了一封公开信,表示了不知情和不满.但是,当企业裁员的大刀挥向中层管理时,似乎在透露着某些端倪. 所谓 ...

  5. 2021年14项世界互联网领先科技成果发布

    来源:桐乡发布 9月26日下午,由国家互联网信息办公室.浙江省人民政府主办的2021年"世界互联网领先科技成果发布活动"在乌镇互联网国际会展中心乌镇厅举行.华为鸿蒙操作系统.北斗卫 ...

  6. 震撼!15项世界互联网领先科技成果发布,将对你的生活产生什么影响?

    来源:浙江发布   10月20日下午,世界互联网领先科技成果发布活动在乌镇互联网国际会展中心举行. 今年6月,世界互联网大会组委会向全球互联网企业.科研机构.高等院校以及个人征集全球互联网领域的领先科 ...

  7. 如何快速搭建一个属于自己的网站?

    随着互联网的发展,网站建设的技术也越来越成熟,建站的方式也愈加丰富和多样.同时,互联网时代,无论是组织还是个人,无论是大企业还是小社团,拥有一个属于自己的网站,必不可少. 可是,不同的组织.不同的人, ...

  8. 独家秘技||如何快速入门一个陌生知识领域?

    一.人生就是不断学习和探索的过程 前几天看到一篇文章--<做一件事如何突破「擅长」达到「精通」>,我却想到写这篇如何快速入门一个全新的陌生的知识领域的经验文章. 而最近买了一本书<高 ...

  9. 创建微服务架构的步骤_如何快速搭建一个微服务架构?

    原标题:如何快速搭建一个微服务架构? 微服务火了很久,但网上很少有文章能做到成熟地将技术传播出来,同时完美地照顾"初入微服务领域人员",从 0 开始,采用通俗易懂的语言去讲解微服务 ...

最新文章

  1. 使用多线程还是用IO复用select/epoll? epoll 或者 kqueue 的原理是什么?
  2. 【重构】重构概要--六大重构模块
  3. iOS-Hello World
  4. 清华博士告诉你 “0Ω电阻”的系列应用
  5. rxjava 被观察者_RxJava:从未来到可观察
  6. 查看Linux上程序或进程用到的库
  7. notepad编译java_Notepad++直接编译运行java代码的具体步骤
  8. CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
  9. EDG夺冠,我用Python分析一波:粉丝都炸锅了
  10. php set get 作用_浅谈PHP拦截器之__set()与__get()的理解与使用方法
  11. android rxbus github,RxBus的实现及简单使用
  12. QAC/QAC++静态软件代码测试分析-试用工具
  13. 投资项目经济效益敏感性分析
  14. 计算机毕业设计SSM超市商品管理系统【附源码数据库】
  15. Excel·VBA按行拆分工作表
  16. VS报错: fatal error LNK1120: 1 个无法解析的外部命令
  17. python boxplot 多组_Matlab boxplot for Multiple Groups(多组数据的箱线图)
  18. uni-app中@tap和@click的区别
  19. linux统计大日志文件字符次数统计接口调用量
  20. JS toFixed的使用误差,银行家算法(四舍六入五取偶)实现

热门文章

  1. E1倒换保护设备知识详解
  2. 光纤中继器的防雷及日常维护方法介绍
  3. 【渝粤教育】电大中专建筑力学 (4)作业 题库
  4. 【渝粤教育】广东开放大学 PHP动态网站设计 形成性考核 (48)
  5. 【渝粤教育】广东开放大学 文化经济实务 形成性考核 (49)
  6. CC1310在868MHz的电路设计
  7. python dict初始化大小_在Python中初始化/创建/填充Dict的Dict
  8. python3语音识别模块_零基础教你玩转语音控制,学习语音控制技术,打造智能生活很简单...
  9. vue数组中对象属性变化页面不渲染问题
  10. python多线程编程(3): 使用互斥锁同步线程