DOMのNodeをsocketでサーバに送りたい

実現したいこと

Node.js+herokuのWebアプリを開発中です。
window.getSelection().anchorNodeで取得した、フロントでの選択範囲を開始するNode(オブジェクト型)の情報を、socketでサーバーに送りたいのですが、うまくいきません。

Javascript(フロント)
1anchor_node = window.getSelection().anchorNode;
2console.log(anchor_node);
3//選択範囲を開始するNode(テキストノード)のテキストが表示される
4console.log(typeof(anchor_node));
5//objectと表示される
6console.log(anchor_node.nodeType);
7//3(TEXT_NODE)と表示される
8
9socket.emit('anchor_node', anchor_node);

Javascript(サーバー)
1socket.on('anchor_node', (message) => {
2   console.log(message);
3   //{}とだけ表示される
4});

こちらのページによると、socket.emitする際、オブジェクトにはJSON.stringify()が自動的に実行されるとあります。
JSON.stringify()が適用されたら、オブジェクト型のanchor_nodeがJSON表記になってよしなにサーバーにわたってくれるのかと思っていましたが、{}とだけ表示され、なぜか中身が消えて？います。
文字列や整数などは問題なく送信・受信ができているので、Nodeのみうまく渡せていない状況です。

サーバに渡したanchor_nodeの情報はデータベース(MySQL)に格納後、ユーザのフロント操作に応じて取り出され利用されます。
主に、ログインしているユーザの編集情報を再現するために利用されます。
その際、anchor_node.parentElementなどの処理をおこなうため、anchor_node.textContentだけを文字列化してsocketで送るという手法では情報が足りず、やはりオブジェクト型をJSON化して、全ての情報を保持しておきたいです。

window.getSelection().anchorNodeにこだわるというよりは、window.getSelection()の持っている情報をデータベースに保持しておければよいので、これ以外のアプローチもありそうでしたらぜひご指摘いただけますと幸いです。
ご教授よろしくお願いいたします。

追記：サーバに渡ったanchor_nodeを、このままMySQLにINSERTしたところ、[object Object]と表示されました

int32_t

2023/08/05 06:31

DOMノードの情報をサーバで保存できたとしても、それをクライアント側で再利用する手段がない(保存できた情報からクライアントのテキスト選択にできない)ように思います。別のアプローチを考えるべきでしょう。

mi_ho

2023/08/05 13:21

ありがとうございます！ひとまず、domjsonというライブラリ( https://github.com/azaslavsky/domJSON )の.toJSON()と.toDOM()で、欲しかった情報の保持、復元、利用はできました。引き続きより良い方法を模索してまいります。

行動規範の内容に同意します

回答1件

ベストアンサー

　toJSONメソッドがあるオブジェクトではない場合{}に変換される、という理解でいいと思います。
たとえば、Date.prototype.toJSON()は存在するので、JSON.stringify(new Date)は現在時刻を文字列に変換します。
説明 | JSON.stringify() - JavaScript | MDN

　JSON.stringify(document.createTextNode(''))などは{}に変換されましたので、NodeオブジェクトにはtoJSONがないと思われます。MDNにも記述がありませんでした。

　自前でメソッドを生やしたりJSON.stringify()のreplacerを使うなどして、Nodeをシリアライズし、サーバ側でデシリアライズする、という愚直な方法しかないと思います。

投稿2023/08/05 03:25