leihuo-cloud-game-react v0.5.86

leihuo-cloud-game-react

云游戏 react 组件

Install

npm install --save leihuo-cloud-game-react

Usage

单个实例

单实例默认为全屏模式

import React, { Component } as React from 'react'
import CloudGame, { isSupport, getGameDataOf } from 'cloud-game-react'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.onStart = this.onStart.bind(this);
    this.onShutdown = this.onShutdown.bind(this);
    this.onStop = this.onStop.bind(this);
  }

  componentDidMount() {
    // 平台是否支持云游戏
    console.log(isSupport());
    console.log(getGameDataOf('NSH'));
  }

  /**
   * 开始游戏回调
   * @public
   */
  onStart(gameData) {
    console.log("onStart", gameData);
  }

  /**
   * 手动退出游戏回调
   * @public
   */
  onStop(gameData) {
    console.log("onStop", gameData);
  }

  /**
   * 调度退出游戏回调
   * @public
   */
  onShutdown(gameData) {
    console.log("onShutdown", gameData);
  }

  render() {
    return (
        <CloudGame
          logger={true}
          scheduleENV="test"
          gameId="NSH"
          onStart={this.onStart}
          onStop={this.onStop}
          onShutdown={this.onShutdown}
        />
    );
  }
}

窗口模式

窗口模式，需要传入容器 dom 对应的 ref

import React, { Component } from "react";
import CloudGame, { isSupport, getGameDataOf } from "leihuo-cloud-game-react";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      connected: false,
      activeId: 0
    };

    // 容器ref
    this.containerRef = React.createRef();

    // 事件回调
    this.onStart = this.onStart.bind(this);
    this.onStop = this.onStop.bind(this);
    this.onShutdown = this.onShutdown.bind(this);
  }

  componentDidMount() {
    // 平台支持情况
    isSupport();
    // 获取游戏详细信息
    getGameDataOf("NSH");
  }

  /**
   * 开始游戏回调
   * @public
   */
  onStart(gameData) {
    // console.log("onStart", gameData);
  }

  /**
   * 手动退出游戏回调
   * @public
   */
  onStop(gameInstance) {
    window.location.reload();
  }

  /**
   * 调度退出游戏回调
   * @public
   */
  onShutdown(gameInstance) {
    window.location.reload();
  }

  render() {
    const gameVersionId = "2c49453b331a806544d0ec1ced6dc08f2703fe85";

    return (
      <div
        className={`game-container ${
          this.state.activeId === 0 ? "active" : ""
        }`}
        ref={this.containerRef}
      >
        <CloudGame
          debug={false}
          logger={false}
          scheduleENV="dailyBuild"
          urs="chenzelun@corp.netease.com~1574918819"
          gameId="NSH"
          ref={this.containerRef}
          gameVersionId={gameVersionId}
          withRecord={false}
          onStart={this.onStart}
          onStop={this.onStop}
          onShutdown={this.onShutdown}
        />
      </div>
    );
  }
}

同时打开多个实例

云游戏默认是全屏展示游戏，如果需要自定义游戏窗口大小，需要传入容器的 ref。

:warning: 关于建立 RTCPeerConnection 如果页面需要展示多个游戏实例，需要一个游戏连接完成之后（即 onConnectionStateChange 返回为状态为 connected），再进行下一个游戏的连接 ，请不要同时去连接多个游戏。因为浏览器在同时连接多个 WebRTC 时，会出现连接状态的返回状态错误的问题。可以按照下面的示例代码，进行多个游戏的连接。

:warning: 关于控制流 因为键鼠通常只有一套，所以默认的行为是：控制指令是同时发送给多个实例的，但大多的情况是控制指令只需要发给单个实例。通过动态的修改controllerEnable属性，来控制是否发送控制指令。详情可以查看下面的示例。

多实例实例代码

import React, { Component } from "react";
import CloudGame, { isSupport, getGameDataOf, resetKeys } from "leihuo-cloud-game-react";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      connected: false,
      activeId: 0
    };

    // 容器ref
    this.containerRef = React.createRef();
    this.containerRef2 = React.createRef();

    // 事件回调
    this.onStart = this.onStart.bind(this);
    this.onStop = this.onStop.bind(this);
    this.onShutdown = this.onShutdown.bind(this);
    this.onUpdateRtcStatus = this.onUpdateRtcStatus.bind(this);
    this.onConnectionStateChange = this.onConnectionStateChange.bind(this);
  }

  componentDidMount() {
    // 平台支持情况
    isSupport();
    // 获取游戏详细信息
    getGameDataOf("NSH");
  }

  /**
   * onDataChannel回调
   * @public
   */
  onDataChannel(channel) {
    // console.log("onDataChannel", channel);
  }

  /**
   * 开始游戏回调
   * @public
   */
  onStart(gameData) {
    // console.log("onStart", gameData);
  }

  /**
   * 手动退出游戏回调
   * @public
   */
  onStop(gameInstance) {
    window.location.reload();
  }

  /**
   * 调度退出游戏回调
   * @public
   */
  onShutdown(gameInstance) {
    window.location.reload();
  }

  /**
   * rtc状态更新回调
   * @public
   */
  onUpdateRtcStatus(status) {
    // console.log(status);
  }

  /**
   * webRTC peer connection 状态变化回调
   * 当实例1的rtc连接建立之后，再连接第二个实例
   * 也就是onConnectionStateChange返回的状态为connected之后，再进行其他的实例的连接
   * 不然会出现一些控制流错误的问题
   * @public
   */
  onConnectionStateChange(state, data) {
    if (state === "connected") {
      this.setState({
        connected: true
      });
    }
  }

  /**
   * 修改active状态
   * 根据activeId，动态修改controllerEnable属性
   * 控制是否给示例控制信号
   * @public
   */
  onChangeActiveId(id) {
    this.setState({ activeId: id });
  }

  render() {
    const gameVersionId = "2c49453b331a806544d0ec1ced6dc08f2703fe85";

    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column"
        }}
      >
        <div
          className={`game-container ${
            this.state.activeId === 0 ? "active" : ""
          }`}
          onMouseEnter={() => {
            resetKeys()
            this.onChangeActiveId(0)
          }}
          ref={this.containerRef}
        >
          <CloudGame
            windowNo={0}
            debug={false}
            logger={false}
            scheduleENV="dailyBuild"
            urs="chenzelun@corp.netease.com~1574918819"
            gameId="NSH"
            ref={this.containerRef}
            controllerEnable={this.state.activeId === 0}
            startWithPointerLock={false}
            gameVersionId={gameVersionId}
            startWithFullScreen={false}
            withRecord={false}
            onScheduleChange={this.onScheduleChange}
            onStart={this.onStart}
            onStop={this.onStop}
            onControllerChannel={this.onDataChannel}
            onDataStreamChannel={this.onDataChannel}
            onShutdown={this.onShutdown}
            onUpdateRtcStatus={this.onUpdateRtcStatus}
            onConnectionStateChange={this.onConnectionStateChange}
          />
        </div>

        <div
          className={`game-container ${
            this.state.activeId === 1 ? "active" : ""
          }`}
          ref={this.containerRef2}
          onMouseEnter={() => {
            resetKeys()
            this.onChangeActiveId(1)
          }}
        >
          {this.state.connected ? (
            <CloudGame
              windowNo={1}
              debug={false}
              logger={false}
              scheduleENV="dailyBuild"
              gameId="NSH"
              ref={this.containerRef2}
              controllerEnable={this.state.activeId === 1}
              startWithPointerLock={false}
              gameVersionId={gameVersionId}
              startWithFullScreen={false}
              withRecord={false}
              onScheduleChange={this.onScheduleChange}
              onStart={this.onStart}
              onStop={this.onStop}
              onControllerChannel={this.onDataChannel}
              onDataStreamChannel={this.onDataChannel}
              onShutdown={this.onShutdown}
              onUpdateRtcStatus={this.onUpdateRtcStatus}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

Props

游戏事件埋点

目前只有 L12 支持埋点，具体的埋点事件有：

Methods

isSupport 是否支持云游戏

getGameDataOf 获取游戏详细信息

获取调度 host 地址 getScheduleHostOf

获取 RTC 信令交换代理地址 getRTCApiOf

多实例切换实例前清空键盘 resetKeys

使用:

import CloudGame, {
  isSupport,
  getGameDataOf,
  getScheduleHostOf,
  getRTCApiOf,
  resetKeys
} from "cloud-game-react";

// 支持情况
isSupport();

// 获取游戏配置
getGameDataOf("NSH");

// 获取调度地址
getScheduleHostOf("test");

// 获取接口地址
getApiHostOf("test");

// 多实例清空键盘
resetKeys();

调度

接口文档： https://confluence.leihuo.netease.com/pages/viewpage.action?pageId=24009410 主要流程：

键鼠协议

二报文格式进制格式统一为大端序, 偏移均为字节序 具体协议内容，请查看看键鼠协议

注意: 一些键是被接受端屏蔽的，比如 window 键或者一些系统快捷键。

手柄协议

二报文格式进制格式统一为大端序, 偏移均为字节序 具体协议内容，请查看手柄协议

注意: 传输前，需先发手柄链接信号。

手游触控协议

二报文格式进制格式统一为大端序, 偏移均为字节序 具体协议内容，请查看触控协议

注意: 目前暂最多支持 5 个触控点，触控点对应 id 固定为 0~4，一定注意不要使用系统返回的 touch id。

埋点流程

主要流程：

Contributing

仓库地址 https://git-wz.nie.netease.com/hzheyuan/cloudgame-component-of-react

node && npm node >= 8.0 npm >= 5.0

1. 根目录 npm install
2. 根目录 npm start start
3. example 目录 npm install
4. 如果使用 npm 执行：npm link leihuo-cloud-game-react 否则忽略此步骤
5. example 目录 npm run start
6. 跟新版本：npm run release
7. changelog 为标准写法

issues

1. 反馈收集的问题
2. 游戏启动本地输入法进行输入(pc 与手游不同)
3. 默认操作：打开链接，复制按钮，上传文件
4. 可配置的快捷键，解决(系统，浏览器)快捷键与游戏快捷键冲突
5. ice 打洞
6. 手柄非游戏操作(移动网页元素，点击按钮等)
7. 配套日志 sdk 和管理插件

License

MIT ©