我们正在连接到网络套接字,发送一些音频,并接收语音转录(基本语音到文本)。我提供的代码是工作代码的粗略版本。
我们能够获得转录。问题在于关闭 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)));
最佳答案
尝试通过在 close() 内传递 TRUE 来强制关闭连接
this.connection.close(true);
希望有帮助
关于javascript - websocket.close()函数继续运行后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51423902/