虎牙开放平台文档

弹幕云游戏开发流程

弹幕云游戏基于虎牙小程序平台进行开发，以下是基于虎牙小程序平台实现一个弹幕云游戏demo(下载源码)的简要过程。

1. 创建本地项目

通过虎牙小程序CLI工具创建项目，详情参考创建项目。如图：

注意：终端类型必须选择pc主播端-面板 - 主播端面板

这里我们以BarrageGame为项目名，创建好的项目结构如图

2. 创建小程序

详情可以参考创建小程序流程。小程序运行平台选择虎牙直播。

创建好的小程序如图

请保管好您的开发者appId及appSecret，以及您的小程序id，后面连接弹幕WebSocket通道时会用到。

3. 监听弹幕消息

创建并正常启动小程序项目后，即可开始对接直播间弹幕消息。虎牙直播间弹幕消息的监听主要基于开放API实现，推荐通过hyext/communication库来实现消息的监听。

注意：由于云端运行环境不支持小程序前端SDK，弹幕云游戏只能通过开放API监听弹幕消息，不能通过小程序前端SDK监听弹幕消息！

第一步，在项目根目录下执行以下命令安装hyext/communication

npm i -D @hyext/communication

第二步，打开streamer\app.js并修改成代码：

import { UI } from '@hyext/hy-ui'
import React, { Component } from 'react'
import './app.hycss'
import { createOpenWS, WSEventIds } from "@hyext/communication";

const { View, Text } = UI

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      data:[]
    }
  }
  componentDidMount() {
    hyExt.context.getStreamerInfo().then((streamerInfo) => {
      const ws = createOpenWS({
        appId: 'your_appid',// 开发者id
        secret: 'your_secret', // 开发者密钥
        expireTimeDelta: 60 * 10, // 10分钟
        extUuid: 'your_extUuid',// 小程序id
        roomId: streamerInfo.streamerRoomId, // 直播间ID
        debug: true
      })

      // 监听ws内置事件
      ws.on(WSEventIds.open, (data) => {
        this.setState({data:[...this.state.data,'The ws has opened.']})
      })
      ws.on(WSEventIds.close, (data) => {
        this.setState({data:[...this.state.data,'The ws has closed.']})
      })

      // 监听open-api弹幕事件
      ws.on('getMessageNotice', (data) => {
        console.log(data)
        // this.setState({data:[...this.state.data, JSON.stringify(data)]})
        this.setState({data:[...this.state.data, data.sendNick + ': ' + data.content]})
      })
    })
  }

  render () {
    return (
      <View className="container">
        {this.state.data.map((item,i)=>{
          return <Text key={i}>{i+'. '}{item}</Text>
        })}
      </View>
    )
  }
}

export default App

请注意将上面代码中的开发者id、开发者密钥、小程序id以及直播间id配置好，即修改这里的配置：

   const ws = createOpenWS({
      appId: 'your_appid',// 开发者id
      secret: 'your_secret', // 开发者密钥
      expireTimeDelta: 60 * 10, // 10分钟
      extUuid: 'your_extUuid',// 小程序id
      roomId: streamerInfo.streamerRoomId, // 直播间ID
      debug: true
    })

开发者id、开发者密钥可在开发者信息查询，如图：