【发布时间】：2018-04-02 22:19:14
【问题描述】：
我正在运行 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>
在上面的代码中，我在html 文件的head 中包含socket.io，然后我在其中包含我想使用套接字连接的speech-in.js 文件。我在speech-in.js 中的当前代码是：
speech-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。我在我的html 文件中包含了socket.io 类，并且我也在html 文件中建立了与它的连接，但该连接在此javascript 文件中不可见。
我还执行了 python 烧瓶应用程序，该应用程序具有路由 @socket.on('speech') 限定的函数。
我在这里犯了什么错误，我该如何纠正？
【问题讨论】：
标签： javascript python flask socket.io