WebSocket接続

WebSocket接続について

Rheel Chat APIは、Socket.IOを使用したリアルタイム双方向通信をサポートしています。これにより、メッセージの即時受信や各種イベント通知をリアルタイムで実現できます。

接続エンドポイント

wss://<application_id>.chat.rheel.net/v1/ws

認証

WebSocket接続には、セッショントークンによる認証が必要です。

接続パラメータ

パラメータ	必須	説明
`token`	Yes	セッショントークン発行APIで取得したセッショントークン

接続の実装

import { io } from 'socket.io-client';

const socket = io('wss://<application_id>.chat.rheel.net', {
  path: '/v1/ws',
  auth: {
    token: '<SESSION_TOKEN>'
  },
  transports: ['websocket', 'polling'],
  reconnection: true
});

// 接続成功
socket.on('connect', () => {
  console.log('Connected to Rheel Chat');
  console.log('Socket ID:', socket.id);
});

// 接続エラー
socket.on('connect_error', (error) => {
  console.error('Connection error:', error.message);

  if (error.message.includes('authentication') || error.message.includes('unauthorized')) {
    console.error('認証エラー: トークンが無効または期限切れです');
  }
});

// 切断
socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
});

// エラーハンドリング
socket.on('error', (error) => {
  console.error('Socket error:', error);
});

チャンネルへの自動参加

WebSocket接続が確立されると、ユーザーが所属している全チャンネルに自動的に参加します。

// 接続成功
socket.on('connect', () => {
  console.log('Connected to Rheel Chat');
  console.log('Socket ID:', socket.id);
  // この時点で、所属している全チャンネルに自動参加済み
});

接続後、ユーザーが所属している全チャンネルのメッセージやイベントをリアルタイムで受信できます。

イベントの受信

WebSocket接続を通じて、以下のイベントをリアルタイムで受信できます。

メッセージイベント

// 新規メッセージ作成
socket.on('messages:created', (data) => {
  console.log('メッセージが作成されました:', data);
  // data = {
  //   id: "msg_123",
  //   channel_id: "ch_456",
  //   user_id: "user_789",
  //   text: "こんにちは",
  //   created_at: "2025-03-21T10:00:00Z",
  //   ...
  // }
});

// メッセージ更新
socket.on('messages:updated', (data) => {
  console.log('メッセージが更新されました:', data);
});

// メッセージ削除
socket.on('messages:deleted', (data) => {
  console.log('メッセージが削除されました:', data);
  // data = {
  //   message_id: "msg_123",
  //   channel_id: "ch_456",
  //   ...
  // }
});

リアクションイベント

// リアクション追加
socket.on('reactions:added', (data) => {
  console.log('リアクションが追加されました:', data);
  // data = {
  //   message_id: "msg_123",
  //   user_id: "user_789",
  //   emoji: "👍",
  //   ...
  // }
});

// リアクション削除
socket.on('reactions:removed', (data) => {
  console.log('リアクションが削除されました:', data);
});

既読イベント

// 既読状態更新
socket.on('readReceipts:updated', (data) => {
  console.log('既読状態が更新されました:', data);
  // data = {
  //   channel_id: "ch_456",
  //   user_id: "user_789",
  //   message_id: "msg_123",
  //   read_at: "2025-03-21T10:00:00Z",
  //   ...
  // }
});

添付ファイルイベント

// 添付ファイル削除
socket.on('attachments:deleted', (data) => {
  console.log('添付ファイルが削除されました:', data);
  // data = {
  //   attachment_id: "att_123",
  //   message_id: "msg_456",
  //   ...
  // }
});

実装例

以下は、チャンネルに参加してメッセージを送受信する完全な実装例です。

import { io } from 'socket.io-client';

// 接続
const socket = io('wss://<application_id>.chat.rheel.net', {
  path: '/v1/ws',
  auth: {
    token: '<SESSION_TOKEN>'
  },
  transports: ['websocket', 'polling'],
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 1000
});

socket.on('connect', () => {
  console.log('接続成功:', socket.id);
  // 所属している全チャンネルに自動参加済み
});

// メッセージ受信
socket.on('messages:created', (message) => {
  console.log('新規メッセージ:', message.text);
  displayMessage(message);
});

socket.on('messages:updated', (message) => {
  console.log('メッセージ更新:', message);
  updateMessage(message);
});

socket.on('messages:deleted', (data) => {
  console.log('メッセージ削除:', data.message_id);
  removeMessage(data.message_id);
});

// リアクション受信
socket.on('reactions:added', (data) => {
  console.log('リアクション追加:', data);
  addReaction(data);
});

socket.on('reactions:removed', (data) => {
  console.log('リアクション削除:', data);
  removeReaction(data);
});

// 既読受信
socket.on('readReceipts:updated', (data) => {
  console.log('既読更新:', data);
  updateReadReceipt(data);
});

// エラーハンドリング
socket.on('connect_error', (error) => {
  console.error('接続エラー:', error.message);
});

socket.on('error', (error) => {
  console.error('エラー:', error);
});

socket.on('disconnect', (reason) => {
  console.log('切断:', reason);
});

// ヘルパー関数（実装例）
function displayMessage(message) {
  // UIにメッセージを表示
}

function updateMessage(message) {
  // UIのメッセージを更新
}

function removeMessage(messageId) {
  // UIからメッセージを削除
}

function addReaction(data) {
  // UIにリアクションを追加
}

function removeReaction(data) {
  // UIからリアクションを削除
}

function updateReadReceipt(data) {
  // UIの既読状態を更新
}

再接続戦略

Socket.IOはデフォルトで自動再接続をサポートしています。

const socket = io('wss://<application_id>.chat.rheel.net', {
  path: '/v1/ws',
  auth: {
    token: '<SESSION_TOKEN>'
  },
  transports: ['websocket', 'polling'],
  // 再接続設定
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 5000,
  timeout: 20000
});

// 再接続試行
socket.io.on('reconnect_attempt', (attemptNumber) => {
  console.log(`再接続試行: ${attemptNumber}回目`);
});

// 再接続成功
socket.io.on('reconnect', (attemptNumber) => {
  console.log(`再接続成功: ${attemptNumber}回目の試行後`);
  // 再接続後、自動的に全チャンネルに再参加されます
});

// 再接続失敗
socket.io.on('reconnect_failed', () => {
  console.error('再接続に失敗しました');
});

ベストプラクティス

接続管理

アプリケーション起動時に接続を確立
バックグラウンド移行時は切断を検討
フォアグラウンド復帰時に再接続
再接続後は自動的に全チャンネルに再参加されます

メモリ管理

イベントリスナーは適切にクリーンアップ
コンポーネント破棄時にリスナーを削除
大量のメッセージ履歴は適切にページング
不要になったらsocket.disconnect()を呼ぶ

エラーハンドリング

すべてのイベントでエラーハンドリングを実装
トークン期限切れに対応
ネットワークエラーを適切に処理
connect_errorとerrorイベントを監視

パフォーマンス

不要なイベントリスナーは登録しない
メッセージ受信時のUI更新を最適化
大量のイベント受信時はバッチ処理を検討

トラブルシューティング

接続できない

症状: connect_errorイベントが発生する確認事項:

トークンが正しく設定されているか
トークンの有効期限が切れていないか
エンドポイントURLが正しいか
ネットワーク接続が正常か

メッセージを受信できない

症状: messages:createdイベントが発火しない確認事項:

WebSocket接続が正常に確立されているか（connectイベントを受信したか）
ユーザーがチャンネルに所属しているか（REST APIで確認）
正しいチャンネルでメッセージが送信されているか

再接続が頻繁に発生する

症状: 接続が不安定対策:

transportsの順序を調整（['websocket', 'polling']）
タイムアウト値を調整
ネットワーク環境を確認

次のステップ

メッセージAPI

REST APIでメッセージを送信する

チャンネルAPI

チャンネルの作成と管理

Rheel Chat APIについて

リアルタイム通信

Webhook

WebSocket接続について

接続エンドポイント

認証

接続パラメータ

接続の実装

チャンネルへの自動参加

イベントの受信

メッセージイベント

リアクションイベント

既読イベント

添付ファイルイベント

実装例

再接続戦略

ベストプラクティス

トラブルシューティング

次のステップ

メッセージAPI

チャンネルAPI

​WebSocket接続について

​接続エンドポイント

​認証

​接続パラメータ

​接続の実装

​チャンネルへの自動参加

​イベントの受信

​メッセージイベント

​リアクションイベント

​既読イベント

​添付ファイルイベント

​実装例

​再接続戦略

​ベストプラクティス

​トラブルシューティング

​次のステップ

メッセージAPI

チャンネルAPI

WebSocket接続について

接続エンドポイント

認証

接続パラメータ

接続の実装

チャンネルへの自動参加

イベントの受信

メッセージイベント

リアクションイベント

既読イベント

添付ファイルイベント

実装例

再接続戦略

ベストプラクティス

トラブルシューティング

次のステップ