用 Blazor WebAssembly 和 Web Socket 写一个网页语音聊天室
作者:V君 发布于:2022-12-2 15:46 Friday 分类:我的应用
用法:
1. 下载 SimpleWebChat.Pre-Release-2.7z 解压,运行 SimpleWebChat.ConHost.exe
F. 修改配置文件 config.json 中的 ListenPrefix 可以监听外部请求,支持 HTTPS
A. 这次更新在原来的文字聊天基础上增加了两种语音聊天
文字聊天:
1. 访问首页,点击【Text chat】按钮进入
2. 输入昵称,点击【Connect】按钮或者按回车键,进入聊天室
3. 输入内容,点击【Send】按钮或者按回车键,发送消息
一对一语音聊天:
1. 访问首页,点击【Voice chat】按钮进入
2. 输入昵称,点击【Open Microphone】按钮,允许使用麦克风
3. 使用拨号盘或者在文本框输入号码,点击【→】按钮
4. 在另一个设备使用拨号盘或者在文本框输入相同的号码,点击【→】按钮,开始语音聊天
多人语音聊天:
1. 访问首页,点击【Voice meeting】按钮进入
2. 输入昵称,点击【Open Microphone and Connect】按钮,允许使用麦克风,开始多人聊天
最后是固定的扯扯环节
凭兴趣使用零零散散的业余时间开发,难免会有各种照顾不到的情形,有问题就刷新了重试,有能力的就自行调试(欢迎反馈问题❌)
访问麦克风和回放的实现是纯 JS 实现的,因为 Blazor 没有封装这些功能,而且不支持 safari 浏览器,因为写死了用 OPUS 音频编码 增加了 MP4A 音频编码,现已支持较新版本的 safari 浏览器 _(:з)∠)_
好啦,这就是这次的 Hello world 级的 语音聊天 案例 (←美其名曰),顺便预告一下土炮云已经实现(PC端浏览器)拖放排序,等把播放队列做出来再发表吧
标签: C# Web技术 前端工程 WebSocket .NetCore
使用 Blazor 为土炮云增加 Web 界面,定制歌单已可用
作者:V君 发布于:2022-10-29 14:05 Saturday 分类:我的应用
TL;DR for 立即想拿来用的人:[ 下载 | 源代码 ]
用法: 下载 FNZCM.ConHost.7z 解压得到一个 EXE 和 JSON 配置文件,然后把 wwwroot.zip 下载放到解压出来的两个文件边上,双击 EXE 看看有没有错误, 其余用法参见首发的土炮云[ 别再忍受网抑云欺压了,用起外网IP来搭建自己的私有云音乐吧 ]。
这次的界面调整了专辑(❌Disc)列表布局,做了个卡片列表,还做了个按标题搜索(其实搜索还可以再做细一些),最后就是歌单管理功能了,做了勉强能用的上下移动顺序调整按钮,谁让网页拖动实现这么难呢 °皿°
简单扯一扯缘起
上一次发布的土炮云内置 Web 界面只能使用固定的 m3u 歌单,不爽,那就加个接口吐出元数据集,然后用 Blazor 写个界面,配合 Blob 实现导出定制歌单。
这两次发布时间间隔有亿点长,主要原因有俩,对 Blazor 还比较生疏,外加一直有零碎修改,迟迟没有让自己满意,认为拿出来丢人。又到月底了,得刷存在感,那就告一段落发出来吧
简单扯一扯开发感想
首先点名致谢 KeudellCoding 的 Select2 封装项目,参考这个项目受益匪浅,让我有参照地把需要的 Bootstrap 组件封装起来。(后来用不上了依旧下代码做纪念❌)
针对解析大型(?) JSON 时,界面冻结的问题从爆栈上找到个流式读取的方法,期间定时松绑(?)一下脚本,这样界面就不卡死了。
起初还用了前端路由,发现这东西太难驾驭,后来就索性不动 URL 了,把控件状态写进 localStorage 里,页面载入的时候还原,这也还凑合吧。
最后我来帮懒得吐槽的家伙吐槽一下我还在用老掉牙的 HttpListener ,前端都先进到在浏览器跑 C♯ 了,而后端虽然用了 Core 但还在用上古时期的方式。我只能说这就是习惯了吧,实际上改成 Core 的 Host 方式看起来也问题不大,甚至还能兼容 IIS 呢。
最后我只能说:别想这么多。这只是个玩具项目,首先要能满足自己,其次如果能给有需要的人帮上忙,我就偷着乐了。
标签: 软件开发 C# HTTP Web技术 前端工程 .NetCore
用 Blazor WebAssembly 和 Web Socket 写一个网页聊天室
作者:V君 发布于:2022-9-26 17:38 Monday 分类:我的应用
用法:
1. 下载 SwcRelease-1.7z 解压,运行 SimpleWebChat.ConHost.exe
F. 修改配置文件 config.json 中的 ListenPrefix 可以监听外部请求,支持 HTTPS
这次只扯 °皿°
最近这段时间几乎把全部的业余时间花在 Blazor WASM 上了,一边给土炮云增加前端界面,一边盘算着发表点什么出来。由于土炮云一直没有达到认为能拿出来的段落,就一直咕着没有发表,直到月底慌了,就搞点东西发出来刷存在感,这次是 Hello world 级的 WebSocket 案例 (←美其名曰)
使用 Web API 下载 PDF 遇到的坑
作者:V君 发布于:2022-4-28 20:13 Thursday 分类:挖坑经验
TL;DR:
- 将 XHR 的 responseType 设置为 "arraybuffer"
- 如果使用 axios 则要在参数对象加 responseType:'arraybuffer'
- 获取响应之后用 response 创建 Blob 然后交给 ObjectURL(别忘记type)
- 将创建好的 ObjectURL 交给 IFrame 直接呈现,或者交给 A 标签实现下载
听我扯扯:
前后端分离的项目中遇到需要预览(下载)PDF 的需求,而且用了基于请求头而非 Cookie 的验证方式,因此无法走 IFrame 直接把 API 的 URL 送进去。绕了一圈远路尝试解决验证问题,无果。
回过头想起可以让 XHR 下二进制数据的做法,咕狗“XHR PDF”找到爆栈上面的《XMLHttpRequest to open PDF in browser》。(其实这时候已经看到有回答在 XHR 指定 type 为 'arraybuffer' 了)然鹅把 BLOB 链接放进 IFrame 之后,文字和图片全都不见了,只剩下几页空白页(页数正确)。已经确认过后端输出的 PDF 正常,而通过 A 标签的 HRef 放入 BLOB 连接下载的文件大小跟服务器响应的不一样,体积大约翻了一倍。
在浏览器调试脚本发现 XHR 的 reponse 是字符串,在控制台用 typeof 确认过眼神,这时候只能去咕狗了,“xhr binary data”,第一条返回 MDN 上的《发送和接收二进制数据 - Web API 接口参考》,里面提到了 XHR 的 responseType 属性,设置成 "arraybuffer" 才能避免浏览器把输出内容错误地当成文本来解析。
至此问题完美解决,可喜可贺!这个月差点找不到值得发表的内容 _(:з)∠)_
标签: javascript Web技术 前端工程
通过WebSocket隧道,尝试将ASP.NET网站空间当作VPS来使用
作者:V君 发布于:2021-1-17 11:50 Sunday 分类:折腾手记
先上 PoC源代码 再开始扯,这次不是着重解决某个问题,而是尝试确定某种可能性。
以前使用过 C9.io 提供的免费在线开发环境来搞各种事情,包括正常上网,无非是利用 Web Sockets 建立隧道,然后配合客户端连接到在上面运行各种应用程序。
现在C9已经被收购且停止免费了,那就公开来说吧w
这次也不例外,只不过花了点钱搞了个支持 ASP.NET 4.5+ 的网站空间,然后在上面搞类似的事情。
基础设施 -- WebSocket 转 TCP 模块
首先要使用 WebSocket 来建立一条隧道,要求网站空间支持且启用 WebSocket,不然没法整。这里有个未经优化,但还能凑合着用的例子,只要挂在 HttpModule 中 HttpApplication 的 PostMapRequestHandler 事件,填好参数就能吃。
折腾1 -- SSH 终端
略去寻找绿色 SSH 服务端的辛酸过程,时间直接转到发现 FxSsh 这个纯托管实现的服务端。这里要分成两个部分来扯,分别是使用基于 ConPTY 的 MiniTerm 和兼容低版本 Windows 的简单兼容实现。由于 FxSsh 主要实现的是 SSH 协议通道,服务端的终端并没有适配,尽管源代码中带了个名为 MiniTerm 的 DEMO 来适配到较新系统的 ConPTY。
第一部分:基于 MiniTerm 的实现。原版的 MiniTerm 虽然导入了 ResizePseudoConsole 这个 API 但并没有使用。而且由于 NuGet 上的 FxSsh 不是最新版,没有窗口大小变更事件的支持。 因此我把他们全都拷贝到自己的项目中并注明来源了。在此之上再加以修改 MiniTerm 使窗口大小变更事件适配到 MiniTerm 的实现。目前并没有发现太多问题。有点小遗憾的是 MiniTerm 使用的 ConPTY 功能是 Windows 10 近些年的更新才引入的,因此许多网站空间的系统都不支持,会报「在 kernel32 中找不到 CreatePseudoConsole 入口」的错误,因此我准备了另一个方案,见接下来的第二部分。
第二部分:另行实现一个兼容低版本 Windows 的控制台进程适配。在项目中起名为 EasyTerminal。起初简单将控制台进程的标准输入输出还有错误输出重定向到 SSH 通道,然鹅,回车键不起作用,而且不回显。将回车键拦截下来,改成 StandardInput.WriteLine 调用,总算是能满足最基本的需求。尽管还是没有实时回显,得按下回车键之后才显示出来,功能按键和窗口大小什么的更无从说起。目前仍在使用零碎的时间持续摸索(咕XD)…
折腾2 -- 正常上网 将网站空间当作 V2 服务端使用
编译部署这个项目,然后将 V2 的两个 exe 和配置文件丢进 App_Data 目录,然后使用 WS 隧道连接到监听的 URL,最后在 V2 客户端指向 WS 隧道客户端,这时候就能吃了。分配了较大的缓冲区大小,这应该能有效减少损耗,如果网速慢,你需要测一下空间到你的网速。
不水。
标签: 软件开发 个人服务器 C# HTTP Web技术 传输协议 Windows .NET IIS WebSocket
blogger
Google Web Translator
热门日志
随机日志
最新日志
最新评论
- scott
评论失败:评论... - scott404
您好! 拜读了... - V君
@65style:你可以... - 65style
可以通过 cue 文... - V君
@我是发垃圾信息... - 我是发垃圾信息的罪人
只需点击一下机... - V君
@mayuu酱重症患者... - V君
@test:调试9 - V君
@test:应该修好... - test
检查邮件功能修...
分类
存档
- 2022年12月(2)
- 2022年11月(1)
- 2022年10月(1)
- 2022年9月(1)
- 2022年8月(1)
- 2022年7月(1)
- 2022年6月(1)
- 2022年5月(2)
- 2022年4月(1)
- 2022年3月(1)
- 2022年2月(1)
- 2022年1月(1)
- 2021年12月(1)
- 2021年11月(1)
- 2021年10月(1)
- 2021年9月(1)
- 2021年8月(1)
- 2021年7月(1)
- 2021年6月(1)
- 2021年5月(1)
- 2021年4月(1)
- 2021年3月(1)
- 2021年2月(1)
- 2021年1月(1)
- 2020年12月(1)
- 2020年11月(1)
- 2020年10月(2)
- 2020年9月(1)
- 2020年8月(1)
- 2020年7月(1)
- 2020年6月(1)
- 2020年5月(1)
- 2020年4月(2)
- 2020年3月(3)
- 2020年2月(1)
- 2020年1月(1)
- 2019年12月(1)
- 2019年11月(1)
- 2019年10月(1)
- 2019年9月(1)
- 2019年8月(2)
- 2019年7月(1)
- 2019年6月(1)
- 2019年5月(1)
- 2019年4月(1)
- 2019年3月(1)
- 2019年2月(1)
- 2019年1月(2)
- 2018年12月(2)
- 2018年11月(1)
- 2018年10月(3)
- 2018年9月(4)
- 2018年8月(6)
- 2018年7月(4)
- 2018年6月(1)
- 2018年5月(2)
- 2018年4月(2)
- 2018年3月(3)
- 2018年2月(1)
- 2018年1月(1)
- 2017年12月(1)
- 2017年10月(2)
- 2017年9月(1)
- 2017年8月(2)
- 2017年7月(1)
- 2017年6月(5)
- 2017年5月(2)
- 2017年4月(2)
- 2017年3月(3)
- 2017年2月(2)
- 2017年1月(2)
- 2016年12月(3)
- 2016年11月(2)
- 2016年10月(3)
- 2016年9月(4)
- 2016年8月(2)
- 2016年7月(4)
- 2016年6月(3)
- 2016年5月(1)
- 2016年4月(4)
- 2016年3月(3)
- 2016年2月(1)
- 2016年1月(5)
- 2015年12月(4)
- 2015年11月(5)
- 2015年10月(1)
- 2015年9月(6)
- 2015年8月(4)
- 2015年7月(1)
- 2015年6月(6)
- 2015年5月(3)
- 2015年4月(3)
- 2015年3月(2)
- 2015年2月(1)
- 2015年1月(3)
- 2014年12月(1)
- 2014年11月(1)
- 2014年10月(1)
- 2014年9月(3)
- 2014年8月(1)
- 2014年7月(1)
- 2014年6月(1)
- 2014年5月(3)
- 2014年4月(1)
- 2014年3月(1)
- 2014年2月(2)
- 2014年1月(1)
- 2013年12月(2)
- 2013年11月(2)
- 2013年10月(1)
- 2013年9月(3)
- 2013年8月(14)
- 2013年7月(7)
- 2013年4月(1)
- 2013年3月(4)
- 2013年2月(6)
- 2013年1月(6)
- 2012年12月(8)
- 2012年11月(6)