묻고 답해요

socket io 미 연결 문제 (nest & flutter)

해결됨

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

안녕하세요! 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); } } 혹시 해결방법을 아시거나, 도움을 주실만한 정보가 있으시다면 알려주시면 정말 감사하겠습니다!

• node.js
• express
• nestjs
• typeorm
• flutter
• socket
• socketio

NextJS와 NestJS 소켓IO 연결

해결됨

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

안녕하세요 제로초님! 강의 잘 듣고 있습니다. 제가 현재 프론트엔드를 NextJS 14.xx(app router)로 작성하고 있고, 백엔드는 제로초님 강의 따라서 NestJS로 만들고 있는데 현재 연결은 로컬에서 HTTP로 하고 있습니다. 그런데 소켓을 연결하는 과정에서 계속 'WebSocket connection to 'ws://localhost:8080/socket.io/?EIO=4&transport=websocket' failed: WebSocket is closed before the connection is established.' 위와 같은 에러가 뜹니다. 이틀간 계속 검색해봤는데 도대체 왜 연결이 안되는지 모르겠습니다... ㅠㅠ 프론트는 현재 아래와 같이 되어있구요. localhost:3000 으로 돌리고 있습니다. " socket.io -client": "^4.7.4", import io from 'socket.io-client'; useEffect(() => { const options = { auth: `${getCookie('accessToken')}`, extraHeaders: { id: chatRoomId }, }; const socket = io(`http://localhost:8080/chats`, options); console.log(socket); socket.on('connect', () => { console.log('WebSocket connected.'); }); return () => { socket.off(); }; }, []); 백엔드는 아래와 같이 되어있습니다. import { Socket } from 'socket.io'; import { ConnectedSocket, MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, } from '@nestjs/websockets'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import { Message } from './entity/message.entity'; import { Logger } from '@nestjs/common'; @WebSocketGateway({ namespace: 'chats', cors: true, }) export class ChatsGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect { private logger = new Logger('CHAT-SERVICE'); constructor( @InjectRepository(Message) private readonly messageRepository: Repository<Message>, ) { this.logger.log('constructor'); } afterInit() { this.logger.log('init'); } async handleConnection(@ConnectedSocket() socket: Socket) { this.logger.log(`connected: ${socket.id} ${socket.nsp.name}`); } async handleDisconnect(@ConnectedSocket() socket: Socket) { this.logger.log(`disconnected: ${socket.id} ${socket.nsp.name}`); } @SubscribeMessage('send-message') async handleSubmitChat( @MessageBody() message: string, @ConnectedSocket() socket: Socket, ) {} } chat-service의 main.ts는 아래와 같습니다. import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); const port = 8080; await app.listen(port); console.log(`CHAT-SERVICE listening on ${port}!`); } bootstrap(); app.module.ts는 아래와 같습니다. import { Module } from '@nestjs/common'; import { ChatModule } from './chat/chat.module'; import { ConfigModule, ConfigService } from '@nestjs/config'; import { TypeOrmModule, TypeOrmModuleOptions } from '@nestjs/typeorm'; import jwtConfig from './config/jwt.config'; import mysqlConfig from './config/mysql.config'; import sentryConfig from './config/sentry.config'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, load: [jwtConfig, mysqlConfig, sentryConfig], }), TypeOrmModule.forRootAsync({ inject: [ConfigService], useFactory: async (configService: ConfigService) => { let object: TypeOrmModuleOptions = { type: 'mysql', host: configService.get('mysql.host'), port: configService.get('mysql.port'), database: configService.get('mysql.database'), username: configService.get('mysql.username'), password: configService.get('mysql.password'), autoLoadEntities: true, synchronize: true, }; if (configService.get('STAGE') === 'LOCAL') { object = Object.assign(object, { logging: true, }); } return object; }, }), ChatModule, ], controllers: [], providers: [], }) export class AppModule {} 소켓 객체는 프론트에서 찍어보면 다음과 같이 나옵니다. @WebSocketGateway({ namespace: 'chats', cors: true, }) 에서 cors를 http://localhost:3000으로 설정하고 main에서도 다 열었을때도 안되는걸로 보아 cors 문제는 아닌듯합니다.

• nestjs
• nextjs
• socketio

[Python] socketio 사용하여 영상스트리밍 시 추가 명령이 가능한지?

미해결

안녕하세요. 현재 파이썬 socketio 를 사용하여 서버-클라이언트를 구성하였는데요 클라이언트에서 카메라의 url 을 보내면 서버에서 카메라의 url 을 받아서 영상을 스트리밍하게 됩니다. 헌데 서버에서 영상을 스트리밍하게되면 서버가 계속 영상정보를 실행시켜서 추가적으로 클라이언트에서 정보를 전달을 못합니다.. (클라이언트에서 정보 보내면 socketio connection error 가 뜹니다) 혹시 이 사안에 대해서 추가적으로 정보를 보낼수 잇는 방법 아시는분이 계실까요? (궁극적으로 카메라가 켜졋다가 끄는 작업이 완료되어야하는데 켜지는건 되는데 끄는게 안됩니다ㅠ) 알려주시면 감사하겟습니다!!

• python
• socketio
• opencv
• streaming