OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to change a source in response to socket IO event? JS + Socket IO + Node js?

  • Thread starter Thread starter Anna Denisova
  • Start date Start date
A

Anna Denisova

Guest
I'm trying to make a simple online game. When one player clicks on an object, the background picture changes, and I want to change it with css for all the connected players.

I was first doing it with this.map.element.style.backgroundImage = url('${newSrc}');

This worked only for the player who was doing the action. For all the other players the element's backgroundImage attribute changed (socket set correctly), however, the picture itself remained the same.

I found the thread that was solving the kind of similar issue (How to change image src after set by socket.io event?) and updated my code to the following:

Code:
let newElement = this.map.element;
newElement.style.backgroundImage = `url('${newSrc}')`
this.map.element.parentNode.replaceChild(this.map.element, newElement)

However, the result was the same. The last thing I tried was to reload the map from scratch as creating a brand new element, not copying this.map.element. I checked that the previous element is really being deleted, but I also found out that the new element for some reason is with the same pic. Even though in the developers' tools, I see that the URL is different.

What am I doing wrongly?

<p>I'm trying to make a simple online game. When one player clicks on an object, the background picture changes, and I want to change it with css for all the connected players.</p>
<p>I was first doing it with <code>this.map.element.style.backgroundImage = </code>url('${newSrc}')<code>;</code></p>
<p>This worked only for the player who was doing the action. For all the other players the element's backgroundImage attribute changed (socket set correctly), however, the picture itself remained the same.</p>
<p>I found the thread that was solving the kind of similar issue (<a href="https://stackoverflow.com/questions/31420919/how-to-change-image-src-after-set-by-socket-io-event">How to change image src after set by socket.io event?</a>) and updated my code to the following:</p>
<pre><code>let newElement = this.map.element;
newElement.style.backgroundImage = `url('${newSrc}')`
this.map.element.parentNode.replaceChild(this.map.element, newElement)
</code></pre>
<p>However, the result was the same. The last thing I tried was to reload the map from scratch as creating a brand new element, not copying this.map.element. I checked that the previous element is really being deleted, but I also found out that the new element for some reason is with the same pic. Even though in the developers' tools, I see that the URL is different.</p>
<p>What am I doing wrongly?</p>
 
Top