如何在Next.js应用中实例化和使用Chirp WebAssembly SDK？

Question

使用chirp-js-sdk对Next.js来说不是问题，但是因为我的应用程序需要在浏览器上接收chirp发送的数据，所以我必须使用WebAssembly开发工具包。在哪里以及如何实例化和使用chirpsdk？

我把它设置成解释过的here没有任何问题。但是，不会调用onReceived、onReceiving回调函数。

这是我正在使用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

找到了我自己的问题的解决方案，这似乎很好用。

问题出在动态导入和promise的处理方式上。

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会像React一样处理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)