Homebridge 웹 훅과, 브라우저에서 이벤트 발생시키기

[IoT] - 애플 Homekit의 확장 Homebridge 구축하기

이번엔 조금 재미있는 것을 만들어 보려고 한다.

웹 훅을 이용해 브라우저에서 이벤트가 발생 시,

Homebridge 서버에 요청을 보내, 트리거가 작동하게 만들어 볼 것이다.

 

 

Web hook

 

그렇다면, 웹 훅이란 무엇일까

웹 훅이란, 특정 이벤트가 발생시, 미리 지정한 엔드포인트(URL)로

자동으로 HTTP 요청을 보내, 별도 데이터 없이 실시간으로 정보를 전달하는 기술이다.

 

이 기능이 스마트홈 자동화에서,

유연하게 쓰임이 많을 것 같아 사용 해보려고 한다.

 

 

Homebridge Webhook 플러그인 구성

 

정보가 많이 없어 Webhook 관련 플러그인을 만들어야 하나 생각했는데,

다행하게도, Homebridge에 플러그인이 존재 했다.

https://github.com/benzman81/homebridge-http-webhooks#readme

GitHub - benzman81/homebridge-http-webhooks: A http plugin with support of webhooks for Homebridge: https://github.com/nfarina/h

 

Homebridge 웹에서, 해당 플러그인을 검색해 설치해 주도록 하자

 

설치가 되었다면, 기본적인 설정과 함께 센서를 추가 해보도록 하자,

Webhook 설정은 기본 포트 그대로, browser 이름의 motion 센서를 추가 했다.

 

 

 

센서 등록 후, 홈 앱에 가상 공간을 만들고 홈브릿지와 연동을 완료했다.

정상적으로 모션 센서가 등록 된 모습

 

 

Chrome 확장 프로그램 개발

 

다음으로, 등록된 센서를 동작시키는 이벤트를 만들어 보자,

이번에 내가 원하는 이벤트는, 특정 사이트에 접속 시 동작을 시키는 것이다.

필자는 Chrome 브라우저를 사용하므로,

Chrome 확장 프로그램을 만들어 백그라운드 상에서 동작하게 할 것이다.

 

프로젝트 생성 후, manifest.json 파일에 다음과 같이 명시해준다,

이름, 권한, 백그라운드에서 동작할 스크립트(background.js)를 지정한다.

{
  "manifest_version": 3,
  "name": "Homebridge Browser Sensor",
  "version": "1.0",
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

 

 

이제 javascript 파일(background.js)를 생성해 코드를 하나하나 짜보도록 하자.

먼저 전역에서 쓸 상수를 정의 한다.

각각 감지 대상 URL, Homebridge 서버 도메인, 웹훅 포트, 등록한한 센서 ID를 정의했다.

const TARGET_URL = "https://www.kimyoung.co.kr/offmegaky.asp";
const HOMEBRIDGE_IP = "Homebride 도메인";  # 본인 서버
const WEBHOOK_PORT = "포트번호";           # 지정한 포트
const SENSOR_ID = "browser";

 

 

그리고 플러그인에 등록한 센서의 상태를 업데이트하기 위한 함수를 구현한다.

기본적인 HTTP GET 요청으로 Homebridge Webhook의 센서를 동작시킨다.

function triggerSensor(state) {
    const url = `http://${HOMEBRIDGE_IP}:${WEBHOOK_PORT}/?accessoryId=${SENSOR_ID}&state=${state}`;
    fetch(url)
        .then(response => console.log(`Sensor status changed to ${state}`))
        .catch(error => console.error("Error Occurred: ", error));
}

 

 

이제, 브라우저 탭이 업데이트 될 때 이벤트를 핸들링 하는 함수를 구현한다.

먼저 현재 탭에 타겟 URL이 포함되어있는지 확인 후

조건 처리로 타겟 URL이 열릴때 센서 상태 True, 페이지 변경시 False로 업데이트 처리

let openTabs = {};
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === "complete" && tab.url) {
        const isTarget = tab.url.includes(TARGET_URL);
        const wasTarget = openTabs[tabId] || false;

        if (isTarget && !wasTarget) {
            openTabs[tabId] = true;
            triggerSensor("true");
        } else if (!isTarget && wasTarget) {
            delete openTabs[tabId];

            if (Object.keys(openTabs).length === 0) {
                triggerSensor("false");
            }
        }
    }
});

 

 

탭이 종료되었을 때도 이벤트 핸들링을 해주자

탭을 닫는 동작이므로 역시 센서 상태를 False로 업데이트 한다.

chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
    if (openTabs[tabId]) {
        delete openTabs[tabId];

        if (Object.keys(openTabs).length === 0) {
            triggerSensor("false");
        }
    }
});

 

 

완료 되었으면, Chrome 확장 프로그램에 등록을 해보자

주소창에 chrome://extensions 입력 후, 압축해제 된 확장 프로그램 로드 클릭

만든 프로젝트 폴더(manifest.json, background.js)를 등록 한다.

 

등록이 완료 되었다면, manifest.json에 명시한 name 값으로

확장 프로그램이 정상적으로 등록 된 것을 볼 수 있다.

 

 

센서 테스트 및 자동화

 

구현이 완료되었으니, 센서를 활용해서 자동화를 하나 구현해보자

센서 동작 시 데스크 램프를 켜지는 자동화를 만들어 보겠다.

 

Home 앱 - Automation에서 자동화 추가 후,

추가 한 Browser 센서가 동작시, 데스크 램프를 켜지게 등록했다.

 

마지막으로 테스트를 해보자

타겟 사이트에 접속 시, 정상적으로 데스크 램프가 켜졌다.

 

 

 

이렇게 HTTP 요청으로 센서나, 스위치 등 Home 악세사리를 동작 할 수 있게 되었다.

이를 통해 좀 더 유동적으로 자동화를 만들 수 있을 것 같다.

 

원본 게시글

https://blog.naver.com/101artspace/223770695980

Homebridge 웹 훅과, 브라우저에서 이벤트 발생시키기