React 与 Vue

实例只在组件挂载时创建，在卸载时销毁。普通状态变化不重新创建 iframe，避免意外产生新的访问。

React

tsx

import {useEffect,useRef} from 'react';
import {createViewer} from '@cs2view/js-sdk';
import type {Viewer,GrantRequest} from '@cs2view/js-sdk';

async function getGrant({signal,...request}:GrantRequest){
  const r=await fetch('/api/cs2view/grant',{
    method:'POST',headers:{'Content-Type':'application/json'},
    body:JSON.stringify(request),signal
  });
  if(!r.ok)throw Error('暂时无法进入');
  return r.json();
}

export function Inspect(){
  const container=useRef<HTMLDivElement>(null);
  const viewer=useRef<Viewer|null>(null);
  useEffect(()=>{
    const instance=createViewer({container:container.current!,
      tier:'inspect',item:{inspect:'<包含物品数据的 Steam 检视链接>'},getGrant});
    viewer.current=instance;
    return ()=>{viewer.current=null;void instance.destroy();};
  },[]);
  return <div ref={container} style={{height:560}}/>;
}

开发模式的 React StrictMode 可能执行额外挂载/卸载。销毁中的实例会取消未完成的凭证请求；已被服务端批准的进入仍可能计费。开发联调应使用单独测试厂商及零单价合同，不能以开发行为代表生产用户次数。

Vue 3

vue

<script setup lang="ts">
import {ref,onMounted,onBeforeUnmount} from 'vue';
import {createViewer} from '@cs2view/js-sdk';
import type {Viewer} from '@cs2view/js-sdk';
const container=ref<HTMLElement>();
let viewer:Viewer|undefined;
onMounted(()=>{
  viewer=createViewer({container:container.value!,tier:'inspect',
    item:{inspect:'<包含物品数据的 Steam 检视链接>'},
    getGrant:async({signal,...request})=>{
      const r=await fetch('/api/cs2view/grant',{
        method:'POST',headers:{'Content-Type':'application/json'},
        body:JSON.stringify(request),signal
      });
      if(!r.ok)throw Error('暂时无法进入');
      return r.json();
    }
  });
});
onBeforeUnmount(()=>{void viewer?.destroy();});
</script>
<template><div ref="container" style="height:560px"/></template>