如何在Next.js應用程序中實例化和使用Chirp WebAssembly SDK？

Question

Next.js並不是使用chirp-js-sdk問題，但是由於我的應用程序需要在瀏覽器中接收chirp發送的數據，因此我不得不使用WebAssembly SDK。 我在哪里以及如何實例化和使用chirpsdk ？

我曾在設置它的解釋沒有問題在這里 。 但是，不會調用onReceived和onReceiving回調。

這是我正在使用chirpsdk的頁面的chirpsdk 。

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>);
    }
}

我希望在接收16kHz-mono音頻消息時調用onReceived回調，但未調用它。

Answer 1

找到了我自己的問題的解決方案，這似乎很好。

問題在於動態導入和承諾的處理方式。

async startSDK() {
        this.sdk = await import ('../node_modules/chirpsdk/index')
        .then(({Chirp}) => {
            return Chirp ({
               // rest of the initialisation parameters
            })
         )
        .catch( error => {
           console.log(error.message);
         }

         this.setState({
                ...this.state,
                started: true
         })
}

它應該完成的方式。 雖然，也可以使用then..catch完成。

async startSDK(){
       try {
          const chirp = await import('../node_modules/chirpsdk/index');
          const { Chirp } = chirp;
          this.sdk = await Chirp ({
             // rest of the initialisation parameters
          )}
       } 
       catch (err) {
          console.log(err);
       }
       this.setState({
                ...this.state,
                started: true
       })
}

關於使用動態導入的說明

起初，我以為Next.js將處理的進口chirpsdk正如反應一樣。 但是，我想由於Next的SSR特性，導入無法按預期進行，這是拋出的錯誤：

Assertion failed: undefined
Assertion failed: undefined
abort("Assertion failed: undefined") at Error
    at /Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:10515
    at z (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:10647)
    at sn (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:75732)
    at O (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:5568)
    at Ne (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:14094)
    at /Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:22110
    at Object.openDatabase (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:21497)
    at Object.staticInit (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:21983)
    at /Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:27857
    at E.locateFile (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:131)
    at Object.<anonymous> (/Users/warrenwhite/Documents/MajorProj/faculty-dashboard-app-ssr/node_modules/chirpsdk/index.js:1:226)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)