How to pass a "new" object in JavaScript in Socket.IO

Question

I'm trying to pass objects from one client to another client, e.g. pieces in a multiplayer board game. I have a working solution using JSON.parser and __proto__, but I'm curious to know if there is a better way.

Client sends:

var my_piece = new BoardPiece();
// ... my_piece is assigned data, like x-y coordinates
socket.send(JSON.stringify(my_piece));

Server forwards the piece to others:

client.broadcast(piece);

Another client receives:

var your_piece = JSON.parse(json);
your_piece.__proto__ = BoardPiece.prototype; // provide access to BoardPiece's functions

It's the last step where I use __proto__ that I'm concerned I may be shooting myself in the foot. Is there a better suggestion?

Raynos · Accepted Answer · 2011-05-03 16:29:52Z

8

// clientone.js

var piece = new BoardPiece();
// ...
socket.send(JSON.stringify(piece));

// clienttwo.js
var piece = BoardPiece.Create(JSON.parse(json));
...

// BoardPiece.js
function BoardPiece() {

}

BoardPiece.prototype.toJSON = function() {
    var data = {};
    data.foo = this.foo;
    ...
    return data;
};

BoardPiece.Create = function(data) {
    var piece = new BoardPiece();
    piece.foo = data.foo;
    ...
    return piece;
}

Firstly using the toJSON method on your objects allows JSON.stringify to immediatly convert your object to JSON. This is part of the JSON API. The JSON API will call the toJSON method if it exists and converts that object to JSON.

This basically allows you to serialize your object as and how you want.

The second part is adding a factory method as a property of your constructor which takes your serialized JSON data and creates a new boardpiece. It will then inject your serialized data into that boardpiece object.

So your serializing only the data you care about and then passing that data through a factory method. This is the best way to send custom objects from one client to another.

answered May 3, 2011 at 16:29

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brent Daugherty Over a year ago

Thanks a lot. This all makes sense, and I can see how this way allows you to filter out the properties you want to send and receive. However, in my case, I want all the properties of the object. So if I understand you correctly, I should not implement toJSON and it will JSONify all my properties. That means I would only have duplicate code for Create to maintain if I change a property in BoardPiece.

Raynos Over a year ago

@BrentDaugherty you can just jsonify the entire object then for (var prop in obj) { ... } loop over the object and copy every property over. The idea is that Your basically adding a second constructor which takes another object and makes a clone. It's a common construct in OO to have a clone based constructor. You could even deal with it as a paramater of the constructor function and only handle it there.

Detect · Accepted Answer · 2011-05-05 15:41:48Z

3

There are a bunch of object syncing projects for node that might make life easier. For starters, check out:

answered May 5, 2011 at 15:41

Detect

2,0691 gold badge12 silver badges21 bronze badges

2 Comments

Raynos Over a year ago

Having shared objects via a layer of abstraction can get very expensive if your not aware of how the abstraction works specifically. Theres a big difference between 500 cycles to get a local property of an object and 250 million cycles to get a property of an object that exist across a network. Generally when understood and used well abstractions like now can make your live easy.

Brent Daugherty Over a year ago

Thanks. These are some great links to libraries that I'll include as I understand them more and things get more complicated.

user525032 · Accepted Answer · 2011-05-03 08:43:58Z

0

Have tou tried jQuery's $.extend() method? http://api.jquery.com/jQuery.extend/

answered May 3, 2011 at 8:43

user525032

1 Comment

Brent Daugherty Over a year ago

Looking at the documentation, it's not clear whether that would account for an object's prototype. Regardless, I don't want to use third-party libraries; It's for smartphone devices.

Collectives™ on Stack Overflow

How to pass a "new" object in JavaScript in Socket.IO

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related