Vue와 함께 BroadcastChannel API를 사용하여 여러 탭에서 참조 동기화

저희는 개발자뿐만 아니라 팀원 모두의 시간을 절약하려고 노력합니다. 어떤 사람들은 클라이언트나 데모를 위해 앱을 구성하는 데 많은 시간을 소비하므로 앱이 최대한 원활하게 진행되도록 합니다. 가능한. 예를 들어, 우리는 모든 변경 사항을 실시간으로 적용하려고 노력하므로 변경 사항을 표시하기 위해 앱을 다시 로드할 필요가 없습니다.

최근에는 이러한 사람들이 일반적으로 여러 탭을 열어 작업하여 앱의 여러 페이지에서 구성이 예상대로 작동하는지 확인했습니다. 그래서 우리는 탭 전체에서 구성을 동기화하는 방법을 고려했습니다.

세션이나 로컬 저장소 또는 다른 어떤 것에도 저장하고 싶지 않았습니다. 항상 최신 상태를 유지해야 하기 때문입니다.

그때 우리는 BroadcastChannel API를 발견했습니다. 저는 그것이 존재하는지조차 몰랐습니다. 상당히 새로운 것은 아니지만 Safari는 CanIUse에 따라 이를 마지막으로 구현했습니다. 어쨌든 현재는 대부분 지원됩니다. iframe의 오래된 window.postMessage()와 비슷하지만 출처가 동일한 여러 탭에 걸쳐 있다고 생각할 수 있습니다.

다행히도 VueUse는 이미 사용을 쉽게 하기 위해 약간의 구성 가능을 만들었습니다: https://vueuse.org/core/useBroadcastChannel/#usebroadcastchannel

const {
  isSupported,
  channel,
  post,
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'unique-name' })

그래서 우리는 참조가 모든 탭에서 항상 동기화되도록 이를 기반으로 약간의 내부 컴포저블을 만들었습니다.

import { useBroadcastChannel, watchPausable } from '@vueuse/core';
import { nextTick, watch } from 'vue';

import type { Ref } from 'vue';

export const useSync = <T>(value: Ref<T>, name: string, options?: { immediate?: boolean; deep?: boolean }) => {
  // Name must be unique
  const { post, data } = useBroadcastChannel<T, T>({ name });

  // When value changes locally, update other tabs
  const { pause, resume } = watchPausable(
    () => value.value,
    (newValue) => {
      post(structuredClone(newValue));
    },
    options,
  );

  // When value changes in another tab, update it locally
  watch(
    () => data.value,
    async (newValue) => {
      // Prevent watch loop when updating config
      pause();
      value.value = newValue;
      await nextTick();
      resume();
    },
    options,
  );
};

이제 참조를 한 줄로 동기화할 수 있습니다.

const config = ref({})
useSync(config, 'config', { deep: true });

그리고 짜잔! 매달 팀 전체에서 몇 시간이 절약됩니까?

위 내용은 Vue와 함께 BroadcastChannel API를 사용하여 여러 탭에서 참조 동기화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!