公式パッケージ · フレームワーク

リアルタイム WebSocket のための Vue コンポーザブル

Vue 3 と Vue 2.7 で使える、イベント、プレゼンス、クライアントイベント、接続状態のコンポーザブル。チャンネル名に ref を渡すと、購読がその値に追従します。

@hibira-io/vuenpm ↗GitHub ↗

• useEvent、usePresence、useTrigger、useConnectionState。すべてのコンポーネントで 1 本の接続を共有します。
• サーバーレンダリングでも安全です。サーバーでは接続しません。
• Laravel Echo とも併用できます。Echo の接続をクライアントとして渡すだけです。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

1. インストール

   npm install @hibira-io/vue pusher-js

2. 設定する

   import { createApp } from 'vue';
   import { createHibira } from '@hibira-io/vue';
   
   createApp(App)
     .use(createHibira({
       appKey: import.meta.env.VITE_HIBIRA_KEY,
       options: {
         wsHost: 'ws.hibira.io',
         channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
       },
     }))
     .mount('#app');

3. 使う

   <script setup>
   import { ref } from 'vue';
   import { useEvent, usePresence } from '@hibira-io/vue';
   
   const orders = ref([]);
   useEvent('orders', 'order.created', (order) => orders.value.unshift(order));
   const { count } = usePresence('presence-dashboard');
   </script>

始める前に

• Free プランでは、ページを読み込むすべてのオリジンをアプリの許可オリジンに登録してください（開発中は http://localhost:3000、その後は自分のドメイン）。"*" は有料プランで使えます。
• プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →