출처

개요

catapult-rest 에는, rest 본체 외에, 몇개의 툴이 들어가 있습니다.

이번에는 tools 안에 있는 websocket을 움직여 보겠습니다. 이것은 브라우저에서 블록체인을 모니터링할 수 있는 도구인 것 같습니다.



예를 들어, 다음과 같은 것을 감지할 수 있습니다.

새로운 블록이 생겼을 때

보낸 트랜잭션이 실패하면

Cosignature 대상 트랜잭션이 발생하면

또한 라이브러리의 경우 소스를 보면 Vue.js와 BigInteger.js, 그리고 bootstrap이 사용되는 것 같습니다.

뭔가 웹 앱을 만들 때 도움이 될 것 같습니다.

전제

Windows 10

catapult-rest 연결 대상

시작하는 방법

github 출시 페이지 방문.

zip을 다운로드하고 압축을 풉니 다.

이것을 열

└─tools
    │  .eslintrc
    │  package.json
    │  yarn.lock
    │
    └─websocket
            .eslintrc
            client.html  <- これ
            client.js

이러한 화면이 표시되어야합니다.

연결하다

접속처는 localhost:3000로 한다.

여기에 localhost를 입력하고 Connect를 누릅니다.



연결.

블록 생성 모니터링

여기에 모니터링에 사용할 주소가 입력됩니다.
block 버튼이 선택되어 있는지 (검정 배경)를 확인하고 Subscribe 버튼을 누릅니다.



블록이 생성되면 우측에 통지된다.



Unsubscribe 버튼으로 모니터링을 중단할 수 있다.

기타 모니터링 항목

모두 지정한 계정과 관련된 계정만 표시됩니다.


품목
설명


block
블록이 생성되면

confirmedAdded
트랜잭션이 블록에 캡처되면

unconfirmedAdded
거래가 발생하면

unconfimedRemoved
unconfirmedAdded가 사라지면

status
거래가 실패하면

partialAdded
Aggregate Bonded 트랜잭션이 발생하면

partialRemoved
partialAdded가 사라지면

cosignature
Cosignature 트랜잭션이 발생하면

표시되는 메시지 정보

block 항목의 경우 block received with height로 시작하는 메시지가 표시됩니다.

block 이외의 항목에 대해서는, received unknown data with key(s): 그리고 시작되는 메세지가 표시됩니다. 메시지는 키만 표시되고 value는 표시되지 않습니다.

맞춤형

언제나 사용하는 접속처나 주소가 있다면, 드롭다운 리스트로부터 선택할 수 있도록 하는 편이 편할지도 모릅니다.

연결 대상

접속처는,client.js의 135행째로부터. localhost는 표준으로 제공됩니다.

            { name: 'host1', value: 'set-proper-hostname' },
            { name: 'host2', value: 'set-proper-hostname' },
            { name: 'host3', value: 'set-proper-hostname' },
            { name: 'host4', value: 'set-proper-hostname' },
            { name: 'Localhost', value: 'localhost' }

주소

주소는 client.js의 63행부터.

            { name: 'host4', value: 'SAAAIBC7AM65HOFDLYGFUT46H44TROZ7MUWCW6MZ' },
            { name: 'host5', value: 'SAAA57DREOPYKUFX4OG7IQXKITMBWKD6KXTVBBQP' },
            { name: 'host6', value: 'SAAA467G4ZDNOEGLNXLGWUAXZKC6VAES74J7N34D' },
            { name: 'host7', value: 'SAAAMZYSPE5TRAVH7I3VSF7ZD542EVDLB7JT7Z4K' },

포트 번호

포트 번호는 client.js의 151행. 단, 접속처마다 설정할 수 없습니다.

            return `ws://${this.host}:3000/ws`;

메시지

받은 메시지를 사용자 정의하려면 client.js의 223행에서.

예를 들어, status의 내용을 표시한다면 이런 느낌일까요?

                if ('block' in data.message) {
                    const message = `block received with height ${formatUint64(data.message.block.height)}`;
                    formattedData = { level: 'light', message };
                } else if ('status' in data.message) {
                    const message = `status received ${data.message.status}`;
                    formattedData = { level: 'warning', message };
                } else {
                    const message = `received unknown data with key(s): ${Object.keys(data.message)}`;
                    formattedData = { level: 'warning', message };
                }

예

주소와 상태를 약간 변경한 예

요약

브라우저에서 블록 체인을 모니터링 할 수 있습니다

블록이나 트랜잭션의 발생을 가르쳐 준다

연결 대상 및 주소를 사용자 정의 할 수 있습니다

알림 메시지는 아직 갖추어지지 않았으므로 직접 사용자 정의합니다

알림 메시지에 대해서는 어떻게 설계하면 잘 작동하는지 생각하고 싶습니다.