V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
zhng920823

可视频 可随意创建的聊天室 聊天内容前端加密 服务端看不到

  •  
  •   zhng920823 · Aug 19, 2024 · 2602 views
    This topic created in 619 days ago, the information mentioned may be changed or developed.

    自适应移动设备和电脑浏览器

    • 电脑上就是下面的截图的样子.
    • 手机上会隐藏左边一列.

    支持私聊和视频

    • 点对应的昵称, 昵称变色, 进入私聊模式
    • 点 Group: N 返回群聊模式
    • 房间只有两个人的时候按电话按钮发起视频呼叫, 房间两人以上时需先进私聊模式才能视频.
    • 在较高版的浏览器上, 视频支持弹出画中画窗口, 可边视频边干别的.

    聊天内容包括视频通话的协商内容均加密后传输, 服务端看不到.

    • 加密密钥是通过 组名 + 密码 + saltA, 用特殊步骤计算出来的.
    • 聊天室的 ID 是用 组名 + 密码 + saltB, hash 出来的.
    大致这样的:
    Key = keygen(funcA(hashA(group_name, group_pass, salt_A)));
    RoomId = hashB(group_name, group_pass, salt_B)));
    服务端只知道 RoomId, 客户端知道 RoomId 和 key, 且无法通过 RoomId 推导 key
    所以服务端和运营商不知道聊天内容, 除非输入法或设备本身被...
    前端部分代码量不算多, 可用工具或 AI 分析并验证上述说法.
    

    没有预设的聊天室或公开的聊天室列表

    • 输入任意的 组名&密码&昵称 即可创建聊天室, 进聊天室前可获取分享链接.
    • 分享链接可任意包含 组名&密码&昵称, 如链接不含密码, 则需用其他方式传递密码.
    • 相同的 组名&密码 组合意味着相同的聊天室, 相同组名+不同密码则为不同聊天室.
    • 分享链接给朋友即可体验私密聊天, 如没有朋友可新开浏览器 tab 或用其它设备体验.

    还有什么别的用途

    • 不同设备之间传递分享文本内容.
    • 把手机或别的设备变成监控.

    Screenshots

    image image image image

    这个东西还不是开源的, 直接贴我的站点链接会封 IP, 用 Github 转一下吧 https://github.com/webd90kb/webd/tree/master/chatrooms

    12 replies    2024-08-21 18:12:38 +08:00
    zhng920823
        1
    zhng920823  
    OP
       Aug 19, 2024
    可输入 组名 密码 昵称 创建分享链接, 然后把分享链接放入收藏夹, 以后可直接点开使用.

    手机浏览器打开分享链接后, 用手机浏览器菜单的 添加到主屏幕/Add to Home Screen 可在桌面生成图标. 打开后是全屏显示的, 用起来有些类似 APP.
    zhng920823
        2
    zhng920823  
    OP
       Aug 19, 2024
    webrtc 视频通话, 大多数情况下能直连.
    如果不能直连会通过 TURN 中转, 可能比较卡.
    zhng920823
        3
    zhng920823  
    OP
       Aug 19, 2024
    在两端都有 IPv6 的情况下, 不管双方的光猫路由器防火墙的配置情况, 多数情况 WebRTC 是直连的.

    还有两边都是 OpenWRT 路由器, 只有一边的路由器有公网 IPv4, 跨运营商, 没有开启 uPnP, 没有配置 DMZ, 没映射端口, 关了 IPv6, 的情况下 WebRTC 也能直连. 不知道它是怎么穿透的 NAT.
    rekulas
        4
    rekulas  
       Aug 20, 2024
    梦回 2006
    zhng920823
        5
    zhng920823  
    OP
       Aug 20, 2024
    @rekulas #4 让你见笑了, 写前端的水平太差
    z1645444
        6
    z1645444  
       Aug 20, 2024
    我去年有 po 一个帖子找类似的应用,op 目前做的看起来最接近想法,很棒,如果境内一直保持这样的访问速度就最好了,简单多端同步一些临时性的信息,极其方便,样式小小改动看起来清爽一点真是无敌了,赞个
    zhng920823
        7
    zhng920823  
    OP
       Aug 20, 2024
    @z1645444 #6 多谢夸奖, 这个访问速度应该能保持住的. 只要体积够小加载就够快. 后端优化我比较擅长, 直接 C 写的 web/websocket 服务器.
    z1645444
        8
    z1645444  
       Aug 20, 2024
    @zhng920823 #7 服务端是直接 C 写的吗,太硬核了😨
    zhng920823
        9
    zhng920823  
    OP
       Aug 20, 2024
    @z1645444 #8 有不少积累的代码, 直接用了.
    NewYear
        10
    NewYear  
       Aug 21, 2024
    @zhng920823

    UI 这块可以参考各个站点,V2 就是一个典型,我曾经注意过,一句话总结:

    多用圆角,页面用到的颜色不要太多,白底+灰色边框是最简单的搭配。

    圆角、白色背景、带点阴影,按钮也是淡灰色带颜色渐变,你看 V2 是不是就这样的一套逻辑。然后一个大背景作为点缀。。。不过聊天室不太适合搞大背景……但也可以像微信一样用一个圆角带背景色的框,把每一段话框起来。

    设计简单,不失高级感,CSS 也好写。。。。其他颜色要搭配起来比较麻烦,可能要调好久才能比较合适。
    NewYear
        11
    NewYear  
       Aug 21, 2024
    楼主这个程序蛮是符合我的期待,现在各种聊天软件被监视,有的还随意封号( 3 年起步,封顶无期,说的就是 Soul App )。私有聊天软件还是蛮有必要的,能聊一些越界的话题比如如何上外网,比较轻松一点。


    突然想起 20 年前的碧海银沙聊天室。
    zhng920823
        12
    zhng920823  
    OP
       Aug 21, 2024
    @NewYear #10 谢谢提醒, 我这个确实颜色鲜艳了, 尤其是登录页的. 这个站的代码写起来不费劲, 但是调整界面用了好久.
    @NewYear #11 这个东西的目的就是给人一个轻松说话的地方. 现在对一些 IM 的私聊也不放心.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1383 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 16:54 · PVG 00:54 · LAX 09:54 · JFK 12:54
    ♥ Do have faith in what you're doing.