decentraland / MANA-community-fund-learning-content

Offer bounties in MANA to developers that create educational content: tutorials & scene samples
11 stars 8 forks source link

WebSocket-synced remote Decentraland scene #25

Closed nearnshaw closed 2 years ago

nearnshaw commented 6 years ago

Create a WebSocket server to handle scene state data for a Decentraland scene.

Also create a Decentraland scene that implements WebSocket communication with that server to store the scene state remotely. This should enable multiplayer interaction with the scene, as all users render their scenes based on a consistent state stored in this scene.

The server where the scene is hosted must be built from scratch, not using the scene template that the CLI creates when building a “Remote” scene. The server should use widely recognized tools to store and handle data, like Redis, Postgres or Memcache.

Host the server and the scene/s that use it on a hosting service like https://zeit.co/now.

Extra points if a single server is used to handle the states of multiple separate multiplayer scenes.

You can base the scenes off the sample scenes provided by Decentraland, but extra points if you create custom interactive scenes that make use of a shared state between users. You're free to use your creativity and imagine a scene that illustrates the objectives in an interesting and engaging way.

Your code must be clear and clean, as it must serve as an example for other developers trying to achieve the same kind of result.

An attached Readme.md file must list the steps required to create the project, as a lightweight tutorial.

The full code for the scene and the server you create must be delivered to us. We will share this code, perhaps in documentation and blogposts. Decentraland developers will be free to use and remix this code on their own scenes without any restriction.

gitcoinbot commented 6 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


This issue now has a funding of 10000.0 MANA (736.8 USD @ $0.07/MANA) attached to it.

gitcoinbot commented 6 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


Work has been started.

These users each claimed they can complete the work by 2 years, 5 months ago. Please review their action plans below:

1) tcrowe has been approved to start work.

I'd like to run this experiment in parallel with the RESTful example scene.

Thank you!

Learn more on the Gitcoin Issue Details page.

vs77bb commented 6 years ago

Excited to see what you come up with here @tcrowe!

tcrowe commented 6 years ago

Thanks for the encouragement @vs77bb 🤗

tcrowe commented 6 years ago

It's going well. I'm working on these in tandem. https://github.com/decentraland/MANA-community-fund-learning-content/issues/26#issuecomment-422481899

gitcoinbot commented 6 years ago

@tcrowe Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

tcrowe commented 6 years ago

The same update goes for this. https://github.com/decentraland/MANA-community-fund-learning-content/issues/26#issuecomment-424087474

vs77bb commented 6 years ago

Awesome; snoozing Gitcoin Bot for 10 days here 👍

gitcoinbot commented 6 years ago

@tcrowe Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 6 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


@tcrowe due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

tcrowe commented 6 years ago

Okay guys. It might have kicked me off the bounty. I think I got food poisoning a few days back but I still got the bulk of this one knocked out.

I am putting the finishing touches on and the explanations.

I will get back with the PR, images, demo and etc. shortly. 👍

nearnshaw commented 6 years ago

Sorry to hear you were not ok these days! Never mind those warnings, we'll work it out and honor our agreement, even if that ends up meaning paying you outside the platform. Can't wait to see what you're putting together! :)

tcrowe commented 6 years ago

Repo up here: https://github.com/tcrowe/sample-sync-websockets

I named it "sample-sync-websockets" trying to follow with the nomenclature for the other samples.

If there's not one maybe we can make "sample-sync-websockets" repo on https://github.com/decentraland and I'll PR into it.

I'll put up a demo URL soon. It works 95%. I want to change some things before I say it's done though.


How to test:

git clone https://github.com/tcrowe/sample-sync-websockets.git
cd sample-sync-websockets
npm install
npm run dev

That's going to spool up a bunch of processes. If the output is a bit confusing it's going to open up some local ports. 8834 and 8835.

We want this one:

open http://127.0.0.1:8834


I'll get back with you real soon.

tcrowe commented 6 years ago

There's 1 TypeScript error/warning I don't know how to fix. Maybe you can help @nearnshaw. 😅

src/shared/characters.ts(219,38)
TS2322: Type 'Timer' is not assignable to type 'number'.
tcrowe commented 6 years ago

One client one don't it. You need a bunch to see it.

I don't know why they have the wireframe around them.

screen shot 2018-10-04 at 4 11 27 pm
nearnshaw commented 6 years ago

@tcrowe I'm getting an error while trying npm run dev, it says the following:

{ Error: Redis connection to 127.0.0.1:6379 failed - connect ECONNREFUSED 127.0.0.1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:14) errno: 'ECONNREFUSED', code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 6379 }

Maybe there's some other package besides redis that I still need to install?

If I then go to http://127.0.0.1:8834 I can open the scene, but if I open more tabs to the same address they can't see each other.

BTW, I LOVE the example scene you built for this, it's a perfect fit for what we want to show here!

About that error message you mentioned before, I'll look into it and ask the devs to look as well if I can't figure it out myself :)

nearnshaw commented 6 years ago

Can you install redis with npm? As in npm install redis ? It seemed to work for me, but maybe that's my problem. If it does work, I'd like to have that in the readme too for consistency with our other docs, as we always use npm for all library installations in our examples.

nearnshaw commented 6 years ago

Ok, I was now able to run the scene well! The problem was I didn't install redis correctly. Now I installed it with brew. Isn't it a necessary step to first run redis-server before starting the scene? If so, we should add that to the readme.

The bounding boxes display because of a bug with the preview: if an entity is displayed outside the bounds of the scene, we show it in red and add this bounding box, the problem is that when the entity returns back into the scene, the box remains there. If a character starts out inside the scene, then that bounding box never appears around him. One work around would be to only display the entities if the user is inside the scene, then the bounding box will never appear.

I wasn't able to change the displayed user name. I tried setting it to something else but couldn't see the value change, not in the local tab nor on a different tab. Is there a bug with that?

tcrowe commented 6 years ago

Thanks for testing it out. My apologies for not being more clear. The readme definitely explains better than I did above.

I was thinking that the username changer would be nice to have but the textbox doesn't have onChange. Is there a way to get it by ID? The "OK" box was not receiving onClick. I don't know why.

I was thinking also an automatic door that opens when a user goes near it and a sound would be awesome. Your thoughts?

Next steps for me is I want to explain each effect with code so the users can get a step-by-step instruction.

tcrowe commented 6 years ago

I've got a big update on this one:

https://github.com/tcrowe/sample-sync-websockets

I put a little gif on it here: https://github.com/tcrowe/sample-sync-websockets#readme

How to install: https://github.com/tcrowe/sample-sync-websockets#install

Next steps is just writing up the explanation.

Thanks for the help explaining how to use the state better @nearnshaw ! 💪🏼

nearnshaw commented 6 years ago

Thanks Tony! I just took a look, it's awesome :). It's a shame that we couldn't get the name changing to work, but this works very well as well.

The one thing I'd like is to have a clearer separation between the code that would run in the server and the code that would run in the Decentralnd scene, and have each in a separate folder holding everything for each. I know right now there are a few shared files, I would rather have them repeated and the readme clarify that they're the same.

tcrowe commented 6 years ago

Hey @nearnshaw I did what you suggested above. I think it's in good shape.

nearnshaw commented 6 years ago

Great, thanks @tcrowe!

I'll run it by the devs, but I think this is looking really good. At some point next week I'll give your docs a revision, but they're looking very good. I'd love to take what your wrote in making synchronize-websockets and build a blogpost around that and link to your repo for more details if you don't mind :) Once I get some feedback from the devs I'll be sending you your well deserved bounty! Cheers Nico

gitcoinbot commented 6 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


Work for 10000.0 MANA (722.89 USD @ $0.07/MANA) has been submitted by:

  1. @tcrowe

@nearnshaw please take a look at the submitted work:


gitcoinbot commented 6 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


The funding of 10000.0 MANA (763.25 USD @ $0.08/MANA) attached to this issue has been approved & issued to @tcrowe.