??? dev.to ???? 14?? ?? ?? ????. ? ???? ??? ??? ??? ???? ???? ??? ?????.

??: ?? ??? ???? ???? ???? ????.

Ably? ???? ?? ??? ???? ???? ?? ?? ?? ???? ??/?? ??? ???? ?? ??? ??????. ??? ???? ???? ?? ??? ??? ?? ??? ?? ?? ?????.

Ably? ?? ???? ?? ??? ???? ?????(?? ??? ?? 24??). ?? ???? ?? ??? ???? 365? ?? ???? ?????. ? ???? ? ??? ???????.

??? ?????. ?? ?? ???? ??? ??? ?? ??(?: ? ? ??, ?? ??, ??? ??)? ?? ? ?? ??? ?? ??? ???. ?? ??(PC, ???, ???)?? ?? ???? Ably? ???? ??????. ???? ?? ?? ?? ??? ??? ?? ???? ???? ?? ???? ???? ? ?? "??? ??????"? ????? ?????.

???? ? ? ?? ?? ??? ????. ?? ??? ??? 64KB???(?????, ID, ????? ? ??). 2KB? ???? ???? ??? ?? ??? ????? Ably? ??? ??? ? ???? ?? ?? ???? ?? ????. ??? ? ???? ??? ???? ?? ?????.

? ??? ?????? ???? ??????. ??? ???? ???? ?? ????? ??????(?/???)? ???? ???? ??? ????? ??????.

flems.io? ??? ?? ??? ?? ???(HTML CSS JS)? ??????. ?? ??? ??? ??? ???? ???.

1. Ably ? ???
2. JS ??(37?)? API ?? ?????
3. "???"??? ??? ??? "??? ??? ??" ??? ??????

??? ??? ??? JS ??? ????.

const ably = new Ably.Realtime("put your API KEY here");
const channel = ably.channels.get('[?rewind=1]Realtime');
var persons = [];

channel.subscribe("db", (message) => {
  persons = message.data;
  renderTable();
});

function addPerson() {
  const name = document.getElementById('name').value;
  const age = document.getElementById('age').value;
  const role = document.getElementById('role').value;

  if (name && age && role) {
    const newPerson = { name: name, age: age, role: role };
    persons.push(newPerson);
    updatePersons();
    document.getElementById('name').value = '';
    document.getElementById('age').value = '';
    document.getElementById('role').value = '';
  }
}

function deletePerson(index) {
  persons.splice(index, 1);
  updatePersons();
}

function updatePersons() {
  channel.publish("db", persons);
}

function renderTable() {
  const personTable = 
  document.getElementById('personTable');
  personTable.innerHTML = '';
  persons.forEach((person, index) => {
    const row = `<tr>
    <td>${person.name}</td>
    <td>${person.age}</td>
    <td>${person.role}</td>
    <td><button onclick="deletePerson(${index})">( X )</button></td>
    </tr>`;
    personTable.innerHTML += row;
  });
}

flems.io? ? ?

? ??? ????? ??? ??? ????! :-)

? ??? ???: Ably.io ??? ???? ?? ??????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!