Comments (13)
Hi, we're glad to hear you're using Playground! Are you pulling the svg images from our S3 bucket or from somewhere else? And are there any errors in your browser console?
from playground.
Hi @jackcook. Thanks for the reply!
For now, we are using the images from the hackmit s3 bucket (we have already created our own s3 as well but plan to use it for production)
Further, there are no errors reported on browser console when the playground is loaded.
If it helps in troubleshooting, I had a console.log
in the element.js
file to display the s3 url accessed for each page load. It seems that it logs an output when the personal room
is opened (which is rendered correctly as well), but there is no console statement when other parts of the map are loaded.
Another point, if it helps, is that if I go to personal room
, then let's say to town plaza
, the background image of the personal room
stays (although other assets like wardrobe are removed), and the background of town plaza
is not loaded
Could it be an issue related the redis image of docker, that is running locally on the ec2 instance hosting the backend?
Hope this info can help in the troubleshooting!
from playground.
Did you happen to modify this line?
The ?Math.random()
may look ridiculous, but it's necessary -- there's some browser caching issue that Three.js runs into when loading svg images from S3. I don't remember all of the details around this issue, but you can definitely find more people online who have run into this same issue.
from playground.
Hey @jackcook
No I haven't modified this line as I was aware of this issue with three.js
As mentioned before, it seems weird that the personal room SVGs do render correctly while the rest of the locations do not.
Is there anyone you could point out to, maybe in the dev team, to help resolve this issue? That would be of great help, in case they must have run into the same issue previously!
from playground.
Can you add a console.log(data)
message below this line: https://github.com/HackMIT/playground-frontend/blob/master/src/js/socket.js#L21 and see what packets you're getting from the backend? And then confirm that any room id you see in join
packets is present in your Redis database -- you can check this with hgetall room:<id>
in a Redis cli. If the plaza isn't loading, the room might not be correctly stored in your database. Let me know if you have questions about doing any of this.
from playground.
@jackcook
When I connect to the redis-cli
and enter hgetall room:plaza
, it shows empty array
as response.
But when I execute hgetall
for the personal room, it does output certain results....
Just to add, the packet that is displayed has a room
field which ""
when I change between multiple locations.
I guess, as you suspected, it must be an issue of storing in the Redis database running on docker. I am running the docker container containing the redis image locally on the ec2 instance that is hosting my backend. I wanted to confirm whether this is the correct way to do so? If yes, based on the info above, could you suggest a workaround for this issue?
Thanks for all the help so far!
from playground.
The room id being empty would definitely cause this problem. Did you change any of the room templates? How are you getting from the personal room to the plaza? With the map?
from playground.
@jackcook
I have not changed any of the room templates.
Yes, I change location from personal room using the map. Further I wanted to clarify the following:
- If a new person joins the playground (who was not in the database earlier), even in that case the SVGs are not rendered, although the
join
packet hasroom
ashome
- When I change location to personal room, the
room
in thejoin
packet there is an empty string as well. Just that thecharacter
field in thejoin
packet is populated with a string (this is the case in other locations too)
I have attached the screenshots for reference
from playground.
Hi @jackcook
We were able to solve the error by deploying the docker running the redis image separately, using AWS ECS (Elastic Container Service).
However, can we ask how you worked with the docker running the Redis database (did you have the database on localhost on the EC2 running the playground, or separately in another instance)? The current solution seems to display the SVGs, but there is a latency issue, as the socket takes time to interact with the Redis that is running on another EC2 instance.
from playground.
Hi @ritikbhatia -- super sorry about the late response. Glad you were able to fix that issue!
We used an ElastiCache instance for Redis, we didn't have it running on the same box. We got one of the ones with high network availability to reduce socket latency. You'll need to do this if you're using ECS because you need one central Redis instance, you can't have a different one on each box.
from playground.
Hi @jackcook
May we know what was the frontend deployed on?
We switched to ElastiCache and now we are encountering the same issue of svgs not rendering (don't know why it works properly with ECS)
from playground.
Hey @jackcook, adding on to this thread, there is an issue where the current position of the avatar becomes undefined on entering a new room. After this, if we try to press the home button or use the map to go to a new room, the svgs keep stacking on top of each other until we refresh the whole page.
May I ask if a similar issue was faced by you guys while deploying and if there is a solution to this? Is this due to a latency issue as mentioned before or another problem altogether? Any help or suggestions on the same would be very helpful!
Here are some screenshots of the error and the svg stacking for reference
from playground.
There is also another error which keeps popping up in such cases which is as follows:
Uncaught TypeError: Cannot read property 'safeDelete' of undefined
at t.value (game.5454ee2a0044f27adcc8.bundle.js:2)
at game.5454ee2a0044f27adcc8.bundle.js:2
at game.5454ee2a0044f27adcc8.bundle.js:2
at Array.forEach ()
at game.5454ee2a0044f27adcc8.bundle.js:2
at Map.forEach ()
at game.5454ee2a0044f27adcc8.bundle.js:2
at Array.forEach ()
at WebSocket.conn.onmessage (game.5454ee2a0044f27adcc8.bundle.js:2)
Thanks again for all the help and hoping to hear from you!
from playground.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from playground.