未捕获到的SyntaxError：客户端文件中已经声明了标识符“套接字”

Question

我创建了一个React应用，其中使用socket.io连接到Google Cloud Platform。当我运行客户端和服务器时，客户端文件中出现以下错误：

未捕获的SyntaxError：标识符'socket'已被声明

但是我不太清楚为什么，因为套接字是一个没有定义为全局常量的常量。可能这不是失败的原因。

以下是client.js的代码和项目的结构：

//connection to socket
const io = require('socket.io-client');
const socket = io.connect('http://localhost:1337');


// ================= visibilitychange =================
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
    // Handle page visibility change
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
}


//================= CONFIG =================
// Stream Audio
let bufferSize = 2048,
    AudioContext,
    context,
    processor,
    input,
    globalStream;

//vars
let audioElement = document.querySelector('audio'),
    finalWord = false,
    resultText = document.getElementById('ResultText'),
    removeLastWord = true,
    streamStreaming = false;


//audioStream constraints
const constraints = {
    audio: true,
    video: false
};

//================= RECORDING =================



function initRecording() {
    socket.emit('startGoogleCloudStream', ''); //init socket Google Speech Connection
    streamStreaming = true;
    AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();
    processor = context.createScriptProcessor(bufferSize, 1, 1);
    processor.connect(context.destination);
    context.resume();

    var handleSuccess = function (stream) {
        globalStream = stream;
        input = context.createMediaStreamSource(stream);
        input.connect(processor);
        processor.onaudioprocess = function (e) {
            microphoneProcess(e);
        };
    };

    navigator.mediaDevices.getUserMedia(constraints)
        .then(handleSuccess);

}

function microphoneProcess(e) {
    var left = e.inputBuffer.getChannelData(0);
    var left16 = convertFloat32ToInt16(left);
    socket.emit('binaryData', left16);
}

//================= INTERFACE =================
var startButton = document.getElementById("startRecButton");
if(startButton) {
    startButton.addEventListener("click", startRecording);
}
var endButton = document.getElementById("stopRecButton");
if(endButton){  
    endButton.addEventListener("click", stopRecording)
    endButton.disabled = true;
}


function startRecording() {
    startButton.disabled = true;
    endButton.disabled = false;
    initRecording();
}

function stopRecording() {
    // waited for FinalWord
    startButton.disabled = true;
    endButton.disabled = true;
    streamStreaming = false;
    socket.emit('endGoogleCloudStream', '');


    let track = globalStream.getTracks()[0];
    track.stop();

    input.disconnect(processor);
    processor.disconnect(context.destination);
    context.close().then(function () {
        input = null;
        processor = null;
        context = null;
        AudioContext = null;
        startButton.disabled = false;
    });
}

//================= SOCKET IO =================
socket.on('connect', function (data) {
    console.log('client connected');
    socket.emit('join', 'Server Connected to Client');
});

socket.on('endmessages', function (data) {
    console.log(data);
    resultText.appendChild(document.createTextNode(data));
});

socket.on('speechData', function (data) {
    // console.log(data.results[0].alternatives[0].transcript);
    // console.log(data.results[0]);
    var dataFinal = undefined || data.results[0].isFinal;

    if (dataFinal === false) {
        // console.log(resultText.lastElementChild);
        if (removeLastWord) { resultText.lastElementChild.remove(); }
        removeLastWord = true;

        //add empty span
        let empty = document.createElement('span');
        resultText.appendChild(empty);

        let edit = data.results[0].alternatives[0].transcript;

        resultText.lastElementChild.appendChild(document.createTextNode(edit));
        resultText.lastElementChild.appendChild(document.createTextNode('\u00A0'));

    } else if (dataFinal === true) {
        resultText.lastElementChild.remove();

        //add empty span
        let empty = document.createElement('span');
        var br = document.createElement("br");
        resultText.appendChild(empty);

        let edit = data.results[0].alternatives[0].transcript;

        resultText.lastElementChild.appendChild(document.createTextNode(edit));
        resultText.lastElementChild.appendChild(document.createTextNode('\u00A0'));
        resultText.appendChild(br);

        console.log("Google Speech sent 'final' Sentence.");
        finalWord = true;
        removeLastWord = false;
    }
});


socket.on('end', function (data) {
    console.log(data);
});

function handleVisibilityChange() {
    if (document[hidden]) {
        console.log('handleVisibilityChange:hidden');
        if (streamStreaming) {
            console.log("end");
            socket.emit('leave', 'onbeforeunload stop');
            stopRecording();
        }
      } else {
        console.log('handleVisibilityChange:show');
        startButton.disabled = false;
        endButton.disabled = true;
      }
}

//================= SANTAS HELPERS =================

// sampleRateHertz 16000 //saved sound is awefull
function convertFloat32ToInt16(buffer) {
    let l = buffer.length;
    let buf = new Int16Array(l / 3);

    while (l--) {
        if (l % 3 == 0) {
            buf[l / 3] = buffer[l] * 0xFFFF;
        }
    }
    return buf.buffer
}

这是项目的体系结构：

publicFolder
    assetsFolder
        cssFolder
        fontsFolder
        jsFolder
            client.1.js
            client.js
            socket.io.js
            socket.io.js.map
        index.html
serverFolder
    app.js //this is server
src
    components
        App.js //the wrapper component
        ComponentA.js
        ComponentB.js
    App.css
    index.js
    resgisterServiceWorker.js
.babelrc
webpack.config.js

Answer 1

我想我已经解决了，只是从此更改了到套接字的连接：

//connection to socket
const io = require('socket.io-client');
const socket = io.connect('http://localhost:1337'); 

对此

//connection to socket
const socket = io('http://localhost:1337');