WebRTC，socket.io，node.js：無法讀取未定義的屬性'emit'？

Question

我正在嘗試制作一個webrtc視頻應用。 在客戶端代碼中，我有這個：

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);
    });
}

然后在server.js（在node.js中）代碼中，我有：

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");
    });
});

我意識到我現在只是在使用按鈕，但這只是現在，因此我可以對其進行簡單的測試。 我只需要把整個webrtc的事情弄下來。

因此，如果我運行此代碼，它將在瀏覽器控制台中顯示“無法讀取未定義的屬性'emit'。很明顯，它不喜歡socket.emit的東西。為什么不呢？socket.emit的不一樣嗎？

Answer 1

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

var將變量定義在其定義的函數中。 此處的socket僅在此函數內部可見。

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

上面的var socket在這里不可見，因此該socket將是undefined 。

因此，根據您的情況，按鈕實際上使它變得更難使用。 您最好完全不使用它們：

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);
}

如果您確實想要按鈕，則將上面的全部內容包裝到一個將用作單擊處理程序的函數中，而不是僅將var socket = io.connect()放入處理程序中。