블록체인에서의 실시간 반응 재미

이벤트가 훌륭합니다. 이벤트를 감청하고 일을 하는 것은 자바스크립트의 핵심 용도 중 하나입니다.이것은 우리로 하여금 웹 응용 프로그램에서 놀라운 상호작용을 볼 수 있게 한다.
우리가 버튼을 눌렀을 때 클릭을 듣는 것은 흥미롭지만, 다른 곳에서 발생한 사건을 완전히 들을 수 있을 때 더욱 흥미롭다.이것은 우리로 하여금 실시간 응용 프로그램을 만들 수 있게 한다. 만약에 블록체인에 구축하고 있다면 몇 줄의 코드만 있으면 완성할 수 있다!
다음에 우리가 토론하고자 하는 코드는 내가 BuildSpace에서 스마트 계약 구축에 관한 과정을 배울 때 작성한 것이다.만약 당신이 정말로 내가 토론하고자 하는 내용에 관심이 있다면, 나는 당신이 그들의 과정을 보러 가기를 강력히 건의합니다. 이 과정들은 모두 그룹을 바탕으로 하는 것이고 무료입니다.
내가 이곳에서 세운 프로젝트는 소개념 포켓몬 전투 시뮬레이터로 누구나 뛰어들어 한 포켓몬이 다른 포켓몬과의 전투에서 하나의 동작을 수행하도록 한다.블록체인에 있는 클러스터 포켓몬 대전처럼.그것의 빠른 시범을 찾을 수 있다.
우선 견고한 코드를 살펴보자.Solidity는 스마트 계약을 구축할 수 있는 언어로 이더리움 블록체인과 상호작용을 돕는 코드입니다.다음은 제가 스마트 계약서에 쓴 코드들입니다.

event NewAction(
        address indexed from,
        uint256 timestamp,
        string message,
        uint256 lugiahp,
        uint256 zardhp
    );

    struct Action {
        address trainer;
        string message;
        uint256 timestamp;
        uint256 lugiahp;
        uint256 zardhp;
    }

    Action[] actions;

완전한 스마트 계약은 아니지만 블록체인과 실시간 상호작용을 할 수 있는 부분에만 주목할 것입니다.지금 내가 이 문장의 첫머리에 어떻게 사건을 이야기했는지 기억합니까?Solidity가 있으면 당신은 진정으로 경청할 만한 사건을 창조할 수 있습니다.이 예에서, 나는 New Action이라는 이벤트를 듣고 있다.Action struct를 actions 배열에 추가하면 언제든지 이 문제가 발생합니다.
JavaScript의 경우 동작 배열에 추가된 동작 객체로 간주할 수 있습니다.이제 스마트 계약의 함수를 살펴보겠습니다.

 function attack(string memory _message) public {
        totalDamage += charizardAttack;
        totalHp -= charizardAttack;
        charizardDamage += lugiaAttack;
        charizardHp -= lugiaAttack;
        console.log("%s has attacked the shadow Lugia!", msg.sender);
        console.log("%s was attacked back by shadow Lugia!", msg.sender);
        actions.push(
            Action(msg.sender, _message, block.timestamp, totalHp, charizardHp)
        );
        emit NewAction(
            msg.sender,
            block.timestamp,
            _message,
            totalHp,
            charizardHp
        );
    }

이 기능은 Charizard와 Lugia 사이의 공격 서열을 처리하는데 둘 다 상대방에게 일정한 데미지를 입힌다.기능이 끝났을 때, 너는 내가 이것을 가지고 있다는 것을 알아차릴 것이다

emit NewAction(
            msg.sender,
            block.timestamp,
            _message,
            totalHp,
            charizardHp
        );

제가 예전에 만든 뉴액션 이벤트 기억나세요?emit를 호출하면 ok 이 이벤트가 현재 발생하고 있으며, 새로운 action struct가 전송된 정보를 사용하여 action 그룹에 추가하고 있습니다.
이것이 바로 우리가 필요로 하는 모든 것이다. 일의 튼튼한 면에서 하나의 사건이 청취를 확보할 수 있도록. 그러나 우리는 어떻게 이 점을 진정으로 청취를 앞장서야 합니까?
내가 이 플랫폼을 구축하는 과정에서 우리의 뛰어난 지도 교수가 우리에게 사용ethers jswithReact와 블록체인의 상호작용을 소개했다.이 과정에 관해서 내가 매우 좋아하는 좋은 일은 그가 소개한 활동과 같은 추가적인 개념이 있어서 우리 스스로 탐색할 수 있다는 것이다.
그래서 구글을 검색하고 문서를 검색할 때 이 사건을 전방에서 감청하는 데 필요한 코드를 발견했다.내 구성 요소 중 하나에서 아래의useEffect 연결을 보십시오.

  const listener = (block) => {
    console.log("new action emited")
    console.log(block)
    getAllActions()
  }

  React.useEffect(() => {
    lugiaBattleContract.on("NewAction", listener)
    return () => {
    lugiaBattleContract.off("NewAction", listener)
    }
  },[])

작은 배경: getAllActions 함수는 스마트 계약의 actions 그룹에서 데이터를 가져와 정리한 다음 이 데이터로 일부 상태를 업데이트합니다.내use Effect 갈고리에서, 나는 ethers js가 우리에게 제공하는 일부 기능을 사용하여 'New Action' 이라는 이벤트를 감청한다. 만약 내가 스마트 계약에서 정의한 것을 기억한다면.지금, 누군가가 공격을 실행하면, 다른 사람들은 모두 알 것이다. 왜냐하면 모든 사람의 조작이 실시간으로 업데이트되기 때문이다!
간단한 알림: React에서 어떤 종류의 탐지기 함수를 사용했다면,useEffect에 넣고 함수를 되돌려 청소해야 합니다.그렇지 않으면, 왜 사건이 한 번만 발생했을 때, 구성 요소가 수백 번 더 과장되는지 나처럼 디버깅을 시도할 것이다.
다음은 빠른 프레젠테이션입니다.

이것은 큰 gif이다😬 따라서 불러오면 Charizard가 한 브라우저에서 공격하는 것을 볼 수 있지만 동작 로그는 두 브라우저에서 업데이트됩니다!
나는 이전에 실시간으로 뭔가를 해 본 적이 있다. 내가 이더리움 블록체인에서 이렇게 쉽게 이 점을 할 수 있다는 것을 보니 정말 대단하다!
이 시연을 혼자 하고 싶다면you can do so here.
Metamask chrome 확장을 설정하고 Rinkeby 테스트 네트워크에서 테스트를 수행해야 합니다.
저는 웹3을 배운 지 오래되어 개발자로서 이 분야에 진출할 수 있기를 바랍니다.나와 함께 이 여정에 오르고 싶다면, 나에게 기회를 주세요.