WebSocketをxtermのアドオン@xterm/addon-attachに渡してるけど、このままではログをちょっとみたいとかできない。
@xterm/addon-attachから送信されるデータがいつもUint8Arrayなので、挟むコマンドはテキストで送ればいいのかと思ったら、クライアント側でstring, ArrayBuffer, Blobのどれをsendしようが、サーバ側にはUint8Arrayとして引き渡されていたので、サーバ側はいつもJSONデータが渡ってくる前提でコード。
/**
* WebSocketクライアント(xterm.js)からメッセージ受信時の処理
*/
ws.on('message', async (event) => {
// JSON.stringify()でテキストで送信しているハズ
const textJson = await new Response(event).text();
// JSONに成～れ！
try {
const json = JSON.parse(textJson);
// JSONに成った！
// sshかな？
if (json.ssh) {
if (typeof json.ssh === 'string') {
console.log(`resv ssh text : '${json.ssh}'`);
stream.write(json.ssh);
} else if (json.ssh instanceof Uint8Array) {
// いつものUint8Array
const text = new TextDecoder().decode(json.ssh);
console.log(`resv ssh binary : '${text}'`);
stream.write(json.ssh);
} else {
console.log(`resv ssh unknown type[${typeof json.ssh}] : '${json.ssh}'`);
}
} else if (json.｛その他１｝) {
// ｛その他１｝かな？
const resultText = ｛その他１｝(json.｛その他１｝);
console.log(`｛その他１｝('${json.｛その他１｝}')\n='${resultText}'`);
// 結果をJSONに置き換えて
const responce = {
｛その他１｝: resultText,
};
// 送信
const blob = new Blob([JSON.stringify(responce)], { type: "application/json" });
ws.send(blob);
} else if (json.｛その他２｝) {
・・・省略・・・
} else if (json.｛その他ｎ｝) {
・・・ほぼ｛その他１｝と似た感じ
} else {
// しらないコマンド
}
} catch (ex) {
// 私はJSONに成れないのか！
console.log(`resv not json's text : ex : '${ex}'`);
}
});
クライアント側は、WebSocketのmessageメソッドに
webSocket.addEventListener("message", async (event) => {
・・・
preventDefault();
}, { passive: false });
しても、xtermjs画面にデータを表示してしまう。
仕方が無い。
@xterm/addon-attachを外して・・・
自前でWebSocketを送受信する。（前途多難そう
/**
* WebSocketの処理 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
*/
/**
* WebSocketのmessageイベント処理
*/
webSocket.addEventListener("message", async (event) => {
// テキストにする
const textJson = await new Response(event.data).text();
// JSONに成～れ
try {
const json = JSON.parse(textJson);
// 内容で分岐
if (json.ssh) {
const s = json.ssh;
terminal.write("string" == typeof s ? s : new Uint8Array(s));
} else if (json.｛その他１｝) {
// ｛その他１｝のレスポンス
console.log(`｛その他１｝='${json.｛その他１｝}'`);
} else if (json.｛その他２｝) {
・・・
} else if (json.｛その他ｎ｝) {
// ｛その他ｎ｝のレスポンス
console.log(`｛その他ｎ｝='${json.｛その他ｎ｝}'`);
} else {
// 知らないコマンド
}
} catch (ex) {
// JSONに成れなかった
}
});
/**
* WebSocketのcloseイベント処理
*/
webSocket.addEventListener("close", ((event) => {
terminal.write('*** disconnection ***');
console.log('*** disconnection ***');
}));
/**
* WebSocketのerrorイベント処理
*/
webSocket.addEventListener("error", ((event) => {
terminal.write('*** socket error ***');
console.error(`socket error : ${event}`);
}));
/**
* Terminalのイベント処理
*/
/**
* Terminalのdataイベント処理
*/
terminal.onData((event) => {
// sshに送信するJSONに変換
const msg = {
ssh: event,
};
// テキストに展開しBlobで送信
const blob = new Blob([JSON.stringify(msg)], { type: "application/json" });
webSocket.send(blob);
});
/**
* Terminalのbinaryイベント処理
*/
terminal.onBinary((event) => {
// 呼ばれてないので省略
});
@xterm/addon-attachを代行する処理は、
WebSocketのmessageの処理は長いけど（独自コードが多い
xtermjsのデータを送信するのは短くてよかった。
本当は色々チェックが必要なんだろうけど。（ま、いいか