A state syncing framework based on Vuex and rollback netcode

matthewc.dev

35 points·matthewfcarlson··7 comments

Related - I'm working on a hobby hearthstone-like card game using Vue and although it's not two-way, I have a system that's reactive all the way down from the server to the dom rendering of the game board.

I have a deep Proxy that wraps the game state and watches for any changes on the server. It then sends a diff of the current state with the previous synced one using fast-json-patch (https://www.npmjs.com/package/fast-json-patch) to the client which also uses the same library to reconcile the state within a Vue reactive({}) object, which then updates the DOM. Since it's only a card game, it's all event based and there's no game loop or polling needed and there's only a few websocket messages per minute. It was fun to design and is pretty efficient too.

Sounds really interesting! Is this open source somewhere? Or perhaps you could share some gist to learn from?

Is the state so large that it's worth the effort sending diffs rather than the whole state?

Being a bit of contrarian, and not a front end person, I'm inclined to believe that you could do the DOM manipulations pretty easily in plain JS without a framework.

Anyway, sounds like a fun project.

This looks similar to SyncedStore which was posted just yesterday: https://news.ycombinator.com/item?id=29483913

A look into rollback netcode inspired state syncing over websockets.

This space is near and dear to my heart, and I'm building a language around it: http://www.adama-lang.org/

I'm over-indexed on the language, but at the core is you are fundamentally building a data-base like thing with a logger.

I thought meteor does this fairly well, also with optimistic updates.

Reply on news.ycombinator.com