V君的博客

用 Blazor WebAssembly 和 Web Socket 写一个网页语音聊天室

作者：V君 发布于：2022-12-2 15:46 Friday 分类：我的应用

TL;DR [ 下载 ] [ 源代码 ]

用法：
 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

评论(0) 引用(0) 浏览(63)

使用 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

评论(1) 引用(0) 浏览(73)

用 Blazor WebAssembly 和 Web Socket 写一个网页聊天室

作者：V君 发布于：2022-9-26 17:38 Monday 分类：我的应用

TL;DR [ 下载 ] [ 源代码 ]

用法：
 1. 下载 SwcRelease-1.7z 解压，运行 SimpleWebChat.ConHost.exe
 F. 修改配置文件 config.json 中的 ListenPrefix 可以监听外部请求，支持 HTTPS

这次只扯 °皿°

最近这段时间几乎把全部的业余时间花在 Blazor WASM 上了，一边给土炮云增加前端界面，一边盘算着发表点什么出来。由于土炮云一直没有达到认为能拿出来的段落，就一直咕着没有发表，直到月底慌了，就搞点东西发出来刷存在感，这次是 Hello world 级的 WebSocket 案例 （←美其名曰）

标签: 软件开发 C# Web技术 WebSocket

评论(0) 引用(0) 浏览(97)

使用 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技术 前端工程

评论(0) 引用(0) 浏览(155)

通过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

评论(0) 引用(0) 浏览(348)