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

使用

chirp js sdk

对于Next.js来说不是问题，但是由于我的应用程序需要在浏览器上接收

chirp

发送的数据，所以我不得不使用WebAssembly sdk。在何处以及如何实例化和使用

chirpsdk

如前所述，我在设置它时没有遇到任何问题。 但是，

onReceived

，

onReceived

回调不会被调用

这是我在中使用的

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

class AttentEvent扩展组件{
静态异步getInitialProps（{req，query，res}）{
返回{
出席人数：查询
}
}
构造函数（）{
超级（）；
this.sdk=null；
此.state={
用户：“”，
开始：错，
等待：错，
接收：错误，
收到：“正在等待消息…”，
禁用：false
}
}
toAscii（有效载荷）{
设str=''
for（设i=0；i{
回音啁啾({
键：CHIRP_API_键，
接收时：（）=>{
console.log（“接收数据”）；
这是我的国家({
…这个州，
收到：“…”，
残疾人士：对
})
},
onReceived:data=>{
控制台日志（“收到的数据”）；
如果（data.length>0）{
这是我的国家({
…这个州，
收到：this.toAscii（数据），
禁用：false
})
}否则{
这是我的国家({
…这个州，
received:‘我没听到。试着把音量调大些？’，
禁用：false
})
}
}
})
})
这个.setState（{
…这个州，
开始：对
})
}
componentDidMount（）{
loadFirebase（）.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
这是我的国家({
…这个州，
用户：用户
})
返回用户
.getIdToken（）文件
。然后（令牌=>{
返回fetch（“/api/login”{
方法：“POST”，
标题：新标题（{'Content Type'：'application/json'}），
凭据：“相同来源”，
正文：JSON.stringify（{token}）
})
})
}否则{
路由器推送（'/'）；
}
})
这是我的国家({
…这个州，
等待：真的
})
}
handleLogout（）{
loadFirebase（）.auth（）.signOut（）
}
render（）{
const{classes}=this.props；
返回(
{
this.state.user！==null(
{
this.state.waiting？“等待代码…”:（this.state.receiving？“接收代码…”:（this.state.received？this.state.received:“装载…”）
}


{
this.startSDK（）
}}>
开始
)：对
}
);
}
}

---

我希望在收到

16kHz mono

音频消息时调用

onReceived

回调，但它没有被调用。

找到了解决我自己问题的方法，这似乎很有效

问题在于动态导入和承诺的处理方式

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)

断言失败：未定义
断言失败：未定义
出现错误时中止（“断言失败：未定义”）
at/Users/warrenwhite/Documents/MajorProj/faculty dashboard app ssr/node_modules/chirpsdk/index.js:1:10515
在z（/Users/warrenwhite/Documents/MajorProj/faculty dashboard app ssr/node_modules/chirpsdk/index.js:1:10647）
在sn（/Users/warrenwhite/Documents/MajorProj/faculty dashboard app ssr/node_modules/chirpsdk/index.js:1:75732）
在O（/Users/warrenwhite/Documents/MajorProj/faculty dashboard app ssr/node_modules/chirpsdk/index.js:1:5568）
在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
在Object.openDatabase（/Users/warrenwhite/Documents/MajorProj/faculty dashboard app ssr/node_modules/chirpsdk/index.js:1:21497）
位于Object.staticInit（/Users/warrenwhite/Documents/MajorProj/faculty dashboard app ssr/node_modules/chirpsdk/index.js:1:21983）
at/Users/warrenwhite/Documents/MajorProj/faculty dashboard应用程序ssr/node_modules/chirpsdk/index