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幣的心得報告
分享給有需要的人
謝謝大家