소개하다.

프로그램의 특정한 행위에 따라 특정한 이벤트가 발생하는 방식.Webhook에는 동작을 트리거하기 위해 이벤트를 식별해야 하는 데이터나 부하가 포함되어 있습니다.
예를 들어 만약에 당신이 로봇을 만들어서 전자상거래 사이트의 특정 제품의 가격을 감시한다고 가정합니다.일단 가격이 사이트의 어떤 값에 도달하면 로봇은 당신에게 이런 사건이 발생했음을 통지할 것입니다.현재 가격은 많은 시간이 걸릴 수 있고 심지어 며칠이 걸려야 로봇이 찾으려고 설정한 값에 도달할 수 있다. 그 전에 로봇은 시종일관 운행 상태에 있어 가격을 감시한다.이것은 코드가 반드시 전천후 운행해야 하기 때문에 비효율적인 방법이 될 것이다.만약 네가 클라우드 서버에서 그것을 운행한다면, 그것은 그렇게 큰 가치를 제공하지 않기 때문에 비싼 로봇이 될 것이다.
그런데 사이트 자체가 로봇에게 알림을 보냈다면?로봇이 서버에서만 작동할 수 있고 활동 상태가 필요 없다는 뜻이다.웹 사이트에서 알림을 받을 때만 활성 상태여야 합니다.이벤트는 POST 요청으로 bot이 있는 URL에 전송되고 bot이 작업을 시작합니다.멋있죠?그리고 핸디!
이것도 당신의 로봇에게 실시간 행동을 줄 것이다.

Facebook 애플리케이션 사용

페이스북은 개발자가 페이스북과 상호작용하는 앱을 만들어 다양한 목적에 사용할 수 있도록 했다.이를 위해 페이스북은 Graph API을 만들었습니다. 이것은 페이스북에 앱을 적용하는 데 도움이 됩니다.Graph API Explorer은 브라우저에서 API를 실행하는 데 유용한 도구입니다.또한 올바른 URL을 얻고 요청을 구성하는 데 도움이 됩니다.
다음은 당신이 필요로 하는 물건의 빠른 목록입니다.

페이스북 앱

HTTP 요청을 수락할 수 있는 프로그램Node를 사용하겠습니다.js는 여기에서 Express.js framework과 함께 요청을 처리합니다.

Ngrok은 인터넷에 로컬 호스트를 공개합니다.

이 강좌는 기본 Facebook apps을 설정하는 방법을 알고 있다고 가정합니다.
그러니까 시작합시다.

1. 서버를 만듭니다.
이것은 노드다.서버를 만들고 포트 5000의 js 코드를 감청합니다.

   const app = require('express')()

   // express middleware
   const bodyParser = require('body-parser')
   app.use(bodyParser.urlencoded({ extended: false }))
   app.use(bodyParser.json())

   const PORT = 5000
   // start server  
   app.listen(PORT, () => console.log(`Listening on port ${PORT}`))

이 코드를 실행하면 서버에서 모든 것을 감청하기 시작합니다
받은 요청입니다.

2. 동일한 포트 5000에서 Ngrok을 시작합니다.
이렇게 하려면 명령 ngrok http 5000을 실행하십시오.명령을 실행하면 터미널에 다음 뷰가 나타납니다.

여기서는 어떤 URL을 전달하고 있는지, 그리고 이 URL에서 받은 요청을 볼 수 있습니다.Graph API 설정의 요구 사항이기 때문에 HTTPS URL을 사용하고자 합니다.이 경우 https://7ac66c7f726f.ngrok.io
3. Webhook 제품을 설정합니다.
응용 프로그램 대시보드에서 제품을 추가하려면 아래로 스크롤합니다.Webhooks를 찾아 Set up을 클릭하십시오.

왼쪽 창에서 Webhooks 을 클릭합니다.너는 이런 물건을 보아야 한다


4. 웹훅 단점을 처리한다.
콜백 URL을 추가하기 전에 코드를 추가해야 합니다.웹 훅에 도착하는 요청을 처리합니다.웹훅을 등록할 때 페이스북은 사용자가 제공한 URL에 요청을 보냅니다. 이 URL은 포트와 함께 제공되며, 포트의 응답, 즉 challenge 코드를 기대합니다.URL을 등록한 후에만 페이스북에 회신할 수 있습니다.

app.get('/webhook', (req, res) => {

      const VERIFY_TOKEN = "random string"
      // Parse the query params
      const mode = req.query['hub.mode'];
      const token = req.query['hub.verify_token'];
      const challenge = req.query['hub.challenge'];

      // Checks if a token and mode is in the query string of the request
      if (mode && token) {

        // Checks the mode and token sent is correct
        if (mode === 'subscribe' && token === VERIFY_TOKEN) {

          // Responds with the challenge token from the request
          console.log('WEBHOOK_VERIFIED');
          res.status(200).send(challenge);

        } else {
          // Responds with '403 Forbidden' if verify tokens do not match
          res.sendStatus(403);      
        }
      }
})

마지막 코드는 다음과 같다

5. 객체에 가입

드롭다운 메뉴를 누르고 필요한 대상을 선택하십시오.여기에서 User 대상을 선택하고 Subscribe to this object을 누르면 이 대화상자가 열립니다

Ngrok의 https URL과 끝점을 입력합니다.끝점은 무엇이든지 가능합니다. HTTP POST 요청을 받을 수 있어야 합니다.Verify Token 필드의 문자열은 모든 내용일 수 있습니다.이것은 요청이 정확한 원본에서 정확한 목적지로 발송되는 것을 확보하는 안전 조치일 뿐이다.코드에 체크를 하거나 체크를 하지 않을 수도 있습니다.그리고 Verify and Save을 클릭하세요.이것은 당신이 필요로 하는 구독을 선택할 수 있는 페이지로 안내합니다

GET 요청은 객체에 콜백 URL을 등록하는 데만 사용됩니다.실제 이벤트를 처리하려면 POST 라우트를 동일한 끝점에 기록해야 합니다(이 경우 webhook).이 경로는 로봇/응용 프로그램의 행동을 처리합니다

대부분의 구독은 검증 후 사용할 수 있지만 Test 단추를 누르면 단점으로 보내는 예시 요청을 볼 수 있습니다

Send to My Server을 클릭하면 요청을 볼 수 있습니다



Ngrok의 웹 인터페이스를 열면 각 요청에 대한 자세한 정보를 브라우저에서 볼 수 있습니다

나는 이 강좌가 네가 페이스북 앱으로 자신의 웹훅을 설정하는 데 도움을 줄 수 있기를 바란다.나 혼자 이 일을 하는 것은 틀림없이 좀 어려울 것이다. 그래서 나는 이 블로그를 써서 다른 사람들이 시간을 절약하는 것을 돕고 싶다

시간 내주셔서 감사합니다.다음에 만나요

전화로 연락 주세요

• 이메일: [email protected]
  
• GitHub:@kevinam99
  
• 트위터:
  
• 영국: