내 Twitch 스트림이 실시간인가요?

자신의 홈페이지에서 Twitch 라이브 상태를 원한 적이 있습니까? 글쎄, 우리는 우리 사이트에서 호출되는 작은 Netlify 기능으로 그것을 달성합니다.

이 게시물의 목적을 위해 자격 증명이 항상 환경 변수에 저장되어 있다고 가정합니다...

다이빙 라이트 인™️

Twitch 자격 증명 받기

Twitch 계정에 로그인하고 머리 위로your Developer Console applications Twitch에 새 애플리케이션을 등록합니다.

애플리케이션에 이름, OAuth 리디렉션 URL 및 범주를 지정합니다.


필드
값
중요한?


이름
내 Twitch 스트림 라이브?
설마

OAuth 리디렉션 URL
http://localhost:3000
설마

범주
웹사이트 통합
설마


예, 진심입니다. 이들 중 어느 것도 그렇게 중요하지 않습니다. 서버 간 인증에 필요한 클라이언트 자격 증명 부여에는 리디렉션 URL이 필요하지 않습니다. 한쪽 다리에서 클라이언트 ID와 비밀을 확인할 수 있기 때문입니다.



만들기를 클릭하면 새 애플리케이션에 대한 관리를 클릭할 수 있습니다. 여기에서 클라이언트 ID를 찾고 새 비밀을 생성합니다.

클라이언트 ID와 클라이언트 암호를 환경 변수에 추가합니다.

TWITCH_CLIENT_ID

TWITCH_CLIENT_SECRET

Netlify 함수 만들기

함수 디렉토리(우리는 functions/라고 부름)에서 live-on-twitch라는 새 디렉토리를 만들고 그 디렉토리로 변경합니다.

cd functions/
mkdir live-on-twitch
cd live-on-twitch/

npm 애플리케이션을 초기화합니다.

이제 함수의 기본 구조를 추가합니다. status: online 또는 status: offline 를 반환하고 항상 200을 반환하는 매우 의미론적인 엔드포인트가 아닙니다. 😇

exports.handler = async (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ status: 'offline' }),
  })
}

http://localhost:55359/.netlify/functions/live-on-twitch 을 시작하고 요청하면 JSON이 반환됩니다. 이 URL은 netlify dev에서 생성되며 표시되는 것과 다를 수 있습니다.

{
  "status": "offline"
}

앱 액세스 토큰 요청

이제 axios를 설치하여 요청합니다.

npm install axios

요청 옵션을 생성한 다음 Twitch OAuth 서비스에 대한 게시물 요청을 위한 매개변수로 전환합니다.

const qs = require('querystring')
const axios = require('axios')

exports.handler = async (event, context, callback) => {
  const opts = {
    client_id: process.env.TWITCH_CLIENT_ID,
    client_secret: process.env.TWITCH_CLIENT_SECRET,
    grant_type: 'client_credentials',
    scopes: '',
  }
  const params = qs.stringify(opts)

  const { data } = await axios.post(
    `https://id.twitch.tv/oauth2/token?${params}`
  )

  console.log(data)

  // callback
}

Twitch 스트림이 실시간인가요?

Twitch에서 반환된 access_token로 이제 스트림 상태를 요청할 수 있습니다.

// requires

exports.handler = async (event, context, callback) => {
  // get access_token

  const streamUser = 'vonagedevs'

  const {
    data: { data: streams },
  } = await axios.get(
    `https://api.twitch.tv/helix/streams?user_login=${streamUser}`,
    {
      headers: {
        'Client-ID': process.env.TWITCH_CLIENT_ID,
        Authorization: `Bearer ${data.access_token}`,
      },
    }
  )

  // callback
}

스트림 끝점에서 단일user_login을 찾기 때문에 stream.length가 online라고 가정합니다. 오프라인일 경우 0이 됩니다.

전체 코드

여기에 전체 기능이 있습니다.

const qs = require('querystring')
const axios = require('axios')

exports.handler = async (event, context, callback) => {
  const opts = {
    client_id: process.env.TWITCH_CLIENT_ID,
    client_secret: process.env.TWITCH_CLIENT_SECRET,
    grant_type: 'client_credentials',
    scopes: '',
  }
  const params = qs.stringify(opts)

  const { data } = await axios.post(
    `https://id.twitch.tv/oauth2/token?${params}`
  )

  const streamUser = 'vonagedevs'

  const {
    data: { data: streams },
  } = await axios.get(
    `https://api.twitch.tv/helix/streams?user_login=${streamUser}`,
    {
      headers: {
        'Client-ID': process.env.TWITCH_CLIENT_ID,
        Authorization: `Bearer ${data.access_token}`,
      },
    }
  )

  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ status: streams.length ? 'online' : 'offline' }),
  })
}

우리는 무엇을 위해 그것을 사용 했습니까?

Twitch에서 생중계하는 경우 스트리밍으로 블로그의 랜딩 페이지를 개선할 것입니다!