samples/queue/queue.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
  <title>腾讯云-云渲染-排队demo</title>
  <link rel="stylesheet" href="./queue.css">
</head>

<body>
  <div id="demo-container">
    <div id="mount-point"></div>
    <div class="loading-page">
      <img class="loading-bg" src="./bg.png" alt="">
      <div class="loading-info">
        <img class="loading-logo" src="./bg.png" alt="">
        <p>目前游戏人数较多，请耐心等待</p>
        <p class="loading-queue-index"></p>
        <div class="loading-tips">
          <p class="loading-tips-title">温馨提示</p> 
          <p class="loading-tips-text">无需下载即可体验游戏</p>
          <p class="loading-tips-text">若长时间处于加载阶段，请刷新页面</p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../../../dist/tcg-sdk/index.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> -->

  <script>
    // SDK 生命周期参考 https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/index.html
    TCGSDK.init({
      mount: 'mount-point',
      debugSetting: {
        showLog: true,
      },
      // 连接成功回调
      onConnectSuccess: (res) => {
        console.log('onConnectSuccess', res);
      },
      // 网络中断/被踢触发此回调
      onDisconnect: (res) => {
        console.log('onDisconnect', res);
      },
      // onTouch 回调，res 为 object[]
      // 移动端上操作端游应用，通过touch 模拟端游的鼠标操作
      onTouchEvent: (res) => {
        // 如果是手游方案，不需要这段逻辑，SDK 内部已经处理
        const { id, type, pageX, pageY } = res.pop();
        // 调用鼠标移动
        TCGSDK.mouseMove(id, type, pageX, pageY);
        // 模拟鼠标点击与抬起
        if (type === 'touchstart') {
          TCGSDK.sendMouseEvent({ type: 'mouseleft', down: true });
        }
        if (type === 'touchend' || type === 'touchcancel') {
          TCGSDK.sendMouseEvent({ type: 'mouseleft', down: false });
        }
      },
      onWebrtcStatusChange: (res) => {
        console.log('onWebrtcStatusChange', res);
      },
      onInitSuccess: async (res) => {
        console.log('%c onInitSuccess', 'color: red', res);
        const { code } = res;
        if (code === 0) {
          await checkEnqueue();
        }
      }
    });

    const baseUrl = ''; // 'http://xxxx' 请求的后台地址，请注意端口是否正确
    const projectId = 'project-id';
    const userId = 'user-id'; // 用户的唯一标识，也可以随机生成，例如 `user-${Math.floor(Math.random() * 1000)}`

    const checkEnqueue = async () => {
      document.querySelector('#mount-point').style.display = 'none';

      const data = await sendRequest({
        url: `${baseUrl}/Enqueue`,
        data: { ProjectId: projectId},
      });

      console.log('%c checkEnqueue res', 'color: blue; font-size: 14px', data);
      const { Code, Data } = data;

      // 排队中
      if (Code === 10100) {
        const { Index } = Data;
        document.querySelector('.loading-queue-index').innerHTML = `当前第 ${Index} 位...`;

        // 5s 轮训一次队列
        setTimeout(async () => {
          await checkEnqueue();
        }, 5000);
      }

      // 排队成功
      if (Code === 10101) {
        await startProject();
      }
    };

    const startProject = async () => {
      // 后台服务可以参考后台一键部署方案
      const data = await sendRequest({
        url: `${baseUrl}/StartProject`,
        data: {
          ProjectId: projectId,
          ClientSession: TCGSDK.getClientSession(),
        }
      });

      console.log('%c startProject res', 'color: blue; font-size: 14px', data);
      const { Code, SessionDescribe } = data;

      if (Code === 0) {
        TCGSDK.start(SessionDescribe?.ServerSession);

        document.querySelector('#mount-point').style.display = 'block';
        document.querySelector('.loading-page').style.display = 'none';
      } else {
        // 异常处理逻辑
      }
    }

    // | Code  | 描述                                               | 备注 |
    // | ----- | -------------------------------------------------- | ---- |
    // | 0     | 请求成功                                            |      |
    // | 10000 | sign 校验错误                                       |      |
    // | 10001 | 缺少必要参数                                         |      |
    // | 10100 | 排队进行中，需要继续请求获取队列位置更新                  |      |
    // | 10101 | 排队完成                                            |      |
    // | 10200 | 创建应用云渲染会话失败                                 |      |
    // | 10201 | 释放应用云渲染会话失败                                 |      |
    // | 10202 | 申请并发失败                                         |      |
    const sendRequest = async ({ url, data = {} }) => {
      let reqData = {
        ...data,
        UserId: userId,
        RequestId: `request-${Math.floor(Math.random() * 1000)}` // 随机一个request id
      };

      // 计算数据签名，开启校验则必传
      // const sign = getSign(reqData);

      reqData = {
        ...reqData,
        // Sign: sign,
      };

      try {
        const { data: resData, status } = await axios.post(url, reqData);
        if (status === 200) {
          return resData;
        }
        console.log('resData', resData);
      } catch (error) {
        console.log('sendRequest error', error);
        return { Code: -1 };
      }
    };

    // 用于对send 的request data 进行签名，默认签名未打开
    const getSign = (params) => {
      const key = ''; // 用于签名的字符串，可以后台设置  

      if (typeof params === 'object') {
        const keys = Object.keys(params).sort();
        let valueString = '';
        keys.forEach((k) => {
          valueString += params[k].toString();
        });

        return CryptoJS.SHA256(valueString + key).toString();
      }
      return '';
    };

  </script>

</body>

</html>