Project - Socket과 ElasticSearch 를 활용한 채팅 사이트 개발일지 [2]

 

Project - Socket과 ElasticSearch 를 활용한 채팅 사이트 개발일지 [1]

 

구현 결과

• 메인 화면 및 로그인 , 회원 가입 기능 구현
• 채팅방 하나를 임시로 만들고 두 사용자 간의 채팅 구현 (우선 Node로 구현 예정)
• React 프로젝트와 Node 프로젝트 연동

 

기존의 Node 프로젝트 하나에 Back단과 Front단이 모두 하나의 프로젝트에 있었지만 이번 프로젝트에서 React 프로젝트를 생성하면서, Back단과 Front단을 분리했다. 

 

프로젝트 개발 

- React 프로젝트 생성 및 NPM 설치 ( Front ) 

• npx create-react-app eschat-react-project(프로젝트명)
• npm install socket.io
• npm install socket.io-client

 

- 기존 Node 프로젝트 NPM 추가 설치 ( Back )

•  npm install cors

 

기존 Node 프로젝트 수정 ( Back )

app.js 상단에 아래 내용 추가 및 포트 변경

app.use(cors());
const io = socket(server, {
    cors: {
        origin : "http://localhost:3000",
        credentials : true
    }
});

.
.
.

server.listen(3001, () => {
    console.log('Connected at 3001');
});

* cors.origin 부분에 입력된 url은 Front 에서 오픈한 ip:포트 ( 특정 url 만 허용했음 )

 

 

 React 프로젝트 생성 ( Front )

처음에 프로젝트를 생성하면 나오는 파일들 중에서 src 하위의 파일들은 App.js, index.js 를 제외하고 모두 지움.

 

- App.js 파일 아래와 같이 수정

import './App.css';
import React from 'react';
import io from "socket.io-client"; 

const socket = io("http://localhost:3001/");  //3001 Back단 서버포트

function App() {

  console.log("start");
  socket.emit('check'); // check 요청
  socket.emit('checkEsConn'); 

  return (
    <div>Test Title</div>
  );
}

export default App;

 

 

- index.js 파일 아래와 같이 수정

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <App />
);

 

프로젝트 실행 및 테스트

- Back 프로젝트의 터미널에서 node app.js 실행 ( Port : 3001 )

- Front 프로젝트의 터미널에서 npm start 실행 ( Port : 3000 )

Front 의 App.js에서 출력한 console.log와 요청한 socket.emit 결과가 모두 나온것을 확인했다.

 

 

다음 구현 목표

• 메인 화면 및 로그인 , 회원 가입 기능 구현
• 채팅방 하나를 임시로 만들고 두 사용자 간의 채팅 구현 

 

 

 

참고 링크

[react] socket.io 로 채팅 만들기

 

[node] CORS란? CORS 문제 해결하기