自動Fetchingの実現

14518 ワード
JavaScript テキストリンク
CodeStatesでのスプレーですしたがって、所与のAPIしか使用できない.
実装する機能
  • clientとserver通信中はclientでリフレッシュしていなくてもserverでカニからの新情報受信が可能
    • n/a.計画
    使用
  • setInterval
  • サーバが定期的にデータをチェックして追加している場合はブラウザに送信する
    • 修行する
    autoFetch: () => {
    
    fetch(app.server)
    .then(res => res.json())
    .then(json => {
	 
      let lastData = json.results[json.results.length - 1];//서버 가장 마지막 데이터를 가져온다.
      if (json.results.length - 1 !== app.database.length - 1) {//여기서 database는 페이지가 로드되고 새로운 메시지가 추가되기 전 서버에 데이터를 가져와 저장한 공간
        app.database = json.results;
        const $chats = document.querySelector('#chats');
        const $div1 = document.createElement('div');
        const $div2 = document.createElement('div');
        const $chat = document.createElement('div');
        $chat.classList.add('chat');
    
        $div1.textContent = lastData.username;
        $div1.classList.add('username');
          
        $div2.textContent = lastData.text;
        $chat.append($div1, $div2);
    
        $chats.prepend($chat);
      }
    })
  },
    難点
  • 新規データがあるか確認する必要があるが、新規データの確認方法が思いつかない.
    mdn、stackoverflowで検索してもリアルタイムでカウントできるか、基本的なfetchの使い方しか紹介されていないので解決できません.次に、サーバデータの最後の長さと新しく追加したサーバデータの長さを比較したいと思います.
    • 解決する
  • 発表したlet database新しいデータを追加する前にサーバを保存するため.
    • //서버에 있는 데이터를 가져오는 메서드 
  fetch: () => {
    fetch(app.server)
      .then(res => res.json())
      .then(json => {
        let messageArray = json.results.reverse();
        app.database = json.results;
        messageArray.forEach(app.renderAllMessage)

      })
  }
  • ・fetchページをロードして最初にサーバにデータをインポートする方法です.データのインポート時に、インポートしたデータをdatabaseに配置します.
  • その後setInterval定期的に実行autoFetchメソッドを使用します.また、database.lengthメソッド実行時サーバ上のデータ長(json.results.length)と比較し、長さが異なる場合はDOMにデータを追加し、最後のデータをDOMに追加する.
    • autoFetch: () => {
    
    fetch(app.server)
    .then(res => res.json())
    .then(json => {
	 
      let lastData = json.results[json.results.length - 1];//서버 가장 마지막 데이터를 가져온다.
      if (json.results.length - 1 !== app.database.length - 1) {//여기서 database는 페이지가 로드되고 새로운 메시지가 추가되기 전 서버에 데이터를 가져와 저장한 공간
        app.database = json.results;
        const $chats = document.querySelector('#chats');
        const $div1 = document.createElement('div');
        const $div2 = document.createElement('div');
        const $chat = document.createElement('div');
        $chat.classList.add('chat');
    
        $div1.textContent = lastData.username;
        $div1.classList.add('username');
          
        $div2.textContent = lastData.text;
        $chat.append($div1, $div2);
    
        $chats.prepend($chat);
      }
    })
  }
setInterval(app.autoFetch, 5000);
    CodeKata 05.
    ASP.NET MVC学習のコントローラー編拡張性