web-dev-qa-db-ja.com

'ws：// localhost：3434 /'へのWebSocket接続に失敗しました：ハンドシェイク応答を受信する前に接続が閉じられました

Cmdを使用してノードserver.jsを実行し、Webブラウザーでlocalhost：3434を起動すると、次のエラーが発生します。

chromeの場合：

ハンドシェイク応答を受信する前に接続が閉じられました。

firefoxで：

Firefoxはws：// localhost：3434 /のサーバーへの接続を確立できません

Plsは助けてもらえますか

server.js

var http = require('http'),
fs = require('fs');

fs.readFile('../index.html', function (err, html) {
if (err) {
   throw err;
}
http.createServer(function (request, response) {
    response.writeHeader(200, { "Content-Type": "text/html" });
    response.write(html);
    response.end();
}).listen(3434);
});

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<script type="text/javascript" src="../../js/adapter.js"></script>-->
<!--<script type="text/javascript" src="../../js/webrtc.js"></script>-->
<title>Simple WebRTC video chat</title>
</head>
<body>
<header>
<video id="localVideo" autoplay="autoplay" muted="muted"        style="width:40%;"></video>
    <video id="remoteVideo" autoplay="autoplay" style="width:40%;"></video>
    <input type="button" id="start" onclick="start(true)" value="Start  Video"; />
</header>
<script>
    var RTCPeerConnection = null;
    var getUserMedia = null;
    var attachMediaStream = null;
    var reattachMediaStream = null;
    var webrtcDetectedBrowser = null;
    var webrtcDetectedVersion = null;

    function trace(text) {
        // This function is used for logging.
        if (text[text.length - 1] == '\n') {
            text = text.substring(0, text.length - 1);
        }
        console.log((performance.now() / 1000).toFixed(3) + ": " + text);
    }

    if (navigator.mozGetUserMedia) {
        console.log("This appears to be Firefox");

        webrtcDetectedBrowser = "firefox";

        webrtcDetectedVersion =
                        parseInt(navigator.userAgent.match(/Firefox\/([0- 9]+)\./)[1]);

        // The RTCPeerConnection object.
        RTCPeerConnection = mozRTCPeerConnection;

        // The RTCSessionDescription object.
        RTCSessionDescription = mozRTCSessionDescription;

        // The RTCIceCandidate object.
        RTCIceCandidate = mozRTCIceCandidate;

        // Get UserMedia (only difference is the prefix).
        getUserMedia = navigator.mozGetUserMedia.bind(navigator);

        // Creates iceServer from the url for FF.
        createIceServer = function (url, username, password) {
            var iceServer = null;
            var url_parts = url.split(':');
            if (url_parts[0].indexOf('stun') === 0) {
                // Create iceServer with stun url.
                iceServer = { 'url': url };
            } else if (url_parts[0].indexOf('turn') === 0 &&
                       (url.indexOf('transport=udp') !== -1 ||
                        url.indexOf('?transport') === -1)) {
                // Create iceServer with turn url.
                // Ignore the transport parameter from TURN url.
                var turn_url_parts = url.split("?");
                iceServer = {
                    'url': turn_url_parts[0],
                    'credential': password,
                    'username': username
                };
            }
            return iceServer;
        };

        // Attach a media stream to an element.
        attachMediaStream = function (element, stream) {
            console.log("Attaching media stream");
            element.mozSrcObject = stream;
            element.play();
        };

        reattachMediaStream = function (to, from) {
            console.log("Reattaching media stream");
            to.mozSrcObject = from.mozSrcObject;
            to.play();
        };

        MediaStream.prototype.getVideoTracks = function () {
            return [];
        };

        MediaStream.prototype.getAudioTracks = function () {
            return [];
        };
    } else if (navigator.webkitGetUserMedia) {
        console.log("This appears to be Chrome");

        webrtcDetectedBrowser = "chrome";
        webrtcDetectedVersion =
                   parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]);

        // Creates iceServer from the url for Chrome.
        createIceServer = function (url, username, password) {
            var iceServer = null;
            var url_parts = url.split(':');
            if (url_parts[0].indexOf('stun') === 0) {
                // Create iceServer with stun url.
                iceServer = { 'url': url };
            } else if (url_parts[0].indexOf('turn') === 0) {
                if (webrtcDetectedVersion < 28) {
                    var url_turn_parts = url.split("turn:");
                    iceServer = {
                        'url': 'turn:' + username + '@' + url_turn_parts[1],
                        'credential': password
                    };
                } else {
                    iceServer = {
                        'url': url,
                        'credential': password,
                        'username': username
                    };
                }
            }
            return iceServer;
        };

        // The RTCPeerConnection object.
        RTCPeerConnection = webkitRTCPeerConnection;

        // Get UserMedia (only difference is the prefix).
        // Code from Adam Barth.
        getUserMedia = navigator.webkitGetUserMedia.bind(navigator);

        // Attach a media stream to an element.
        attachMediaStream = function (element, stream) {
            if (typeof element.srcObject !== 'undefined') {
                element.srcObject = stream;
            } else if (typeof element.mozSrcObject !== 'undefined') {
                element.mozSrcObject = stream;
            } else if (typeof element.src !== 'undefined') {
                element.src = URL.createObjectURL(stream);
            } else {
                console.log('Error attaching stream to element.');
            }
        };

        reattachMediaStream = function (to, from) {
            to.src = from.src;
        };

        // The representation of tracks in a stream is changed in M26.
        // Unify them for earlier Chrome versions in the coexisting period.
        if (!webkitMediaStream.prototype.getVideoTracks) {
            webkitMediaStream.prototype.getVideoTracks = function () {
                return this.videoTracks;
            };
            webkitMediaStream.prototype.getAudioTracks = function () {
                return this.audioTracks;
            };
        }

        if (!webkitRTCPeerConnection.prototype.getLocalStreams) {
            webkitRTCPeerConnection.prototype.getLocalStreams = function ()              {
                return this.localStreams;
            };
            webkitRTCPeerConnection.prototype.getRemoteStreams = function ()     {
                return this.remoteStreams;
            };
        }
    } else {
        console.log("Browser does not appear to be WebRTC-capable");
    }
    var localVideo;
    var remoteVideo;
    var peerConnection;
    var localStream;
    var optional = { optional: [{ DtlsSrtpKeyAgreement: true }] }
    var peerConnectionConfig = { 'iceServers': [{ 'url':    'stun:stun.services.mozilla.com' }, { 'url': 'stun:stun.l.google.com:19302' }] };

    navigator.getUserMedia = navigator.getUserMedia ||  navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
    window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;
    window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;

    localVideo = document.getElementById("localVideo");
    remoteVideo = document.getElementById("remoteVideo");
    serverConnection = new WebSocket('ws://localhost:3434');
    serverConnection.onmessage = gotMessageFromServer;

    var constraints = {
        video: true,
        audio: true,
    };

    if (navigator.getUserMedia) {
        navigator.getUserMedia(constraints, getUserMediaSuccess,  getUserMediaError);
    } else {
        alert('Your browser does not support getUserMedia API');
    }
    function getUserMediaSuccess(stream) {
        localStream = stream;
        localVideo.src = window.URL.createObjectURL(stream);
    }

    function start(isCaller) {
        peerConnection = new RTCPeerConnection(peerConnectionConfig, optional);
        peerConnection.onicecandidate = gotIceCandidate;
        peerConnection.onaddstream = gotRemoteStream;
        peerConnection.addStream(localStream);

        if (isCaller) {
            peerConnection.createOffer(gotDescription, createOfferError);
        }
    }

    function gotMessageFromServer(message) {
        if (!peerConnection) start(false);

        var signal = JSON.parse(message.data);
        if (signal.sdp) {
            peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp), function () {
                peerConnection.createAnswer(gotDescription, createAnswerError);
            });
        } else if (signal.ice) {
            peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice));
        }
    }

    function gotIceCandidate(event) {
        if (event.candidate != null) {
            serverConnection.send(JSON.stringify({ 'ice': event.candidate }));
        }
    }

    function gotDescription(description) {
        console.log('got description');
        peerConnection.setLocalDescription(description, function () {
            serverConnection.send(JSON.stringify({ 'sdp': description }));
        }, function () { console.log('set description error') });
    }

    function gotRemoteStream(event) {
        console.log("got remote stream");
        remoteVideo.src = window.URL.createObjectURL(event.stream);
    }

    // Error functions....

    function getUserMediaError(error) {
        console.log(error);
    }

    function createOfferError(error) {
        console.log(error);
    }

    function createAnswerError(error) {
        console.log(error);
    }
 </script>

</body>
</html>
node.jswebsocketlocalhostwebrtc
6
CN1

WebSocket接続を処理するには、httpサーバーで「アップグレード」イベントを処理する必要があります（ここを参照してください https://nodejs.org/api/http.html#http_event_upgrade_1 ）

たとえば、これが実際の例です（ws-moduleを使用します）。

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({noServer: true});

var http = require('http'),
fs = require('fs');

fs.readFile('../index.html', function (err, html) {
    if (err) {
       throw err;
    }
    var server = http.createServer(function (request, response) {
        response.writeHeader(200, { "Content-Type": "text/html" });
        response.write(html);
        response.end();
    })

    server.listen(3434);
    server.on('upgrade', wss.handleUpgrade);
    wss.on('connection', function connection(ws) {
        ws.on('message', function incoming(message) {
            console.log('received: %s', message);
        });

        ws.send('something');
    });
});

Wsのドキュメントは次のとおりです- https://github.com/websockets/ws

9
zag2art