[Nextjs] 주식사이트 만들기-5 채팅 프론트엔드 백엔드(Apollo client, graphQL, Nextjs, NestJs, Websocket)

실시간 db 구축 및 연동을 위해선 websocket이 무조건적으로 필요하게 되었다.

여기서 나는 다시 한번 느낀 바가 있다. 바로

 

 

RTFM(Read the fuxx'in Manual)

 

바로 RTFM 을 해야한다는 것...

메뉴얼과 Docs만 잘 읽어도 어느정도 문제를 풀 수 있음에도 항상 스쳐 지나가듯이 읽는 내 자신을 반성했다.

 

 

하지만 아직 해결된 것이 아니다.

NextJs Websocket 설정상에서 오류가 발생한다.

(docs 그대로 설정해도 오류가 생기고, stackoverflow에서도 같은 문제가 발생한다고 한다.

React와 달리 NextJs 에서는 Websocket 문제가 자주 발생한다고 하는데

아직 원인은 모르겠다. 따라서 백엔드 구성만 여기에 적어놓을 것이다.)

 

 

 

그럼 왜 백엔드 쪽에서 에러가 여태껏 생겼는지, 수정코드는 어떤지 적어볼 것이다.

 

에러가 난 이유 첫 번째는 console.log() 해본 결과 websocket 을 두 군데에서 사용했기 때문이다.

Nestjs 상에서 Chat 모듈에서 1번, gateWay에서 한번 이렇게 두번 작동을 했기 때문에

NestJs에서 에러가 생긴 것이다.

 

두 번째 이유는 Backend 상에서 Subscription을 잘못 불러온 것이다.

이것은 사실상 NestJS Docs 를 잘못이해한 것도 있으며,

동시에 NestJS + GraphQL 에 대한 지식이 부족했기 때문도 있다.

 

그러면 먼저 백엔드 (NestJS) 수정코드를 보자.

 

- chat.resolver.ts

import { Mutation, Resolver, Query, Args, Subscription } from '@nestjs/graphql';
import { ChatService } from './chat.service';
import { CreateChatDto, CreateChatDtoOutput } from './dtos/create-chat.dto';
import { Chat } from './entities/chat.entity';
import { PubSub } from 'graphql-subscriptions';

const pubSub = new PubSub();

@Resolver((of) => Chat)
export class ChatResolver {
  constructor(private readonly chatService: ChatService) {}
  @Query((returns) => [Chat])
  chats(): Promise<Chat[]> {
    return this.chatService.getChat();
  }
  @Mutation((returns) => Chat)
  async createChat(
    @Args('input') createChatDto: CreateChatDto,
  ): Promise<CreateChatDto> {
    const newChatMut = await this.chatService.createChat(createChatDto);
    console.log(newChatMut);
    pubSub.publish('newChat', { newChat: newChatMut });
    return newChatMut;
  }
  
    @Subscription((returns) => Chat)
  newChat() {
    return pubSub.asyncIterator('newChat');
  }

 

- chat.service.ts

 

export class ChatService {
  constructor(
    @InjectRepository(Chat) private readonly chats: Repository<Chat>,
  ) {}
  getChat(): Promise<Chat[]> {
    return this.chats.find();
  }
  async createChat({ user, text }: CreateChatDto): Promise<CreateChatDto> {
    try {
      const data = await this.chats.save(this.chats.create({ user, text }));
      return data;
    } catch (e) {
      return null;
    }
  }
}

 

전 코드와 다른 점은 아웃풋 value가 에러 확인 dto인 DTO output이 아닌, input data dto 인 DTO input 라는 것이다.

에러 체크를 단순하게 service 쪽에서만 체크를 해주면서 자연스럽게 원하는 데이터(user, text, createdAt, updatedAt)를 송출시켰다.

 

그리고 graphql에서 보면,

 

 

Subscription 에서 문제가 없는 것을 볼 수 있다.

 

 

하지만 Apollo Client를 사용한 NextJS Websocket 연결은 아직까지도 오류가 발생하고있다.

 

이 문제는 차근차근 해결해낼 것이다.

일단은 웹소켓 없이 실시간 채팅이 가능한지부터 찾아볼 것이다.