index1.html

<html>
<script>
    var ws = new WebSocket("ws://localhost:8888/ws");
    var player_id = 0;
    ws.onopen = function() {
        // pass row and col here
        ws.send(JSON.stringify({type: 0, player_id: 1, player_name: "Kenrick", arrow: 0}));
    };
    ws.onmessage = function (evt) {
        //alert(evt.data);
        data = JSON.parse(evt.data);

        /*
        data.grids to access grids information
            0 = empty grid
            1 = wall

        data.pac_pos to access pacman positions

        data.ghost_pos to access ghost positions

        data.score to access player's score

        data.food_pos to access food coordinates (list of coordinates)
        */
        if(data.type == 0) {
            player_id = data.player_id;
            //alert(player_id);
        }
        else {
            //alert(data.pac_pos["1"]["player_name"])
            pac1.innerHTML = data.pac_pos["1"]["x"];
            pac2.innerHTML = data.pac_pos["1"]["y"];
        }
    };
    window.onbeforeunload = function() {
        ws.send(JSON.stringify({type: 1, player_id: player_id}));
        ws.onclose = function () {}; // disable onclose handler first
        ws.close()
    };
</script>
<h1 id="pac1">5</h1>
<h1 id="pac2">5</h1>
</html>