Socket.io + node.js - client not recieving broadcast emit

Question

I'm trying to write a game with socket io but i am running into some difficulties, if you look at the example when i send Freset(true) the server recieves it and tries to emit the reset variables to the client, however. the client does not recieve the message send by the server., at launch it recieves the message, after that it does not

index.html (client)

<!doctype html>
<html>

<head>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #playerOneBoard {
            background-color: rgb(202, 147, 147);
            width: 99%;
            height: 30%;
            display: inline-block;
        }

        #playerTwoBoard {
            background-color: rgb(146, 146, 223);
            width: 99%;
            height: 30%;
            display: inline-block;
        }

        .card {
            width: 200px;
            height: 350px;
            margin: 0 75px;
            border: black 5px solid;
        }

        .summon {
            transform: rotate(12deg);
        }

        .tap {
            transform: rotate(90deg);
        }
    </style>
</head>

<body>
    <div id="board">
        <div id="playerOneBoard"></div>
        <ul id="playerOneHand"></ul>
        <ul id="playerTwoBoard"></ul>
        <ul id="playerTwoHand"></ul>
    </div>
    <input id="u" type="radio" name="name" value="player one" checked>
    <input id="u" type="radio" name="name" value="Player two">
    <input id="submit1" type="button" value="synch">
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        var playerOneLibrary = [];
        var playerOneHand = [];
        var playerOneBoard = [];
        var playerOneGraveyard = [];
        var playerOneExile = [];

        var playerTwoLibrary = [];
        var playerTwoHand = [];
        var playerTwoBoard = [];
        var playerTwoGraveyard = [];
        var playerTwoExile = [];

        //🔴🟢🔵⚫🟡⚪
        $(function() {
            var socket = io();

            socket.on('chat message', function(p1l, p2l, p1h, p2h, p1b, p2b, p1g, p2g, p1e, p2e) {
                playerOneLibrary = p1l;
                playerTwoLibrary = p2l;
                playerOneHand = p1h;
                playerTwoHand = p2h;
                playerOneBoard = p1b;
                playerTwoBoard = p2b;
                playerOneGraveyard = p1g;
                playerTwoGraveyard = p2g;
                playerOneExile = p1e;
                playerTwoExile = p2e;
                console.log('message recieved');
            });

            Freset = function(x) {
                socket.emit('reset game', x);
            }

            FdrawCard = function(obj) {
                var card = `
                <li id="${obj.cid}" class="card">
                    <h2>${obj.name}    <b> ${obj.mana}  </b> </h2>
                    <h3> ${obj.type} </h3>
                    <p> 
                        ${obj.text}
                        <i>${obj.power}/ ${obj.toughness}</i>
                    </p>
                    <div> buttons </div>
                </li> 
                `;
                return card;
            }

            Fdraw = function() {
                for (x in playerOneLibrary) {
                    $('#playerOneBoard').append(FdrawCard(playerOneLibrary[x]));
                }
                for (x in playerTwoLibrary) {
                    $('#playerTwoBoard').append(FdrawCard(playerTwoLibrary[x]));
                }
            }

        });
    </script>
</body>

</html>

index.js (sever)

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);


//player one library
var playerOneDeck = [{
        "cid": "101",
        "name": "red lotus",
        "type": "land",
        "text": "this inherits the properties of the green lotus",
        "mana": "5 🔴",
        "power": "0",
        "toughness": "0",
    },
    {
        "cid": "102",
        "name": "white lotus",
        "type": "land",
        "text": "this does double the effect of the red lotus",
        "mana": "5 🟡",
        "power": "0",
        "toughness": "0",
    }
];
var playerOneLibrary = playerOneDeck;
var playerOneHand = [];
var playerOneBoard = [];
var playerOneGraveyard = [];
var playerOneExile = [];

var playerTwoDeck = [{
        "cid": "201",
        "name": "blue lotus",
        "type": "land",
        "text": "this does more than the white lotus",
        "mana": "5 🔵",
        "power": "0",
        "toughness": "0",
    },
    {
        "cid": "202",
        "name": "green lotus",
        "type": "land",
        "text": "this does nothing",
        "mana": "5 🟢",
        "power": "0",
        "toughness": "0",
    }
];
var playerTwoLibrary = playerTwoDeck;
var playerTwoHand = [];
var playerTwoBoard = [];
var playerTwoGraveyard = [];
var playerTwoExile = [];


app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


io.on('connection', function(socket) {

    socket.emit('chat message',
        playerOneLibrary, playerTwoLibrary,
        playerOneHand, playerTwoHand,
        playerOneBoard, playerTwoBoard,
        playerOneGraveyard, playerTwoGraveyard,
        playerOneExile, playerTwoExile);

    socket.on('chat message', function(p1l, p2l, p1h, p2h, p1b, p2b, p1g, p2g, p1e, p2e) {

        playerOneLibrary = p1l;
        playerTwoLibrary = p2l;
        playerOneHand = p1h;
        playerTwoHand = p2h;
        playerOneBoard = p1b;
        playerTwoBoard = p2b;
        playerOneGraveyard = p1g;
        playerTwoGraveyard = p2g;
        playerOneExile = p1e;
        playerTwoExile = p2e;
        console.log('better not be a loop')
        socket.broadcast.emit('chat message',
            playerOneLibrary, playerTwoLibrary,
            playerOneHand, playerTwoHand,
            playerOneBoard, playerTwoBoard,
            playerOneGraveyard, playerTwoGraveyard,
            playerOneExile, playerTwoExile
        );

    });


    socket.on('reset game', function(x) {

        console.log(playerTwoLibrary);
        if (x == true) {

            playerOneLibrary = playerOneDeck;
            playerOneHand = [];
            playerOneBoard = [];
            playerOneGraveyard = [];
            playerOneExile = [];

            playerTwoLibrary = playerTwoDeck;
            playerTwoHand = [];
            playerTwoBoard = [];
            playerTwoGraveyard = [];
            playerTwoExile = [];
            console.log('game reset');

            socket.broadcast.emit('chat message',
                playerOneLibrary, playerTwoLibrary,
                playerOneHand, playerTwoHand,
                playerOneBoard, playerTwoBoard,
                playerOneGraveyard, playerTwoGraveyard,
                playerOneExile, playerTwoExile
            );

            console.log(playerTwoLibrary);
        } else { console.log('didnt reset') }
    });
});
http.listen(3000, function() {
    console.log('listening on *:3000');
});

i am sure i am missing something and hope you guys can point me in the good direction

Answer 1

socket.broadcast.emit sends to every connected socket (in the same namespace as socket ) EXCEPT for socket . So, it sends to all the OTHER sockets, not the one represented by socket . Relevant socket.io documentation for socket.broadcast here .

If you want to send to all connected sockets, then use:

io.emit(...)

Or, if you want to just send to that one socket use:

socket.emit(...)

FYI, I find this " emit cheatsheat " which contains all the different ways you can send to be quite useful.

Socket.io + node.js - client not recieving broadcast emit

Question

1 answers

solution1
2 ACCPTED 2019-11-15 20:45:32

Socket.io + node.js - client not recieving broadcast emit

Question

1 answers

solution1 2 ACCPTED 2019-11-15 20:45:32

solution1
2 ACCPTED 2019-11-15 20:45:32