无需使用Firebase，如何实现类其的响应式对象与实时推送功能？

Great question! I totally get why Firebase + Vuefire feels like a breath of fresh air—having reactive objects that auto-update without manually wiring up dozens of socket listeners and callbacks is such a productivity boost. The good news is you don’t have to rely on Firebase to get this experience. Here are my top recommendations that balance standard practices and elegance:

1. RxJS + WebSockets: Stream-Based Reactivity #

RxJS is perfect for managing real-time data streams, and it plays seamlessly with Vue’s reactive system. You can wrap your WebSocket connection into an observable stream, then map incoming events to updates for your reactive data—no messy one-off listeners needed.

Example Implementation: #

First, set up a reusable WebSocket service with RxJS:

// websocket.service.js
import { webSocket } from 'rxjs/webSocket';

export const bookSocket$ = webSocket('ws://your-server/ws/books');

Then in your Vue component, subscribe to the stream and let Vue handle reactivity automatically:

// BookList.vue
import { bookSocket$ } from './websocket.service';

export default {
  data() {
    return {
      books: []
    };
  },
  created() {
    // Fetch initial data
    axios.get('/books').then(res => {
      this.books = res.data;
    });

    // Subscribe to real-time updates
    bookSocket$.subscribe(event => {
      switch(event.type) {
        case 'book-created':
          this.books.push(event.payload);
          break;
        case 'book-updated':
          const index = this.books.findIndex(b => b.id === event.payload.id);
          if (index !== -1) this.books[index] = event.payload;
          break;
        case 'book-removed':
          this.books = this.books.filter(b => b.id !== event.payload.id);
          break;
      }
    });
  },
  beforeUnmount() {
    bookSocket$.unsubscribe();
  }
};

Why this works: RxJS abstracts away the low-level socket management, and you centralize your update logic in one place. No more repeating Pusher.on calls across components.

2. Pinia/Vuex with Real-Time Sync #

If you’re using a state management library like Pinia (the official Vue 3 replacement for Vuex), you can encapsulate all real-time logic in your store. Components just use the store’s reactive state, and updates happen automatically when the store receives events.

Example with Pinia: #

// stores/books.js
import { defineStore } from 'pinia';
import axios from 'axios';

export const useBooksStore = defineStore('books', {
  state: () => ({
    list: []
  }),
  actions: {
    async fetchInitialBooks() {
      const res = await axios.get('/books');
      this.list = res.data;
    },
    handleBookCreated(book) {
      this.list.push(book);
    },
    handleBookUpdated(updatedBook) {
      const index = this.list.findIndex(b => b.id === updatedBook.id);
      if (index !== -1) this.list[index] = updatedBook;
    },
    handleBookRemoved(bookId) {
      this.list = this.list.filter(b => b.id !== bookId);
    }
  }
});

Then in your component, set up the socket listener once and dispatch store actions:

// BookList.vue
import { useBooksStore } from '@/stores/books';
import Pusher from 'pusher-js';

export default {
  setup() {
    const booksStore = useBooksStore();
    booksStore.fetchInitialBooks();

    // Initialize Pusher (or your socket client)
    const pusher = new Pusher('your-key', { cluster: 'your-cluster' });
    const channel = pusher.subscribe('books');

    // Bind events to store actions
    channel.bind('book-created', book => booksStore.handleBookCreated(book));
    channel.bind('book-updated', book => booksStore.handleBookUpdated(book));
    channel.bind('book-removed', bookId => booksStore.handleBookRemoved(bookId));

    return {
      books: booksStore.list
    };
  }
};

Why this works: Your real-time logic is centralized in the store, so components stay clean. Any component using booksStore.list will react automatically to updates—no manual data syncing needed.

3. Custom Vue Composable for Reactive WebSockets #

For a more Vue-native approach, create a reusable composable that wraps your socket client and returns reactive data. This way, you can drop real-time reactivity into any component with one line of code.

Example Composable: #

// composables/useReactiveBooks.js
import { ref, onUnmounted } from 'vue';
import axios from 'axios';
import Pusher from 'pusher-js';

export function useReactiveBooks() {
  const books = ref([]);

  // Fetch initial data
  const fetchInitialBooks = async () => {
    const res = await axios.get('/books');
    books.value = res.data;
  };

  // Set up Pusher listeners
  const pusher = new Pusher('your-key', { cluster: 'your-cluster' });
  const channel = pusher.subscribe('books');

  const handleEvents = () => {
    channel.bind('book-created', book => books.value.push(book));
    channel.bind('book-updated', updatedBook => {
      const index = books.value.findIndex(b => b.id === updatedBook.id);
      if (index !== -1) books.value[index] = updatedBook;
    });
    channel.bind('book-removed', bookId => {
      books.value = books.value.filter(b => b.id !== bookId);
    });
  };

  // Cleanup on component unmount
  onUnmounted(() => {
    channel.unbind_all();
    pusher.unsubscribe('books');
  });

  // Initialize
  fetchInitialBooks();
  handleEvents();

  return { books };
}

Then use it in your component like this:

// BookList.vue
import { useReactiveBooks } from '@/composables/useReactiveBooks';

export default {
  setup() {
    const { books } = useReactiveBooks();
    return { books };
  }
};

Why this works: The composable encapsulates all the messy socket setup and cleanup. Your component gets a fully reactive books array with zero boilerplate—just like Vuefire!

4. Server-Sent Events (SSE) for Simplified One-Way Push #

If you only need one-way real-time updates (server to client), Server-Sent Events (SSE) are a lighter alternative to WebSockets. They work natively with Vue’s reactive system since you can listen to events and update reactive variables directly.

Example Implementation: #

// BookList.vue
export default {
  data() {
    return {
      books: [],
      eventSource: null
    };
  },
  created() {
    // Fetch initial data
    axios.get('/books').then(res => {
      this.books = res.data;
    });

    // Set up SSE connection
    this.eventSource = new EventSource('/api/books/events');
    
    this.eventSource.addEventListener('book-created', (event) => {
      const book = JSON.parse(event.data);
      this.books.push(book);
    });

    this.eventSource.addEventListener('book-updated', (event) => {
      const updatedBook = JSON.parse(event.data);
      const index = this.books.findIndex(b => b.id === updatedBook.id);
      if (index !== -1) this.books[index] = updatedBook;
    });

    this.eventSource.addEventListener('book-removed', (event) => {
      const bookId = JSON.parse(event.data);
      this.books = this.books.filter(b => b.id !== bookId);
    });
  },
  beforeUnmount() {
    this.eventSource.close();
  }
};

Why this works: SSE is built into modern browsers, so you don’t need extra libraries. The code is straightforward, and updates are automatically reflected in your reactive books array.

All these approaches follow standard web practices and give you that same "set it and forget it" reactive experience you love from Firebase—without vendor lock-in. Pick the one that best fits your stack and use case!

内容的提问来源于stack exchange，提问作者CodeOverload