質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

285閲覧

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

mi_ho

総合スコア34

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/08/05 03:05

編集2023/08/05 22:21

実現したいこと

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]と表示されました

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/08/05 06:31

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

2023/08/05 13:21

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

回答1

0

ベストアンサー

 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

Lhankor_Mhy

総合スコア35740

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mi_ho

2023/08/05 03:33

オブジェクトによってtoJSONメソッドのあるなしがあるんですね! オブジェクト型だったらなんでもやってくれるのかと思っていました。 ベストアンサーにさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問