connection send can running function many time never stop

[sabardotnet]

I firing connection.send with button clik when I clik button with double clik, it process a function in connection.on("text, function(){ myfuntion })many times n never stop, how to prevent that case. sorh bad english..

[sitegui]

Hi @sabardotnet ,

Can you post some code that reproduces this behavior?

[sabardotnet]

var connection;
var webcam;
var datacam;

window.onload = function() {
  var video = document.getElementById("video");
  var mp3 = document.getElementById("mp3");
  var canvas = document.getElementById("canvas");
  var pictureButton = document.getElementById("takePicture");
  var stopButton = document.getElementById("stop");
  var depan = document.getElementById("depan");
  var frame2 = document.getElementById("frame2");
  var frame3 = document.getElementById("frame3");
  var frame4 = document.getElementById("frame4");
  var timer  = document.getElementById("timer");
  webcam = new Webcam(video, canvas);
  webcam.initialize();
  if (!webcam.isSupported()) {
    alert("Your browser doesn't support webrtc");
    return;
  }
//alert(window.location.hostname);
    connection = new WebSocket("ws://localhost:8081")
    connection.onopen = function () {
        document.getElementById("info_server").innerHTML="Node JS Running";
        // document.getElementById("form").onsubmit = function (event) {
            // var msg = document.getElementById("msg")
            // if (msg.value)
                // connection.send(msg.value)
            // msg.value = ""
            // event.preventDefault()
        // }    
    }
    connection.onclose = function () {
        console.log("Connection closed")
        document.getElementById("info_server").innerHTML="Node JS Closed / Terputus";
    }
    connection.onerror = function () {
        console.error("Connection error")
        document.getElementById("info_server").innerHTML="Node JS Error";
    }
    connection.onmessage = function (event) {
        //alert(event.data);
        if(event.data!=null){
            shoot(event.data);
        }
        //alert(event.data);
        // var div = document.createElement("div")
        // div.textContent = event.data
        // document.body.appendChild(div)
    }  

  webcam.start();

/*   pictureButton.addEventListener("click", function() {
      console.log(location.hostname);
    //  webcam.capture()
    $('#gambar_face').attr('src','sales_sinarmas/img/ready.png');
    setTimeout(function(){
        $('#gambar_face').attr('src','sales_sinarmas/img/face.png');
        connection.send("awal");    
    }, 2000);

  }); */

  /* depan.addEventListener("click", function() {
    $('#gambar_face').attr('src','ready.png');
    setTimeout(function(){
                $('#gambar_face').attr('src','face.png');
        connection.send("awal");    
    }, 5000);   //webcam.capture();
  }); */
  stopButton.addEventListener("click", function() {
    webcam.end();
  });
  frame2.addEventListener("click", function() {
     // connection.send("fr2");
    // data=webcam.capture();
    watermarkedDataURL(canvas,"fr2");
  });  
  frame3.addEventListener("click", function() {
      //connection.send("fr3");
    // data=webcam.capture();
     watermarkedDataURL(canvas,"fr3");
  });  
  frame4.addEventListener("click", function() {
     // connection.send("fr4");
    //data=webcam.capture();
    watermarkedDataURL(canvas,"fr4");   
  });
  $('#run_node').on('click', function() {
    $.ajax({
        url : 'run.php'
    }).done(function(data) {
        console.log(data);
    });
});
};  
function watermarkedDataURL(canvas,text){
  if(datacam==undefined){
      alert('Tekan Take Picture Terlebih dulu');
      return false;
  }
  var tempCanvas=document.getElementById("canvas2");
  var tempCtx=tempCanvas.getContext('2d')
  // var cw,ch;
  cw=tempCanvas.width=canvas.width;
  ch=tempCanvas.height=canvas.height;
  tempCtx.drawImage(canvas,0,0);
 // tempCtx.font="24px verdana";
  var frame = document.getElementById(text);
  tempCtx.drawImage(frame,0,0);
  /* data2=tempCanvas.toDataURL('image/png');
    $.ajax({ 
        type: "POST", 
        url: 'kamera/simpan',
        //dataType: 'text',
        data: {
            data : data2
            }
    }); */

//  return data2;
  //var textWidth=tempCtx.measureText(text).width;
  //var img = new Image;
  //img.src ='frame2.png';
  //tempCtx.putImageData(10, 10, 70);
/*  tempCtx.globalAlpha=.50;
  tempCtx.fillStyle='white'
  tempCtx.fillText(text,cw-textWidth-10,ch-20);
  tempCtx.fillStyle='black'
  tempCtx.fillText(text,cw-textWidth-10+2,ch-20+2);
  */
  // just testing by adding tempCanvas to document
 // document.body.appendChild(tempCanvas);
  //return(tempCanvas.toDataURL());
}
function shoot(fr){
    var counter=3;
    id=setInterval(function() {

    counter--;
    if(counter < 0) {
        counter=3;
        mp3.play();
        datacam=webcam.capture();

        clearInterval(id);

        setTimeout(function(){
                $('#myModal').modal('show');
        }, 1000);
        setTimeout(function(){
            $('#myModal').modal('hide');
        }, 2000);
        timer.innerHTML='3';
    } else {
        timer.innerHTML = counter.toString();
    }
  }, 1000);

}

my trigger 

        $('#takePicture').on("click", function() {
            console.log(location.hostname);
            //  webcam.capture()
            $('#gambar_face').attr('src','<?php echo base_url();?>img/ready.png');
            setTimeout(function(){
                $('#gambar_face').attr('src','<?php echo base_url();?>img/face.png');
                connection.send("awal");    
            }, 1000);
        });

your websocket chat 

var http = require("http")
var ws = require("../../")
var fs = require("fs")

http.createServer(function (req, res) {
    fs.createReadStream("index.html").pipe(res)
}).listen(8080)

var server = ws.createServer(function (connection) {
    connection.nickname = null
    connection.on("text", function (str) {
        broadcast(str)
        // if (connection.nickname === null) {
        //  connection.nickname = str
            // broadcast(str)
        // } else
            // broadcast("["+connection.nickname+"] "+str)
    })
    connection.on("close", function () {
        //broadcast(connection.nickname+" left")
    })
})
server.listen(8081)

function broadcast(str) {
    server.connections.forEach(function (connection) {
        connection.sendText(str)
    })
}

[sabardotnet]

sorry the problem is setinterval. thanks for your response