若使用者在通話中、結束通話時按下關閉瀏覽器可以藉由beforeunload 提醒使用者還在通話中

beforeunload 事件

在 MDN 上 beforeload 有兩種實作方式，需要注意的是若在手機上切換應用程式時，無法觸發!

addEventListener("beforeunload", (event) => {});
onbeforeunload = (event) => {}

在用戶嘗試離開當前頁面之前觸發的事件。我們可以利用這個事件，檢查用戶是否仍然在通話中，並在需要時提示他們。

以下取自Semisphere 關閉瀏覽器或分頁事件: beforeunload ********實測結果供大家參考 👇👇👇

window.addEventListener('beforeunload', function(event) {
    //event.preventDefault(); //chrome無效, ff有效, ie11有效
    //event.returnValue = ''; //chrome有效, ff無效, ie11有效
    //return ''; //chrome無效, ff無效, ie11有效
});

window.onbeforeunload = function(event) {
    //event.preventDefault(); //chrome無效, ff有效, ie11有效
    //event.returnValue = ''; //chrome有效, ff無效, ie11有效
    //return ''; //chrome有效, ff有效, ie11有效
};

實作

• 使用了 **useEffect** 鉤子，以監聽 beforeunload 事件
• 新增 isCall state 除了用在判斷是否還在通話中外也可以用於畫面渲染的判斷
• 為了顯示確認對話框，事件處理程式應該對事件使用 preventDefault（）
• 設置 returnValue 屬性，以顯示一條提示消息，詢問用戶是否確定要離開。

useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isCall && roomId) {
        e.preventDefault();
        e.returnValue = '您確定要離開視訊通話嗎？未保存的更改可能會丟失。';
      }
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isCall, roomId]);

到了26天到目前功能都完成了，下篇會加上簡單的 UI 讓頁面更像通話間~