我们正在连接到网络套接字,发送一些音频,并接收语音的字幕(基本语音到文本)。我提供的代码是工作代码的粗略版本。
我们能够获得转录本。问题在于关闭websocket。当websocket关闭时,sendMessage()
函数将继续被重复调用,即使它仅在代码中的某个位置被调用,并且仅当我们发送音频时(您会看到我们使用相同的函数发送配置,但是我检查了一下,它不是正在发送的配置)
class MyComponent extends Component {
constructor(props) {
super(props);
this.initConnection = this.initConnection.bind(this);
this.onOpen = this.onOpen.bind(this);
this.onClose = this.onClose.bind(this);
this.onMessage = this.onMessage.bind(this);
this.onError = this.onError.bind(this);
this.sendMessage = this.sendMessage.bind(this);
this.toInt16 = this.toInt16.bind(this);
}
componentDidMount() {
this.initConnection();
}
// Open the websocket connection
initConnection = () => {
this.connection = new WebSocket("wss://app.projectwalrus.com/ws");
this.connection.onopen = event => { this.onOpen(event) };
this.connection.onclose = event => { this.onClose(event) };
this.connection.onmessage = event => { this.onMessage(event) };
this.connection.onerror = event => { this.onError(event) };
}
onOpen = event => {
// Only send the config if the connection is open
if (this.connection.readyState === 1) {
let config = { /* my config */ }
this.sendMessage(JSON.stringify(config));
}
}
onClose = event => { console.log(event); }
onMessage = event => { console.log(event); }
onError = event => { console.log(event); }
// ****
// This is the function that keeps getting called
// ****
sendMessage = (message) => {
if (this.connection.readyState === 1) {
this.connection.send(message)
}
return false;
}
startRecording = () => {
this.setState({ record: true });
if (this.connection.readyState === 3) {
this.initConnection();
}
if (this.connection.readyState === 1) {
// request permission to access audio stream
navigator.mediaDevices
.getUserMedia({ audio: true })
.then(stream => {
// ****
// This is the only place where we are calling this function
// ****
this.sendMessage(this.toInt16(audioIn));
}).catch(console.error);
}
}
stopRecording = () => {
if (this.connection.readyState === 1) {
this.connection.close();
this.setState({
record: false
});
}
}
render() {
const { classes } = this.props;
return (
<Wrapper>
<TextField
name="text"
multiline
margin="normal"
// this.props.dictation is the returned value from the websocket
value={ this.props.dictation }
/>
<div align="center">
<Button onClick={this.startRecording} type="button">Start</Button>
<Button onClick={this.stopRecording} type="button">Stop</Button>
</div>
</Wrapper>
);
}
}
function mapStateToProps(state) {
return {
token: state.token,
dictation: state.dictation,
alert: state.alert
};
}
export default withRouter(connect(mapStateToProps, userActions)(withStyles(styles, { withTheme: true })(WalrusPad)));
答案 0 :(得分:0)
通过在close()内部传递TRUE来尝试强制关闭连接
this.connection.close(true);
可能有帮助