我有JS代码，我首先使用flask建立与socketio应用的连接：
我正在我的html页面上放置麦克风按钮，点击它会触发JS中的代码以连接到python flask应用。
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="CL">
</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">
</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>
语音in.js：
/*global webkitSpeechRecognition */
(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);
// setup recognition
function initializeRecorder(strean){
audio_context = new AudioContext;
sampleRate = audio_context.sampleRate;
var audioInput = audio_context.createMediaStreamSource(stream);
console.log("Created media stream.");
var bufferSize = 4096;
// record only 1 channel
var recorder = audio_context.createScriptProcessor(bufferSize, 1, 1);
// specify the processing function
recorder.onaudioprocess = recorderProcess;
// connect stream to our recorder
audioInput.connect(recorder);
// connect our recorder to the previous destination
recorder.connect(audio_context.destination);
}
micBtn.addEventListener('click', function(event) {
var socket = io.connect('http://localhost:5000');
console.log('Check 3')
socket.on('connect', function() {
console.log('Check 4')
// subscribe to events here - THIS DOES NOT GET CALLED
socket.on('speech', function (data) {
console.log('Check 5') // THIS DOES NOT APPEAR ON CONSOLE
socket.send("sample rate:" + sampleRate);
navigator.getUserMedia({audio: true, video: false}, initializeRecorder, function(e) {
console.log('No live audio input: ' + e);
});
console.log('Check 6') // THIS DOES NOT APPEAR ON CONSOLE
console.log('Event received data:' + JSON.stringify(data));
});
});
}, false);
console.log('Check 7');
});
console.log('Check 8');
})();
flask-app.py：
import sys
import os
from flask import Flask, render_template, request,redirect, session, Markup, jsonify
from flask_socketio import SocketIO, send,emit
from flask_babel import Babel
import configparser
from speech_api_text import main
app = Flask(__name__)
app.config['SECRET_KEY'] = 'abccefg'
socketio = SocketIO(app)
babel = Babel(app)
@socketio.on('speech')
def speech_api():
try:
# I DO NOT SEE THIS PRINT IN MY CONSOLE
print('SPEECH METHOD GOT CALLED')
# THis doesnt work
#emit(main())
emit('Hello and Hi')
except Exception as e:
print('Exception in SPEEECH API is - '+str(e))
@socketio.on('connect')
def handleConnect():
try:
msg = 'Hello!'
print(msg)
emit('message', msg)
except Exception as e:
print('Exception is - ',str(e))
pass
if __name__ == '__main__':
try:
socketio.run(app)
except Exception as e:
print(str(e))
正如您所看到的，我正在使用flask代码中的JS应用连接，当我点击麦克风时，我可以看到我的控制台上出现了console.log('check 3')和console.log('Check 4')按钮。但没有任何反应，我在控制台上看不到console.log('Check 5')和console.log('Check 6')，在我的print代码下也看不到flask-app.py语句。似乎没有调用自定义事件speech。我在这里犯的错是什么？
答案 0 :(得分：0)
您没有从服务器发出主题speech中的任何内容。这就是为什么不会执行正在侦听speech事件的代码部分。
考虑在用户连接时从服务器发出一些内容emit('speech', msg)
@socketio.on('connect')
def handleConnect():
try:
msg = 'Hello!'
print(msg)
emit('speech', msg)
except Exception as e:
print('Exception is - ',str(e))
pass
if __name__ == '__main__':
try:
socketio.run(app)
except Exception as e:
print(str(e))
函数print中的speech_api语句未执行，因为函数本身未执行。可以将speech_api视为使用主题speech发送到服务器的事件的侦听器。只有在您的客户端（js代码）中您正在使用speech这样的主题socket.emit('speech', message)发出此函数时才会执行此功能。