Gói chính thức · Framework

Vue composables cho WebSocket thời gian thực

Composables cho sự kiện, presence, sự kiện phía client và trạng thái kết nối trên Vue 3 và Vue 2.7. Tên kênh có thể là ref, và lượt đăng ký sẽ đổi theo.

@hibira-io/vuenpm ↗GitHub ↗

  • useEvent, usePresence, useTrigger và useConnectionState, mọi component dùng chung một kết nối.
  • An toàn với server rendering: không kết nối trên máy chủ.
  • Dùng được với Laravel Echo: truyền kết nối của Echo làm client.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

  1. Cài đặt

    npm install @hibira-io/vue pusher-js

  2. Thiết lập

    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. Sử dụng

    <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>

Trước khi bắt đầu

  • Với gói Free, hãy thêm mọi origin mà trang của bạn tải từ đó vào Origin được phép của ứng dụng (http://localhost:3000 khi phát triển, sau đó là tên miền của bạn). "*" cần gói trả phí.
  • Kênh private và presence cần một auth endpoint trên backend ký các lượt đăng ký bằng secret của ứng dụng, giống như với pusher-js.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →