RangeError: Maximum call stack size exceeded. Can anyone help me?

Question

I have an "input type text" and a selection. The options of the selection is: say, whisper, yell. I want to color the text example: if selection.value is "say" then the color be red. Here is my code for this:

<script src="/socket.io/socket.io.js"></script>
<script>

    let akarmi = undefined;

    var socket = io.connect('http://192.168.0.113:3000');
    const input = document.getElementById('inp');
    const button = document.getElementById('sub');
    const container = document.createElement("div");

    input.id = "messeage-input";
    button.id = "messeage-send";
    container.id = "messeage-container";

    document.body.appendChild(input);
    document.body.appendChild(button);
    document.body.appendChild(container);

    socket.on("message", function (data) {
        const value  = document.getElementById("select").value;
        const span = document.createElement("span");
        console.log(data.type)
        const text_node = document.createTextNode(data.ip.substring(17, 20) + ": [" + data.type + "]: " + data.message);

        if (value == "whisp") {
            //span.style.backgroundColor = "rgb(60,60,70)";
            span.style.color = "rgb(120,60,120)";
        }

        if (value == "yell") {
            //span.style.backgroundColor = "rgb(60,70,60)";
            span.style.color = "rgb(60,180,120)";
        }

        if (value == "say") {
            //span.style.backgroundColor = "rgb(70,60,60)";
            span.style.color = "rgb(120,60,60)";
        }

        span.appendChild(text_node);
        container.appendChild(span);
        container.appendChild(document.createElement("br"));

        console.log((performance.now() - akarmi)/1000);

        console.log("asdas");

    });

    button.onclick = function (event) {

        socket.emit("message", {message: input.value});
        socket.emit("type", {type: document.getElementById("select").value});
        input.value = "";
        console.log("lefut");   
        akarmi = performance.now();
    }

</script>

and in the server.js I can't define data.type:

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

  socket.on("message", function (data) {
  data.ip = socket.handshake.address;
  data.type = socket.on("type", function (data){
    io.emit('type', data)
    console.log(data)
  });
  io.emit("message", data);
  });
}); 

And this returns with the Error: RangeError: Maximum call stack size exceeded

Can anyone help me?

Answer 1

You're emitting message event, whenever you receive a message event. Change the message event to something like serverMessage and clientMessage .

So that the server code will look like:

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

    socket.on("clientMessage", function (data) {
       data.ip = socket.handshake.address;
       data.type = socket.on("clientType", function (data){
         io.emit('serverType', data)
         console.log(data)
       });
       io.emit("serverMessage", data);
    });
}); 

Similar change needs to be done on client side too.