JavaScript, objects and concurrency

I have a relatively simple project with very little code that is giving me headaches as I have no idea what is causing the problem. The idea is similar to http://tweetping.net/ , but it doesn't show real-time tweets, but real-time user connections to the service.

The service uses nodejs as UPD listener and socket.io for web browser communication. Socket.io then listens for messages and when it receives them, it draws a marker on the google map.

This is all the JavaScript on the page:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io();
    var map = false;
    var markers = {};
    var markerTimeouts = {};

    $(window).load(function() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(30, 16),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: false,
            streetViewControl: false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.TOP_RIGHT
            },              
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    });

    function createMarker(name, lng, lat) {
        var circle = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                icon: "/img/marker_red.png?v=2",
                title: name
        });

        markers[name] = circle;

        setTimeout(function() { destroyMarker(name); }, 3000);
    }

    function destroyMarker(name) {
        markers[name].setMap(null);
        delete markers[name];
    }

    socket.on('message', function(data){
        if (!map) {
            return;
        }
        else {
            createMarker(data.name, data.lon, data.lat);
        }
    });
    </script>

      

The problem occurs when there are many concurrent messages (100 / s) coming from socket.io. The markers are created just fine with the createMarker method, but when I try to remove them after 3 seconds (via setTimeout) the object markers[name]

is undefined.

I would do a fiddle.js example, but it is not possible to recreate many concurrent socket.io messages.

Has anyone had a situation where javascript was unable to push something to an object using the syntax object[key] = something;

? Any other ideas?

UPDATE . Note to yourself: always check if you have this key in the marker object. Adding the following code solved the problem.

if (name in markers) {
    return;
}

      

+3


source to share


1 answer


You are probably getting the same name twice (or more) in 3 seconds.



  • markers [name] are set from the first message
  • markers [name] are overwritten from the second message
  • [name] markers are removed (after the timer from the first message)
  • The second message timer has expired, but the [name] tokens have already been removed.
+1


source







All Articles