호기심: Ably.io 실시간 메시징을 경량 데이터베이스로 사용

이번이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!