【JavaScript実践】 外部データベースの利用(milkcocoa) 4

作成した掲示板に、ほかの人の書き込みがリアルタイムで反映されるようにする。

  1. データストア監視イベントの追加
  2. データ送信時のイベントの編集

データストア監視イベントの追加

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com");
  let ds = milkcocoa.dataStore("messages");
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
  
  lock.on("authenticated", authResult => {
    milkcocoa.authWithToken(authResult.idToken, (err, user) => {
      render(user.sub);
    });
  });
  
  milkcocoa.user((err, user) => {
    if(user) {
      render(user.sub);
    }
    else {
      lock.show();
    }
  });
  
  function render(userId) {
    getData();
    
    sendButton.addEventListener("click", () => {
      sendInputData(userId);
    });
    
    // pushイベントの監視
    ds.on("push", datum => {
      let outputItem = createOutputItem(datum.value.user, datum.value.datetime, datum.value.message);

      outputList.appendChild(outputItem);
    });
  }
  
  function sendInputData(userId) {
    // 略
  }
  
  function getData() {
    // 略
  }
  
  function createOutputItem(user, date, message) {
    // 略
  }
}

on メソッドでデータストアの変更を監視できる。

データ送信時のイベントの編集

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com");
  let ds = milkcocoa.dataStore("messages");
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
  
  lock.on("authenticated", authResult => {
    milkcocoa.authWithToken(authResult.idToken, (err, user) => {
      render(user.sub);
    });
  });
  
  milkcocoa.user((err, user) => {
    if(user) {
      render(user.sub);
    }
    else {
      lock.show();
    }
  });
  
  function render(userId) {
    // 略
  }
  
  function sendInputData(userId) {
    ds.push({
      "user": userId.substr(-10),
      "datetime": (new Date()).toLocaleString(),
      "message": inputArea.value
    });
    
    inputArea.value = "";
  }
  
  function getData() {
    // 略
  }
  
  function createOutputItem(user, date, message) {
    // 略
  }
}

データ送信時にインプットエリアを空にする。