V君的博客

使用 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) 浏览(88)

用 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) 浏览(107)

使用 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) 浏览(160)

通过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) 浏览(347)

引入ace编辑器用作代码高亮（杀鸡焉用牛刀？

作者：V君 发布于：2020-3-20 22:57 Friday 分类：小服杂记

博客中有不少文章把代码段贴出来，有（dan）空（teng）的时候想办法去弄点样式，没（lan）空的时候就直接贴纯文本。是时候应该解决一下了。那就去看看用什么组件好吧。

（放狗出去找）发现了 highlight.js ，看起来不错，但不支持显示行号，并且作者也不打算实现它。那就再找找吧，（找了一会儿），想起 ace 编辑器了，如果只要设置成只读，它就是一个优秀的代码高亮组件，还能折叠代码块。

废话少说开始干！首先找到代码插入点，这次我选择在 content/templates/default/footer.php 底部的 #wrap 结束标记后面，插入 CDN 库引用然后写了下面的代码来启用。

先TL；DR一下使用方法：在需要高亮的元素上增加以下属性

1. highlight="ace" 启用代码高亮
2. ace-lang="javascript" 必选，指定代码语言
3. ace-theme="chrome" 可选，配色主题

代码语言和配色主题可以参照源代码文件名。

注释掉 log 语句并甩锅给 IE（

//replace nbsp \xa0 to normal space \x20
function normalizeSpaces(elm){
    var nodes = elm.childNodes;
    for (var i=0; i < nodes.length; ++i){
        if(nodes[i].nodeName === "#text") nodes[i].textContent = nodes[i].textContent.split("\xa0").join('\x20');
        else normalizeSpaces(nodes[i]);
    }
}

if (ace===undefined){
    console.log('highlight: ace undefined, no works');
}else{
    var items = document.querySelectorAll('[highlight=ace]');
    //console.log(`highlight: found ${items.length} element(s) to highlight, dealing with it.`);
    for (var i=0;i<items.length;++i){
        var item = items[i];
        
        var aceLang=item.getAttribute("ace-lang");
        if (aceLang === null){
            //console.warn(`highlight: the highlight element #${i} missing attribute 'ace-lang', skipped`);
            continue;
        }
        
        normalizeSpaces(item);
        
        var aceTheme=item.getAttribute("ace-theme");
        if (aceTheme === null) aceTheme = "Chrome";
        
        var editor = ace.edit(item);
        editor.setReadOnly(true);
        editor.setOptions({maxLines: Infinity});
        editor.setTheme("ace/theme/"+aceTheme);
        editor.session.setMode("ace/mode/"+aceLang);
        editor.setValue( editor.getValue().split('\n').join('\r\n'));
        editor.getSession().selection.clearSelection();
    }
}

继续水

标签: 软件开发 javascript Web技术

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