Использование chirp-js-sdk не было проблемой для Next.js, но так как мое приложение требовало получать данные, отправленные chirp в браузер, мне пришлось использовать WebAssembly SDK.Где и как мне создать и использовать chirpsdk?
У меня не было проблем с настройкой, как объяснено здесь .Однако, обратные вызовы onReceived, onReceiving не вызывают.
Это фрагмент страницы, которую я использую chirpsdk in.
class AttendEvent extends Component {
static async getInitialProps({req, query, res}) {
return {
attendString: query
}
}
constructor() {
super();
this.sdk = null;
this.state = {
user: '',
started: false,
waiting: false,
receiving: false,
received: 'Awaiting messages..',
disabled: false
}
}
toAscii(payload) {
let str = ''
for (let i = 0; i < payload.length; i++) {
str += String.fromCharCode(payload[i])
}
return str
}
async startSDK() {
this.sdk = await import ('../node_modules/chirpsdk/index').then( ({Chirp}) => {
return Chirp({
key: CHIRP_API_KEY,
onReceiving: () => {
console.log('Receving Data');
this.setState({
...this.state,
received: '...',
disabled: true
})
},
onReceived: data => {
console.log("Received Data");
if (data.length > 0) {
this.setState({
...this.state,
received: this.toAscii(data),
disabled: false
})
} else {
this.setState({
...this.state,
received: `I didn't hear that. Try turning the volume up?`,
disabled: false
})
}
}
})
})
this.setState({
...this.state,
started: true
})
}
componentDidMount() {
loadFirebase().auth().onAuthStateChanged(user => {
if (user) {
this.setState({
...this.state,
user: user
})
return user
.getIdToken()
.then(token => {
return fetch('/api/login', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json' }),
credentials: 'same-origin',
body: JSON.stringify({ token })
})
})
} else {
Router.push('/');
}
})
this.setState({
...this.state,
waiting: true
})
}
handleLogout() {
loadFirebase().auth().signOut()
}
render() {
const { classes } = this.props;
return (
<React.Fragment>
<Navbar page="AttendEvent" />
{
this.state.user !== null ? (
<Grid
container
spacing={0}
direction="row"
alignItems="center"
justify="center"
style={{ minHeight: '90vh' }}
>
<Typography variant="h1">
{
this.state.waiting ? "Waiting for code..." : (this.state.receiving ? "Receiving code...": (this.state.received ? this.state.received : "Mounting...") )
}
</Typography> <br/>
<Button variant="contained" color="primary" onClick={() => {
this.startSDK()
}}>
START
</Button>
</Grid>) : true
}
</React.Fragment>);
}
}
Iожидал, что обратный вызов onReceived будет вызван при получении 16kHz-mono звуковых сообщений, но он не был вызван.