1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptのクラスとJSONの相互変換

Posted at

#SkayWayでデータを送信したい

SkyWay使ってたらStreamと別のデータを送りたいと思い、クラスをJSON,JSONをクラスに変換したくなった
が、調べても出てこなかったのでメモ

リファレンス曰く、Stringbyte[]で送信できる

なので、JSONで文字列→送信して→・・・→文字列で受信→クラスに戻すを目指す

##送信するクラス
データ内容は自作のクラス

Vec.js
class Vec{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
}
Vec.prototype.toString = function(){
  return '(' + this.x + ',' + 'this.y' + ')';
}

##送信する関数
上記のVecクラスのデータを以下のSend関数に投げればいいようにします

なんかそこらの関数.js
function Send(msg){
  room.send(msg);
}

##受信する関数

受信します.js
function setupRoomEventHandlers(room){
  room.on(`stream`,function(stream){
    接続時の処理;
  });
  //他、peerLeaveとかcloseとかの関数
  //略

  //room.sendで送信したデータは「data」で受信する
  room.on('data',function({data,src}) => {
    //ここに受信時の処理
  });

}

#クラスからJSON (class to JSON)
JSON.stringigy(クラス)でJSONにできるので
送信したいタイミングでこんな感じにしてマウスの位置送信します

Send(JSON.stringigy(new Vec(mouseX,mouseY)));

#JSONからクラス(JSON to class)
受信データはObjectが届くので、
JSON.parseでJSONにして、Object.assign(クラス,json)でクラスを復元します
なので、

受信します.js
function setupRoomEventHandlers(room){
  //略

  //room.sendで送信したデータは「data」で受信する
  room.on('data',function({data,src}) => {
    let json = JSON.parse(data);
    console.log(Object.assign(new Vec(),json));
  });

}

とすることでこのように↓受信できたので、JSON to class & class to JSONができましたとさ
image.png
めでたしめでたし

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?