webSocket connection to 'wss//.....' failed:

[ashiyang]

First, thank you very much for sharing how to make todolist app in Next.js & supaBase, it help me a lot.

I'm not familiar with React and supaBase, here I have some issue when I followed your tutorial in freeCodeCamp,

I always get error in Chrome console like this
webSocket connection to 'wss//.....' failed:

and i think the error is from these code in index.js

useEffect(() => {
    const todoListener = supabaseClient
      .from("todos")
      .on("*", (payload) => {
        if (payload.eventType !== "DELETE") {
          const newTodo = payload.new;
          setTodos((oldTodos) => {
            const exists = oldTodos.find((todo) => todo.id === newTodo.id);
            let newTodos;
            if (exists) {
              const oldTodoIndex = oldTodos.findIndex(
                (obj) => obj.id === newTodo.id
              );
              oldTodos[oldTodoIndex] = newTodo;
              newTodos = oldTodos;
            } else {
              newTodos = [...oldTodos, newTodo];
            }
            newTodos.sort((a, b) => b.id - a.id);
            return newTodos;
          });
        }
      })
      .subscribe();

    return () => {
      todoListener.unsubscribe();
    };
  }, []);

but i have no idea to fix it....

because when I update todo or add new todo, it cannot show the new state for todos, i need refresh again to fetch new todos.

thank you.