오늘 저는 배우고 있습니다-Nestjs & Socket.io

이 시간 동안 저는 socket.io를 사용하여 nestjs가 서버로 작동하여 클라이언트 측에 대한 응답을 수신하고 다시 보낼 수 있도록 했습니다.

이를 달성하기 위해 동일한 루트 디렉토리에 nestjs와 반응 앱을 설치했습니다.

테스트 목적의 일환으로 아래와 같이 간단한 실시간 채팅 앱을 만들었습니다.

1. reactjs, nestjs에 대해 .on 및 .off(연결, 연결 해제)를 설정합니다.

2. cors: true가 설정되어 있는지 확인하십시오. 그렇지 않으면 실시간으로 많은 오류가 표시됩니다.

3. 포트 번호는 동일해야 합니다. 또는 서버 측이 클라이언트 측의 말을 듣지 않습니다.

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

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

  handleConnection(socket: Socket) {
    console.log('Client connected:', socket.id);
  }

  handleDisconnect(socket: Socket) {
    console.log('Client disconnected:', socket.id);
  }

  @SubscribeMessage('message')
  handleMessage(socket: Socket, message: string) {
    console.log('Received message:', message);
    this.server.emit('message', message);
  }


}

// React.js
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import styled from 'styled-components';
import Skeleton from './Skeleton';
// import { useRef } from 'react';
// import SidebarWhole from './Sidebar';
const Chat = () => {
  const (messages, setMessages) = useState(());
  const (input, setInput) = useState('');
  const socket = io('http://localhost:3001', {
    pingTimeout: 60000,
  });

  // Skeleton
  // https://stackoverflow.com/questions/69008820/websocket-connection-error-insufficient-resources

  // const chatBodyRef = useRef(null);


  useEffect(() => {
    // Subscribe to "message" event
    socket.on('message', handleMessage);

    // Unsubscribe from "message" event when component unmounts
    return () => {
      socket.off('message', handleMessage);
      // socket.disconnect('message', handleMessage);
    };
  }, ());

  const handleMessage = (message) => {
    setMessages((messages) => (...messages, message));
  };

  const sendMessage = (event) => {
    event.preventDefault();
    socket.emit('message', input);
    setInput('');
  };

  return (
    // <SidebarWhole>
    <ChatWrapper>
    <Sidebar>
      <SidebarHeader>Telegram</SidebarHeader>
      <SidebarItem active>Chats</SidebarItem>
      <SidebarItem>Contacts</SidebarItem>
      <SidebarItem>Settings</SidebarItem>
    </Sidebar>
    <ChatContainer>
      <ChatHeader>
        <div>Telegram Chat</div>
        <div>Online</div>
      </ChatHeader>
      <ChatBody>
        {messages.map((message, index) => (
          <ChatMessage key={index}>
            {message}
          </ChatMessage>
        ))}
      </ChatBody>
      <ChatInputArea onSubmit={sendMessage}>
        <ChatInput
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
        />
        <ChatButton>Send</ChatButton>
      </ChatInputArea>
    </ChatContainer>
  </ChatWrapper>
  // </SidebarWhole>
);
};

export default Chat;