Question

我正在运行python flask个应用程序，我在html页面调用javascript文件（使用<script src=....>）。这是我的html文件：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title1</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="static/chat/js/jquery.timeago.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
    <script data-main="scripts/main" src="require.js"></script>
    <link rel="stylesheet" href="speech.css">

</head>

<body>
<meta charset="UTF-8">
 <nav class="navbar-left" height="100" style="background-color: #092A66 !important;">
      <a class="navbar-brand" padding-top=0 padding-bottom=0 href="#">
        <img src="image.jpg"  height="100" alt="">
      </a>

    </nav>
 <br><br>

 <div class="container">
                <div id="chat" class="jumbotron" style="height:600px;background-color:white">
                    <div id="conversations" style="overflow-y: scroll; height:500px;overflow:auto; ">
                          <div class="arrow"></div>
                              <ul class="ChatLog">
                              </ul>
                          </div>
                    </div>

                    <div id="compose-message">
                        <label for="new-input-message">{{gettext('Message')}}</label>
                        <input type="text" id="new-input-message" class="speech-input" aria-describedby="new-input-message-help-block" name="eng-input" lang = "en" disabled="false">
                        <small id="new-input-message-help-block" class="form-text text-muted">
                          {{gettext('Hit enter to send message')}}
                        </small>
                    </div>
                </div>
</div>
<script src="static/speech-in.js"></script>   
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>

<script>

$( document ).ready(function()
{

var socket = io.connect('http://localhost:5000');

// OTHER IMPORTANT CODE FOR FURTHER PROCESSING
 .
 . 
 .
});

</script>

在上面的代码中，我将socket.io包含在head文件的html中，然后我包含speech-in.js文件，其中我要使用套接字连接。我目前在speech-in.js中的代码是：

语音in.js：

(function() {
    'use strict';

    // check for support (webkit only)
    if (!('webkitSpeechRecognition' in window)) return;

    var talkMsg = 'Speak now';
    // seconds to wait for more input after last
    var defaultPatienceThreshold = 6;

    function capitalize(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
    console.log('Check 1');
    var inputEls = document.getElementsByClassName('speech-input');

    [].forEach.call(inputEls, function(inputEl) {
        var patience = parseInt(inputEl.dataset.patience, 10) || defaultPatienceThreshold;
        var micBtn, micIcon, holderIcon, newWrapper;
        var shouldCapitalize = true;

        // gather inputEl data
        var nextNode = inputEl.nextSibling;
        var parent = inputEl.parentNode;
        var inputRightBorder = parseInt(getComputedStyle(inputEl).borderRightWidth, 10);
        var buttonSize = 0.8 * (inputEl.dataset.buttonsize || inputEl.offsetHeight);

        // default max size for textareas
        if (!inputEl.dataset.buttonsize && inputEl.tagName === 'TEXTAREA' && buttonSize > 26) {
            buttonSize = 26;
        }

        // create wrapper if not present
        var wrapper = inputEl.parentNode;
        if (!wrapper.classList.contains('si-wrapper')) {
            wrapper = document.createElement('div');
            wrapper.classList.add('si-wrapper');
            wrapper.appendChild(parent.removeChild(inputEl));
            newWrapper = true;
        }
        console.log('Check 2');
        // create mic button if not present
        micBtn = wrapper.querySelector('.si-btn');
        if (!micBtn) {
            micBtn = document.createElement('button');
            micBtn.type = 'button';
            micBtn.classList.add('si-btn');
            micBtn.textContent = 'speech input';
            micIcon = document.createElement('span');
            holderIcon = document.createElement('span');
            micIcon.classList.add('si-mic');
            holderIcon.classList.add('si-holder');
            micBtn.appendChild(micIcon);
            micBtn.appendChild(holderIcon);
            wrapper.appendChild(micBtn);

            // size and position mic and input
            micBtn.style.cursor = 'pointer';
            micBtn.style.top = 0.125 * buttonSize + 'px';
            micBtn.style.height = micBtn.style.width = buttonSize + 'px';
            inputEl.style.paddingRight = buttonSize - inputRightBorder + 'px';
        }

        // append wrapper where input was
        if (newWrapper) parent.insertBefore(wrapper, nextNode);

        console.log('Check 3');

        // GOING TO CALL PYTHON FUNCTION

        $( document ).ready(function(){


        //Receive a new message
        socket.on('speech', function(msg) {
        var time = new Date();
        time_str = time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
             new_msg='<li class="ChatLog__entry"> <img class="ChatLog__avatar" src="static/chat/images/Assistant.png" /> <p class="ChatLog__message"> '+msg+' <time class="ChatLog__timestamp">'+time_str+'</time> </p> </li>'

             $("#conversations ul").append(new_msg)
             $('#new-input-message').prop('disabled', false);

            });

        });

});
    console.log('Check 4');
})();

正如您所看到的，我正在使用socket.on，但由于socket为unrecognizable，因此会引发错误。我在socket.io文件中包含html类，我也在html文件中建立了与它的连接，但该javascript文件中不显示该连接。

我还执行了python flask应用程序，它具有一个符合条件@socket.on('speech')的函数。

我在这里犯了什么错误，如何纠正？

Answer 1

socket对象在speech-in.js文件中不可用，因为它不在全局范围内。

收到socket事件后，应在回调中订阅所有connect个事件：

var socket = io.connect('http://localhost:5000');

socket.on('connect', function() {

   // subscribe to events here
   socket.on('custom_event_from_flask', function (data) {
      console.log('Event received data:' + JSON.stringify(data));
   });
});

其中一个选项是将套接字初始化从speech-in.js移到index.html文件中。但是，如果您希望项目增长，最好更改客户端（JS），使其至少使用JS es6 modules进行逻辑组织。

使用flask从javascript代码执行python函数时出错

1 个答案: