Document

⚫︎ 概要

talknリアルタイム通信プラットフォーム用のWebSocketクライアントライブラリです。
Socket.IO + Redux + WebWorkerを統合したリアルタイム通信ライブラリとして設計されており、 バンドルされたJSファイルとして外部配布されます。

• - リアルタイムチャット通信
• - 投稿の送受信
• - チャンネル管理
• - ランキング機能
• - WebWorkerによる非ブロッキング通信

⚫︎ インストール

CDN経由

<script src="//api.talkn.io"></script>

⚫︎ 基本的な使い方

1. シンプルな接続

// 基本的な接続
const client = await TalknAPI('your-server-connection');

// メッセージ投稿
await client.post('Hello, world!');

// 状態取得
const state = client.getState();
console.log('Current posts:', state.posts);

2. 状態変更の監視

const client = await TalknAPI('your-server-connection');

// 状態変更を監視
const unsubscribe = client.subscribe((state) => {
  console.log('New posts:', state.posts);
  console.log('Channel info:', state.tuneCh);
  console.log('Rankings:', state.rank);
});

// 監視停止
unsubscribe();

3. 詳細な設定

// 接続パラメータを指定
const params = {
  isTuneSameCh: true,    // 同一チャンネル接続許可
  isTuneMultiCh: true,   // 複数チャンネル接続許可
  isDebug: false         // デバッグモード
};

const client = await TalknAPI('your-server-connection', params);

⚫︎ API リファレンス

TalknAPI(connection, params?)

Returns: Promise<ScopedTalknClient>

メインのファクトリ関数。接続を確立し、スコープされたクライアントを返します。

⚫︎ 実装例

リアルタイムチャットアプリ

class ChatApp {
  constructor() {
    this.client = null;
    this.messageContainer = document.getElementById('messages');
    this.messageInput = document.getElementById('messageInput');
    this.sendButton = document.getElementById('sendButton');
  }

  async init(serverConnection) {
    try {
      // Talkn APIクライアント接続
      this.client = await TalknAPI(serverConnection, {
        isTuneSameCh: true,
        isTuneMultiCh: false
      });

      // 既存の投稿を取得
      await this.client.fetchPosts();
      
      // リアルタイム状態監視
      this.client.subscribe((state) => {
        this.updateMessages(state.posts);
        this.updateChannelInfo(state.tuneCh);
      });

      // 送信ボタンイベント
      this.sendButton.addEventListener('click', () => {
        this.sendMessage();
      });

      console.log('Chat app initialized successfully');
    } catch (error) {
      console.error('Failed to initialize chat app:', error);
    }
  }

  async sendMessage() {
    const content = this.messageInput.value.trim();
    if (content && this.client) {
      try {
        await this.client.post(content);
        this.messageInput.value = '';
      } catch (error) {
        console.error('Failed to send message:', error);
      }
    }
  }
}

// 使用例
const chatApp = new ChatApp();
chatApp.init('my-chat-room');