src/api/chat-api.ts - main - WorldOfYuri/react-1

src/api/chat-api.ts
85 строк3 KB
Юрий Кузмичев
change auto scroll
25 июл 2023, 09:15
25 июл 2023, 09:15c43d43e
const subscribes = {
  "messages-received": [] as MessagesReceivedSubscriberType[],
  "status-changed": [] as StatusChangedSubscriberType[],
};

let ws: WebSocket | null = null;
type EventsNamesType = "messages-received" | "status-changed";

const closeHandler = () => {
  notifySubscribersAboutStatus("pending");
  setTimeout(createChannel, 3000);
};
const messageHandler = (e: MessageEvent) => {
  const newMessages = JSON.parse(e.data);
  subscribes["messages-received"].forEach(s => s(newMessages));
};
const openHandler = () => {
  notifySubscribersAboutStatus("ready");
};
const errorHandler = () => {
  notifySubscribersAboutStatus("error");
  console.error("restart page");
};
const cleanUp = () => {
  ws?.removeEventListener("close", closeHandler);
  ws?.removeEventListener("message", messageHandler);
  ws?.removeEventListener("open", openHandler);
  ws?.removeEventListener("error", errorHandler);
};
const notifySubscribersAboutStatus = (status: StatusType) => {
  subscribes["status-changed"].forEach(s => s(status));
};
function createChannel() {
  cleanUp();
  ws?.close();
  ws = new WebSocket(
    "wss://social-network.samuraijs.com/handlers/ChatHandler.ashx"
  );
  notifySubscribersAboutStatus("pending");
  ws.addEventListener("close", closeHandler);
  ws.addEventListener("message", messageHandler);
  ws.addEventListener("open", openHandler);
  ws.addEventListener("error", errorHandler);
}
export const chatAPI = {
  start() {
    createChannel();
  },
  stop() {
    subscribes["messages-received"] = [];
    subscribes["status-changed"] = [];
    cleanUp();
    ws?.close();
  },
  subscribe(
    eventName: EventsNamesType,
    callback: MessagesReceivedSubscriberType | StatusChangedSubscriberType
  ) {
    //@ts-ignore
    subscribes[eventName].push(callback);
    return () => {
      //@ts-ignore
      subscribes[eventName] = subscribes[eventName].filter(s => s !== callback);
    };
  },
  unsubscribe(
    eventName: EventsNamesType,
    callback: MessagesReceivedSubscriberType | StatusChangedSubscriberType
  ) {
    //@ts-ignore
    subscribes[eventName] = subscribes[eventName].filter(s => s !== callback);
  },
  sendMessage(message: string) {
    ws?.send(message);
  },
};
type MessagesReceivedSubscriberType = (messages: ChatMessageType[]) => void;
type StatusChangedSubscriberType = (status: StatusType) => void;
export type ChatMessageType = {
  message: string;
  photo: string;
  userId: number;
  userName: string;
};
export type StatusType = "pending" | "ready" | "error";