Hi all
近期防疫持续WFH中，意外地多了许多空档整理一些笔记发发废文，
以下是今年我尝试架设mud web proxy和mud web client的笔记与心得，
不是什么新技术，但爬了一下版似乎没有讨论过，就来洗个发文数了
题外话，
这个东东同时也是之前版主t大有分享过的一个国外mud网站，
该网站上所提供的技术
传送门 https://www.ptt.cc/bbs/mud/M.1590814246.A.294.html
【前言】
这是以网页方式连线并游玩mud的解决方案，
现今已有许多mud server支援可直接供网页连线游玩，
但有更多mud并无提供此选择，
mud proxy server作为一个中介，
可以把网页端websocket的资料转送给mud的telnet server，
而mud web client担任前端跟mud proxy server连线，输入mud指令与输出画面，
由此达成透过网页浏览器跟各mud游戏连线的效果。
【环境准备】
需先安装 Node.js 和 npm
【实装步骤】
1.安装proxy server
他是一个开放的github project，可以在这里clone：
https://github.com/plamzi/MUDPortal-Web-App
安装步骤在该页面中有指令可以照打
2.安装web client
同样是github上的开源项目，请在此clone：
https://github.com/houseofmaldorne/mud-web-client
安装步骤在该页面中有指令可以照打
3.加入https凭证档 或是 关闭https连线
由于默认的连线方式是采用https启动proxy server，
使网页采用wss的通讯协定连上proxy，
所以按照原本的安装的proxy server程式，
我们是需要对应的https凭证档案才能正常启动server的，
但是git专案中并不会提供凭证档给你测试，
所以如果直接启动的话会出现找不到凭证档的错误
假设你可以产出你网页需要的凭证档案，
请把档案放置在proxy server资料夹根目录中，
并修改wsproxy.js这只档案169~170行的cert和key
cert: fs.readFileSync('./cert.pem'),
key: fs.readFileSync('./privkey.pem'),
假设你没有要采用https加密，
可以把这167~176行这段拿掉，改采http方式启动proxy server
/*
if (fs.existsSync('./server.cer') && fs.existsSync('./private.key')) {
webserver = https.createServer({
cert: fs.readFileSync('./cert.pem'),
key: fs.readFileSync('./privkey.pem'),
});
} else {
// TODO: maybe fallback to non secure connection
console.log('Could not find cert and/or privkey files, exiting.');
process.exit();
}
*/
webserver = http.createServer(); // 加入这行
webserver.listen(srv.ws_port, function() {
srv.log('(ws) server listening: port ' + srv.ws_port);
});
4.修改网页端设定档
开启web client网页档案目录中的 src/config.js
主要需先修改 host 和 port 以及 proxy 三个参数，
修改成你想要连线的mud位置和port号，
以及要使用的proxy server位置，
这边要注意如果你的proxy server采用https，
proxy位置要用wss://；若无则用ws://
以原始物语为范例，可以修改成
host: 'psmud.ddns.net',
port: '6789',
...
proxy: 'ws://localhost:6200/', // 这边是你的proxy server位置
5.在client端首先发送一个{connect:1}
这段说明和范例写在wsproxy.js的档头注解中，
然而实际上我们要修改的是web client档案的 src/socket.js
在该档案46行之后加入
var init_json = '{ host: "' + Config.host + '", port: ' + Config.port +
', connect: 1 }';
ws.send(init_json);
整体看起来会像这样
var onOpen = function(evt) {
log('Socket: connected');
connected = 1;
var init_json = '{ host: "' + Config.host + '", port: ' + Config.port
+ ', connect: 1 }'; // 加入这个
ws.send(init_json); // 加入这个
if (!o.proxy && o.type == 'telnet') {
...
6.修改文字编码
到目前为止，你的proxy server已经可以游玩英文mud了，
但如果你要玩台湾常见的big5中文mud，
还需要回到wsproxy.js档案，修改402行，把 latin1 改成 big5
看起来像这样
data = iconv.encode(data, 'big5');
这帮助你把client端丢出去的文字转换成big5编码，
让原本的mud server能看得懂
同理，接收讯息也要能支援big5，
找到425行，在后面加一行
data = iconv.decode(Buffer.from(data), 'big5');
整段看起来像这样
.on('data', function(data) {
data = iconv.decode(Buffer.from(data), 'big5');
srv.sendClient(s, data);
})
这段是帮你把mud server丢回来的文字用big5转成utf8再丢还给网页端显示
到这里为止，所有的设定就完成了
7.启动proxy server
在 cmd 模式下，先进入proxy server的根目录，
输入 node wsproxy.js 指令启动 proxy server
有看到 (ws) server listening: port 6200 就是成功了
8.连上网页
假如你有自己的网页服务器，就把web client那包档案丢到你的server上，
连到index.html这只档案，就可以从任何地方开始游玩网页版mud了，
如果没有自己的服务器也没关系，
直接开启浏览器，把index.html这只档案拖进去，也可以本地端执行喔
【实际DEMO】
以上实作的运行结果可以参考原始物语的WEB版入口，
当然我还有后续作一些版面或功能上的调整并未列在上述内容中，
传送门在此→ http://psmud.ddns.net/client
注：网站暂不支援https连线
【心得】
我个人认为使用网页连线，
对于大多数老手来说并没有什么明显的好处 (汗)
首先bot相关的功能就跟Zmud没得比，
再来连线多过一层proxy又要处理转码对于执行速度来说，多少还是有影响的，
只是目前我体感觉得影响不大就是了，可能是因为玩家数太少 (倒)
然而对比较新的玩家来说，
使用官方已经tune好的网页版面，会比从制式化的mud连线工具连进去友善得多，
新玩家不用从头研究怎么对这个MUD设定做调适，网页排版可以预先规划好，
如颜色显示，字体大小，字型选用，编码设定这些通通不用管，
网页打开就可以直接体验到官方想呈现的理想状态
同时因为不需要另外安装client程式，
只要有浏览器就能直接进入游戏游玩，
对于推坑新人或许会是个助力，
当然至少还是要先安装浏览器啦，不过IE都能跑，所以这应该不构成门槛，
对于上班族来说，可以把游戏藏在浏览器的某个分页里，
应该也比开着看起来有点可疑的Zmud程式来得更不引人耳目，
这点是我自己之前玩小猫的世界Web版的心得XD
以上是我骗P币的心得报告
分享给有需要的人
谢谢大家