WebRTC , socket.io, node.js: Cannot read property 'emit' of undefined?

I am trying to make a webrtc video app. In the client code, I have this: 

getUserMedia(constraints, handlemedia, errorhandle);
constraints = {video: true};
function handlemedia(stream){
    //other stuff I do here

    document.getElementById("connect").addEventListener("click", function(e){
        var socket = io.connect();
    }

    var servers = {"iceServers": [{ "url": "stun:localhost:2013"}]};
    pc = new RTCPeerConnection(servers);
    pc.onicecandidate = function (evt, socket) {
        console.log("THIS IS THE evt.candidate: ", evt.candidate);
        somecandidate = evt.candidate;
        socket.emit( "candidate", somecandidate );
    };
    pc.addStream(localStream);
    function gotDescription(desc, socket) {
        console.log("WE GOT THE DESC.");
        pc.setLocalDescription(desc);
        socket.emit( "sdp", desc);
    }

    document.getElementById("createoffer").addEventListener("click", function(e){
        pc.createOffer(gotDescription);
    });
}

And then in server.js (in node.js) code I have: 

var io = require('socket.io').listen(app);
io.sockets.on('connection', function(socket){
    socket.on("candidate", function(somecandidate){
    console.log("GOT CANDIDATE.");
    });

    socket.on("sdp", function(desc){
    console.log("Got desc");
    });
});

I realize that I am just using buttons right now, but it is just for now so that I can test it simply. I just need to get this whole webrtc thing down.

So if I run this code it says in the browser console "Cannot read property 'emit' of undefined. So obviously, it doesn't like the socket.emit stuff. Why not? What does it not like about socket.emit? 

document.getElementById("connect").addEventListener("click", function(e){
 var socket = io.connect();
}

var scopes the variables within the function in which it is defined. The socket here is visible only inside this function.

pc.onicecandidate = function (evt, socket) {
    console.log("THIS IS THE evt.candidate: ", evt.candidate);
    somecandidate = evt.candidate;
    socket.emit( "candidate", somecandidate );
};

The above var socket is not visible here so the socket will be undefined.

So in your case the buttons are actually making it more difficult to use. You'd be better off not using them at all:

getUserMedia(constraints, handlemedia, errorhandle);
constraints = {video: true};
function handlemedia(stream){
    //other stuff I do here

    var socket = io.connect();

    // Start the RTCPeerConnection and candidate gathering
    // after we've done io.connect()
    var servers = {"iceServers": [{ "url": "stun:localhost:2013"}]};
    pc = new RTCPeerConnection(servers);

    pc.onicecandidate = function (evt, socket) {
        console.log("THIS IS THE evt.candidate: ", evt.candidate);
        somecandidate = evt.candidate;
        socket.emit( "candidate", somecandidate );
    };
    pc.addStream(localStream);
        function gotDescription(desc, socket) {
        console.log("WE GOT THE DESC.");
        pc.setLocalDescription(desc);
        socket.emit( "sdp", desc);
    }

    pc.createOffer(gotDescription);
}

If you really want buttons, then wrap the whole thing above into a function that you'll use as the click handler instead of just putting the var socket = io.connect() into the handler alone.