인프런 커뮤니티 질문&답변

안녕하세요! socket관련한 서비스를 진행해보고 싶어서 제로초님의 강의를 들은 수강생입니다.

현재 nest & flutter를 이용하고 있는데, flutter에서의 연결 및 다른 tool에서 socket io 연결이 되지 않으며

“외부 사이트로는 접근이 불가능한 오류”가 생겨서 조심스럽게 여쭤봅니다.

현재 로직은 채팅을 생성시, 채팅을 보여주는 리스트가 실시간으로 새로고침이 되는 부분을 작업중입니다.

하지만, postman, httpie, hoppscotch의 부분에서 연결이 되지 않는 문제가 발생합니다.

많은 방법을 찾아봤지만, 터미널에서 socket io cli를 통해서 로그는 볼 수 있지만, 다른 tool에서는 이용이 불가능한 방법에 대해서 알고 싶어서 질문드립니다!Socket io를 통해서 local, dev서버 연결 완료

하지만 postman의 socket io기능을 통해서 테스트를 진행하려고 할 때,

postman으로 연결local에서는 문제가 없이 연길이 되지만,

dev서버에서는 이러한 에러가 발생합니다.

또한 flutter 앱에서 연결을 하려면 다음과 같은 에러가 발생합니다.

오류 메시지 "WebSocketException: Connection to 'http://~~~~.com:81/socket.io/?EIO=4&transport=websocket#' was not upgraded to websocket"는 클라이언트가 WebSocket 연결을 시도하였으나, 서버가 해당 연결을 WebSocket 프로토콜로 업그레이드하지 않았다는 것을 의미합니다. 이는 여러 가지 원인에 의해 발생할 수 있습니다:

upgrade가 되지 않았다고 나와서 ,ngnix의 socket 부분에서 upgrade부분도 잘 넣어줬는데, 오류가 해결되지 않아서... 고민 끝에 질문 올립니다.

Ngnix 설정부터 2주정도 시간을 들였지만, 해결이 되지 않아서…여쭤봅니다.

방화벽도 해제가 되어 있는데 연결이 안되고 있습니다..

다음은 nest에서 작성한 코드 입니다!

[chat.gateway.ts]

import {
  WebSocketGateway,
  WebSocketServer,
  SubscribeMessage,
  OnGatewayConnection,
  OnGatewayDisconnect,
  OnGatewayInit,
  ConnectedSocket,
  MessageBody,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway()
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  afterInit(server: Server) {
    console.log('WebSocket initialized');
  }

  handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`); // 수정: client 객체 직접 출력 대신 id 출력
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }

  @SubscribeMessage('sendMessage')
  handleMessage(
    @ConnectedSocket() client: Socket,
    @MessageBody() data: { message: string }
  ): void {
    console.log(`Received message from ${client.id}: ${data.message}`);
    this.server.emit('newMessage', data); // 모든 클라이언트에게 메시지 전송
    console.log(`Received message: ${data.message}`);
  }
}

[main.ts]

import { ConfigService } from '@nestjs/config';
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { join } from 'path';
import { AppModule } from './app.module';
import { HttpExceptionFilter } from './common/exceptions/http-exception.filter';
import { SuccessInterceptor } from './common/interceptors/success.interceptor';
import { IoAdapter } from '@nestjs/platform-socket.io';
import { CustomIoAdapter } from './adapters/custom-io.adapter';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useWebSocketAdapter(new CustomIoAdapter(app));
  const configService = app.get(ConfigService);
  const port = configService.get('server.port');
  const mongoUrl = configService.get('DB.MONGO_URL');

  console.log('MongoDB URL:', mongoUrl);

  app.enableCors({
    origin: true,
    credentials: true,
  });

  app.useStaticAssets(join(__dirname, '..', 'client'), {
    prefix: '/api/v1/client',
  });

  app.useGlobalInterceptors(new SuccessInterceptor());
  app.useGlobalFilters(new HttpExceptionFilter());
  app.setGlobalPrefix('api/v1');

  const swagger_options = new DocumentBuilder()
    .setTitle('Nyam-Docs')
    .setDescription('API description')
    .setVersion('2.0.1')
    .addApiKey(
      {
        type: 'apiKey',
        name: 'x-token',
        in: 'header',
        description: 'Enter token',
      },
      'x-token',
    )
    .addApiKey(
      {
        type: 'apiKey',
        name: 'x-type',
        in: 'header',
        description: 'Enter type',
      },
      'x-type',
    )
    .build();
  const document = SwaggerModule.createDocument(app, swagger_options);
  SwaggerModule.setup('api-docs', app, document);

  await app.listen(port, '0.0.0.0');
  console.log(`Application Listening on Port : ${port}`);
}
bootstrap();

다음은 custom한 io입니다

[custom.io.adpter.ts]

import { IoAdapter } from '@nestjs/platform-socket.io';
import { INestApplication, Injectable } from '@nestjs/common';
import { ServerOptions } from 'socket.io';

@Injectable()
export class CustomIoAdapter extends IoAdapter {
    constructor(app: INestApplication) {
        super(app);
    }

    createIOServer(port: number, options?: ServerOptions): any {
        const serverOptions: ServerOptions = {
            ...options,
            cors: {
                origin: '*',  // 모든 도메인에서 접근 허용
                methods: ['GET', 'POST', 'PUT', 'DELETE'],
                credentials: true
            },
            transports: ['websocket', 'polling'], //pooling 없으면 연결 안 됨(socket)
            allowEIO3: true  // Engine.IO 3.x 버전 클라이언트 허용
        };
        return super.createIOServer(port, serverOptions);
    }
}

혹시 해결방법을 아시거나, 도움을 주실만한 정보가 있으시다면 알려주시면 정말 감사하겠습니다!