1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Hexabase TypeScript SDKの使い方(リアルタイム通知)

Posted at

Hexabase(ヘキサベース)は企業においても安心して利用できるBaaS(Backend as a Service)を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、チャットやコラボレーションアプリに使えるリアルタイム通知の使い方を紹介します。

インストール

インストールはnpmやyarnを使って行います。

# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js

インポート

インポートすると、 HexabaseClient というオブジェクトが取得できます。

import { HexabaseClient } from "@hexabase/hexabase-js";

初期化

HexabaseClientを初期化します。

const client = new HexabaseClient();

認証

Hexabaseでは業務利用を想定しているため、利用する際に認証情報が必須になります。最初はメールアドレスとパスワードで認証し、その後はトークンを使ってGraphQLにアクセスします。 client を使って処理します。

初回の認証は次のようになります。emailとパスワード、またはトークンが必須です。

await client.login({email, password, token});

後はこの client に対して処理を行います。

データを作る

データはワークスペース → プロジェクト → データストア → データアイテムの順番にデータを取得します。

client.setWorkspace(workspaceId);

// 対象プロジェクト
const project = await client.currentWorkspace.project(projectId);

// 対象データストア
const datastore = await project.datastore(datastoreId);

// 新規レコード
const item = await datastore.item();

リアルタイム通知について

リアルタイム通知は、 item に対して行います。この時、他のユーザーも通知を受け取れるように、保存されているデータを利用します。

await item.save();

そして、該当のデータアイテムに対して subscribe を行います。 subscribeunsubscribe で解除できます。購読するイベントとして update を指定できます。現状は update のみです。

item.subscribe('update', data => {
	console.log(data);
});

dataItemSubscription クラスとなっており、構造は以下のようになっています。

class ItemSubscription {
  public id?: string;
  public actionname?: string;
  public comment?: string;
  public createdAt?: Date;
  public item?: Item;
  public displayorder?: number;
  public email?: string;
  public fileIds?: string[];
  public isFetchreplymail: boolean;
  public isNotify: boolean;
  public isChanged: boolean;
  public isNotifyToSender: boolean;
  public isSendItemUnread: boolean;
  public postForEel: boolean;
  public postMode: string;
  public user: User;
}

通知を送る

通知を送る際には、コメント機能を使います。このコメントを保存すると、その内容が購読している他のユーザーに届く形です。

const comment = await item.comment();
comment.set('comment', 'コメント');
await comment.save();

コメントは文字列のみ送れるので、JSON.stringifyなどを使ってオブジェクトを文字列に変換して送ると良いでしょう。

まとめ

SDKを使うことで、Hexabaseのリアルタイム通知機能が簡単に利用できます。ぜひご活用ください。リアルタイム通知は、Webアプリケーションのコラボレーション機能や、チャット機能などで活用できます。

Hexabaseには他にもバイナリファイルのアップロードや認証などの機能があります。それらの機能も利用してください。

Hexabase | 新規事業向け開発・競争領域でのDX実現をサポート

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?