Em algum momento, fui contratado para criar um plug -in do WordPress que exibe algumas informações básicas em um item do mercado de vapor. Ele teve que mostrar seu nome, imagem e o preço mais baixo atual.
Inicialmente, eu esperava que houvesse algum tipo de API para isso, mas infelizmente não existe. Provavelmente porque tornaria o desenvolvimento de bots um pouco fácil demais.
Tendo passado algum tempo inspecionando as páginas de listagem com ferramentas de desenvolvedor Chrome, descobri que todas as informações de preços são extraídas usando uma única solicitação de Ajax que pode ser facilmente reversa de engenharia. Vamos dar uma olhada em como funciona.
Obtendo as informações de preços
Aqui está o pedido que o Frontend do Steam usa para obter as informações mais recentes de preços:
$url =
'https://steamcommunity.com/market/priceoverview/'.
'?market_hash_name='.rawurlencode($name).
'&appid='.$game.
'¤cy='.$currency;
Tem 3 parâmetros necessários:
market_hash_name
-Nome completo do item como ele aparece no mercado (codificado por URL)appid
– Id do aplicativo (jogo) onde este item pode ser encontradocurrency
– Id da moeda em que queremos que nossos preços sejam mostrados
Você pode obter os valores para os dois primeiros parâmetros diretamente do URL do item. Por exemplo, se estivéssemos interessados em AK-47 | Redlinepoderíamos inspecionar o URL e ver que o valor de appid
é 730
enquanto market_hash_name
é igual a AK-47%20%7C%20Redline%20%28Field-Tested%29
.
Ainda precisamos definir o valor para o terceiro parâmetro necessário, currency
. Não tenho certeza de qual é a lista completa de moedas suportadas e seus IDs, mas o valor de 1
Parece corresponder ao USD, então usaremos isso.
Nosso URL final com todos os parâmetros conjunto deve ficar assim:
https://steamcommunity.com/market/priceoverview/?market_hash_name=AK-47%20%7C%20Redline%20%28Field-Tested%29&appid=730¤cy=1
Se enviarmos um GET
Solicitar com este URL, teremos uma resposta como esta:
{
"success": true,
"lowest_price": "$13.07",
"volume": "710",
"median_price": "$12.74"
}
Como você pode ver, ele não fornece muitos dados, mas contém as informações agregadas de preços, o que é exatamente o que precisamos.
Também vale a pena notar que às vezes a resposta pode não conter median_price
e volume
. Não sei por que isso acontece, mas também lide com esses casos.
Além disso, descobri que o Steam pode começar a acelerar você se você enviar muitas solicitações, por isso é uma boa ideia armazenar respostas por pelo menos 10 minutos.
Obtendo a imagem
Até agora, conseguimos obter o preço de um item, mas não sua imagem. Infelizmente, parece que não há correlação óbvia entre market_hash_name
e o URL da imagem correspondente, para que não possamos inferir.
Para piorar a situação, uma grande parte da página, incluindo a imagem, é renderizada no lado do servidor, impossibilitando a engenharia reversa.
Felizmente, as listagens na parte inferior da página também contêm a imagem e elas são renderizadas usando assíncrona outra solicitação de Ajax.
O pedido acima mencionado é assim:
$url =
'https://steamcommunity.com/market/listings/'.$game.'/'.rawurlencode($name).'/render'.
'?start=0'.
'&count=1'.
'¤cy='.$currency.
'&format=json';
É um pouco diferente do anterior, mas leva os mesmos parâmetros. De fato, a base desta solicitação é o URL de listagem do item que inspecionamos anteriormente.
Configurando start
para 0
e count
para 1
Estamos limitando a resposta a uma única listagem, pois estamos interessados apenas na imagem, o que é o mesmo para todas as listagens de qualquer maneira.
Finalmente, o URL totalmente formado deve parecer algo assim:
https://steamcommunity.com/market/listings/730/AK-47%20%7C%20Redline%20%28Field-Tested%29/render?start=0&count=1¤cy=1&format=json
UM GET
A solicitação com este URL retornará uma resposta JSON bastante grande que contém HTML crua dentro (eu truncei a maior parte da brevidade):
{
"success": true,
"start": 0,
"pagesize": "1",
"total_count": 2302,
"results_html": "<div class=\"market_listing_table_header\">...</div>"
}
Para obter a imagem, precisamos analisar o HTML dentro de results_html
e encontre um <img>
elemento da classe market_listing_item_img
. Podemos fazer isso consultando o DOM com um seletor CSS. O URL, que é o valor do correspondente src
atributo, deve ficar assim:
https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV09-5lpKKqPrxN7LEmyVQ7MEpiLuSrYmnjQO3-UdsZGHyd4_Bd1RvNQ7T_FDrw-_ng5Pu75iY1zI97bhLsvQz/62fx62f/
Se você dar uma olhada no final do URL, poderá ver a parte onde ela especifica as dimensões desejadas da imagem, que está definido como 62fx62f
nesse caso. Podemos alterá -los para tudo o que queremos, e o servidor retornará uma imagem desse tamanho. No entanto, se você especificar um tamanho muito grande, a imagem será centrada e permanecerá no seu tamanho máximo, enquanto o restante da tela será transparente.
Código -fonte
O código para o plugin WordPress que escrevi é de código aberto, você pode Confira aqui. Veja como fica em ação:

Luis es un experto en Inteligência Empresarial, Redes de Computadores, Gestão de Dados e Desenvolvimento de Software. Con amplia experiencia en tecnología, su objetivo es compartir conocimientos prácticos para ayudar a los lectores a entender y aprovechar estas áreas digitales clave.