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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

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

Q&A

解決済

2回答

5335閲覧

WebSocketにおけるJSON形式の扱いについて

kaki.k

総合スコア19

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

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

0グッド

0クリップ

投稿2019/06/26 18:04

大学院生、javascript初心者です。
ubuntuを使っています。

Web上でマップの任意の地点をクリックし、緯度経度をサーバ側へ送り処理を行いたいというのが自分の目的です。

ウェブサーバー間におけるJSON形式の扱いで困っています。

以下にウェブ、サーバにおけるそれぞれのコードの一部を載せます。

$(() => { const ws = new WebSocket("ws://localhost:8081/", ["test"]); ws.onopen = () => { const envelope = { "latitude": $('#lat').val(), "longitude": $('#lng').val() }; //サーバへ送信 ws.send(JSON.stringify(envelope)); } });
wss.on('connection', (client) => { client.on('message', (message) => { const envelope = JSON.parse(message.data); console.log('received lat: %s', envelope.latitude); console.log('received lng: %s', envelope.longitude); }); });

エラーが以下のようになってます。

undefined:1 undefined ^ SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at WebSocket.client.on (/home/aaa/M1/web/get_latlon.js:11:31) at WebSocket.emit (events.js:198:13) at Receiver.receiverOnMessage (/home/aaa/web/node_modules/ws/lib/websocket.js:720:20) at Receiver.emit (events.js:198:13) at Receiver.dataMessage (/home/aaa/web/node_modules/ws/lib/receiver.js:414:14) at Receiver.getData (/home/aaa/web/node_modules/ws/lib/receiver.js:346:17) at Receiver.startLoop (/home/aaa/web/node_modules/ws/lib/receiver.js:133:22) at Receiver._write (/home/aaa/web/node_modules/ws/lib/receiver.js:69:10) at doWrite (_stream_writable.js:415:12)

ネットでいろいろ検索しましたが、結局解決策が見つからず、直すべき場所もわからないままです。
JSON形式でなにかおかしいところがあるのかもと思い、質問させていただきました。

解決策やアドバイス等いただけたら幸いです。
場違いな質問をしているかもしれませんが、よろしくお願いします。

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

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

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

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

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

guest

回答2

0

送信した値はmessage.dataではなくmessageに入っているのではないでしょうか?
そのため、message.dataはundefinedとなる、それをJSON.parseしようとして失敗していると予測します。

まずはmessageに何が入っているかconsole.logで確認してください。
messageに送信した値が入っているのであれば、JSON.parse(message)が正解です。


SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)

message.dataがundefinedなので、JSON.parseでundefinedをパースしようとしてエラーになっています。

最初(position 0)の文字のuってなんやねんと。

投稿2019/06/26 22:22

編集2019/06/26 22:35
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kaki.k

2019/06/26 23:16

console.logで確認したところ値が入っていませんでした。 web側でのコードが間違っていたようです。 解決策の1つとして勉強になりました。 ありがとうございます。
退会済みユーザー

退会済みユーザー

2019/06/26 23:33

Socket.IO( https://socket.io/ ) を使用するというのも一つの手です。
guest

0

ベストアンサー

ubuntu とか触ったこともない自分がレスするのもなんですが・・・

最初の方のコードにある envelope の作り方が間違っているように見えます。

コードの最後の行で envelope という JavaScript オブジェクトを JSON.stringify で JSON 文字列にシリアライズしてからサーバーに送信しているように見えます。

そうだとすると、その上の envelope の作り方が変です。" と " で囲うのを止めて試したらたどうなりますか?

【追記】

下の 2019/06/27 10:11 の私のコメントで「後で、Fiddler を使うとどういう情報が得られるかの例を回答欄に追記しておきます」と書きましたが、それを以下に書いておきます。

その前に、サーバーに送信するデータですが、質問者さんが使っているのは何だか分かりませんが、jQuery ajax のように data オプションの設定(質問者ンさんのコードでは ws.send(xxx) の xxx が該当すると思います)によって送信されるデータの形式が変わってくるということがもしあれば要注意です。

サーバー側の API の仕様上何を送信しなければならないかが分かっていて、それに合わせた形式で送信できているでしょうか?

ちなみに、jQuery ajax では data オプションに設定するものが JavaScript オブジェクトか JSON 文字列かによって全く結果が違ってきます。詳しい話に興味がありましたら以下の記事を見てください。

jQuery.ajax の data の型
http://surferonwww.info/BlogEngine/post/2015/10/05/what-must-be-set-to-data-option-in-jquery-ajax.aspx

本題の「Fiddler を使うとどういう情報が得られるか」ですが、例えば JSON 文字列をコンテンツに含めて POST 送信するという API の仕様になっているとすると、

(1) 正常に送信・受信されていれば以下のようになります。

イメージ説明

(2) 認証用のトークンが送信ヘッダに含まれずアクセスが拒否された場合は以下のようになります。

イメージ説明

(3) サーバーが要求を受けて処理する際、何らかの例外が発生した場合は以下のようになります。質問者さんの環境で同じになるか分かりませんが、スローされた例外の種類とスタックトレースが取得できているところに注目してください。

イメージ説明

投稿2019/06/26 22:28

編集2019/06/27 01:48
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kaki.k

2019/06/26 23:21

" "をはずすのはlatitudeとlongitudeのところでしょうか? 試してみましたが同じ結果が帰ってきました。。。
退会済みユーザー

退会済みユーザー

2019/06/26 23:42 編集

そうです。JavaScript オブジェクトとするなら外してください。 それでもダメと言うことですと、Fiddler などのキャプチャツールを使って、要求と応答の中身が仕様通りになっているか確認するのが一番早く問題を見つける手段と思いますので、是非やってみてください。 Fiddler は無償で入手できます。Fiddler なしでは HTTP 通信を行うアプリの開発はできないと言っても過言ではないと思います。 ・・・と書きましたが、OS が Windows ではなさそうで、Fiddler は使えないかもしれませんね。
退会済みユーザー

退会済みユーザー

2019/06/27 01:11

上に、 > OS が Windows ではなさそうで、Fiddler は使えないかもしれませんね。 と書きましたが、mono 上で動かして使えるようですね。ubuntu Fiddler などをキーワードにググるといろいろヒットするので調べてみてください。例えば下記: Ubuntuでfiddlerを使ってみる https://qiita.com/kasama123/items/af586ae5d4eda26bdae6 Fiddler でなければならないということはないですが、何らかのキャプチャツールは開発に必須です。後で、Fiddler を使うとどういう情報が得られるかの例を回答欄に追記しておきます。
kaki.k

2019/06/27 01:59

いろいろと丁寧にありがとうございます。 自分なりにゆっくり解釈しながら課題をすすめようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問