Inflearn コミュニティ Q&A

kimsh59931433

投稿した質問数

Slackクローンコーディング[Reactによるリアルタイムチャット]

socket.io イベント接続

소켓 이벤트 연결하기를 시청하다가 504 (Gateway Timeout) 오류가 떴습니다.

作成

538

안녕하세요 제로초님,

useEffect(() => {
        console.log('DMList: workspace 바꼈다', workspace);
        setOnlineList([]);
    }, [workspace]);

    useEffect(() => {
        socket?.on('onlineList', (data: number[]) => {
            console.log("data", data)
            setOnlineList(data);
        });
        // socket?.on('dm', onMessage);
        // console.log('socket on dm', socket?.hasListeners('dm'), socket);
        return () => {
            // socket?.off('dm', onMessage);
            // console.log('socket off dm', socket?.hasListeners('dm'));
            // socket?.off('onlineList');
        };
    }, [socket]);

여기까지 진행하고 슬랙앱을 봤을 때, (나) 여기에만 초록불이 잘 들어오는걸 확인했는데, 여기서 다른 탭을 갔다오거나 새로고침을 하면 제 생각엔 swr이 작동을 안하는 것 같습니다. userdata를 못받아와서 갑자기 loginpage로 튕겨져 나가는데, 쿠키는 남아있는데 계속 로딩중이라고 뜹니다. 백이랑 프론트 서버를 재시작하면 다시 되긴하는데, 채널을 옮기거나 하면 다시 오류가 시작되는데 이유를 못찾겠습니다.

프론트 쪽

백쪽

어디서 꼬인건지 잘 모르겠습니다. mutate쪽이 문제인가 싶어서 지워봤는데 똑같습니다..

웹팩Socket.iotypescriptreactbabel클론코딩

クイズ

실시간 데이터 통신에 폴링 방식 대신 웹소켓(Socket.IO 포함)을 사용하는 주된 이점은 무엇일까요?

HTTP 요청보다 항상 응답 속도가 빠릅니다.

서버에서 클라이언트로 데이터 푸시가 가능합니다.

네트워크 대역폭을 훨씬 적게 사용합니다.

방화벽 설정이 더 간단합니다.

回答 2

kimsh59931433

質問者

Executing (default): SELECT id, email, nickname, password, createdAt, updatedAt, deletedAt FROM users AS User WHERE (`User`.`deletedAt` IS NULL AND User.`email` = 'lee123@naver.com');

Executing (default): SELECT id, nickname, email FROM users AS User WHERE (`User`.`deletedAt` IS NULL AND User.`id` = 8);

POST /api/users/login 200 255.278 ms - 55

Executing (default): SELECT User.`id`, User.`nickname`, User.`email`, Workspaces.`id` AS Workspaces.id, Workspaces.`name` AS Workspaces.name, Workspaces.`url` AS Workspaces.url, Workspaces.`createdAt` AS Workspaces.createdAt, Workspaces.`updatedAt` AS Workspaces.updatedAt, Workspaces.`deletedAt` AS Workspaces.deletedAt, Workspaces.`OwnerId` AS Workspaces.OwnerId, Workspaces->WorkspaceMember.`loggedInAt` AS Workspaces.WorkspaceMember.loggedInAt, Workspaces->WorkspaceMember.`createdAt` AS Workspaces.WorkspaceMember.createdAt, Workspaces->WorkspaceMember.`updatedAt` AS Workspaces.WorkspaceMember.updatedAt, Workspaces->WorkspaceMember.`WorkspaceId` AS Workspaces.WorkspaceMember.WorkspaceId, Workspaces->WorkspaceMember.`UserId` AS Workspaces.WorkspaceMember.UserId

FROM users AS User LEFT OUTER JOIN ( workspacemembers AS Workspaces->WorkspaceMember INNER JOIN workspaces AS Workspaces ON Workspaces.`id` = Workspaces->WorkspaceMember.`WorkspaceId`) ON User.`id` = Workspaces->WorkspaceMember.`UserId` AND (`Workspaces`.`deletedAt` IS NULL) WHERE (`User`.`deletedAt` IS NULL AND User.`id` = 8);

Executing (default): SELECT id, name, url, createdAt, updatedAt, deletedAt, OwnerId FROM workspaces AS Workspace WHERE (`Workspace`.`deletedAt` IS NULL AND Workspace.`url` = 'sleact');

Executing (default): SELECT Channel.`id`, Channel.`name`, Channel.`private`, Channel.`createdAt`, Channel.`updatedAt`, Channel.`WorkspaceId`, Members.`id` AS Members.id, Members->ChannelMembers.`ChannelId` AS Members.ChannelMembers.ChannelId, Members->ChannelMembers.`UserId` AS Members.ChannelMembers.UserId FROM channels AS Channel INNER JOIN ( ChannelMembers AS Members->ChannelMembers INNER JOIN users AS Members ON Members.`id` = Members->ChannelMembers.`UserId` AND Members->ChannelMembers.`UserId` = 8) ON Channel.`id` = Members->ChannelMembers.`ChannelId` AND (`Members`.`deletedAt` IS NULL) WHERE Channel.`WorkspaceId` = 1;

Executing (default): SELECT User.`id`, User.`nickname`, User.`email`, WorkspaceMember.`loggedInAt` AS WorkspaceMember.loggedInAt, WorkspaceMember.`createdAt` AS WorkspaceMember.createdAt, WorkspaceMember.`updatedAt` AS WorkspaceMember.updatedAt, WorkspaceMember.`WorkspaceId` AS WorkspaceMember.WorkspaceId, WorkspaceMember.`UserId` AS WorkspaceMember.UserId FROM users AS User INNER JOIN workspacemembers AS WorkspaceMember ON User.`id` = WorkspaceMember.`UserId` AND WorkspaceMember.`WorkspaceId` = 1 WHERE (`User`.`deletedAt` IS NULL);

GET /api/workspaces/sleact/channels 200 46.302 ms - 2114

GET /api/workspaces/sleact/members 200 49.981 ms - 666

GET /api/users 200 21.758 ms - 1317

C:\Users\kimsh\Desktop\github-scm\sleact\back\socket.js:23

channels.forEach((channel) => {

TypeError: Cannot read properties of undefined (reading 'forEach')

at Socket.<anonymous> (C:\Users\kimsh\Desktop\github-scm\sleact\back\socket.js:23:16)

at Socket.emit (node:events:513:28)

at C:\Users\kimsh\Desktop\github-scm\sleact\back\node_modules\socket.io\lib\socket.js:531:14

at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

Node.js v18.12.0

[nodemon] app crashed - waiting for file changes before starting...

이렇게 나옵니다..

zerocho

インストラクター

프론트에서 socket.emit('login') 부분 코드 보여주세요. 거기서 channels가 백엔드로 전달되지 않았습니다.

kimsh59931433

質問者

// 로그인 했을 때만 요청할 수 있도록 조건부 요청
    const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher);
    const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher);

    const [socket, disconnect] = useSocket(workspace);

    useEffect(() => {
        if (channelData && userData && socket) {
            socket.emit('login', { id: userData.id, channelData: channelData.map(v => v.id) })
        }
    }, [channelData, userData, socket]);

    useEffect(() => {
        return () => {
            disconnect();
        }
    }, [workspace, disconnect]);

초기에는 작동하는데 다른동작을 하면 못받아옵니다

zerocho

インストラクター

emit에 넣는 객체의 키가 channelData가 아니라 channels입니다

kimsh59931433

質問者

정말 감사합니다 ㅠㅠ 잘 되는것 같습니다.

zerocho

インストラクター

백엔드쪽 에러라서 백엔드 로그를 더 봐야하는데요. 저게 전부인가요??

kimsh59931433

投稿した質問数

質問する