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

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

 

 

구현 결과

• 메인 화면 및 로그인 , 회원 가입 기능 구현

 

프로젝트 개발 ( Front )

React App(Front) 에 Router를 적용하는 작업 수행

 

- React Router 설치 

    npm i react-router-dom@5.3.0

 

- App.js 파일 수정

import React from 'react';
import io from "socket.io-client"; 
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Login from "./routes/Login"

function App() {
  return <Router>
    <Switch>
      <Route path="/" component={Login}/>    
    </Switch>
  </Router>;
}

export default App;

• react router 적용 : routes 디렉토리 하위에 생성할 Login.js를 임포트 한 다음 router 적용

 

- routes 디렉토리 생성 및 Login.js 생성

import React from 'react';
import { useState } from "react";
import image from "../image/sample_1.jpg";
import "../css/Login.css";
import io from "socket.io-client";
const socket = io("http://localhost:3001/");  //3001 Back단 서버포트

function Login({history}) {
    socket.on('checkLogin', (user) => { //서버에게 로그인 정보를 확인하고 정보가 일치하면 페이지 이동
        history.push({
          pathname : '/roomList/' + user,
          user_id : user
        })
    })

    const [id, setId] = useState("");
    const [password, setPass] = useState("");

    const onChangeID = (event) => setId(event.target.value);
    const onChangePass = (event) => setPass(event.target.value);

    const doSubmit = (event) => {
        event.preventDefault();
        if (id === '' || password === '' || id === undefined || password === undefined) {
            alert("아이디 또는 패스워드를 입력해주세요")
        } else {
            socket.emit('login', id, password); // Id, Password 일치여부 확인 요청
        }
    }

    const doJoin = (event) => {
        event.preventDefault();
        if (id === '' || password === '' || id === undefined || password === undefined) {
            alert("아이디 또는 패스워드를 입력해주세요")
        } else {
            socket.emit('join', id, password); // 가입 요청      
        }
    }

    return <div>
        <div id="main">
            <img src={image} id="title"></img><br />
            <form onSubmit={doSubmit} className="loginForm">
                <div className="loginDiv">
                    <input onChange={onChangeID} type="text" value={id} id="userId" placeholder="ID" /><br />
                    <input onChange={onChangePass} type="password" value={password} id="userPassword" placeholder="PASSWORD" />
                </div>
                <div className="loginDiv">
                    <button onClick={doSubmit} id="doLogin">login</button>
                </div>
            </form>
            <form className="joinBtn">
                <button id="doJoin" onClick={doJoin} >join</button>
            </form>
        </div>
    </div>
}

export default Login;

- 서버에 socket.emit ( 요청 전달 ) : login, join

- 서버로부터 socket.on ( 결과 수신 ) : checkLogin

- 서버로부터 결과 수신을 정상적으로 받은 경우 채팅방 목록 페이지로 이동 ( history push )

 

프로젝트 개발 ( Back )

- App.js 파일에 추가

  요청을 받을 socket 생성 (login, join)

    socket.on('join', (user, password) => {
        esService.addDocument("chat_user", password + Math.floor(Math.random() * (10000000)), {
            "user_id": user,
            "user_pass": password,
            "profile": null
        });
    });
    
    socket.on('login', (user, password) => {
        console.log(user + " : " + password)
        //user, password 에 일치하는 정보가 있는지 확인
        let dologin = esService.search("chat_user", {
            "query": {
                "query_string": {
                    "query": "user_id : " + user + " AND user_pass : " + password
                }
            }
        });

        dologin.then(function (result) {
            console.log(result);

            let userData = result.hits;
            socket.user = user;
            
            if (userData.total.value >= 1) {
                socket.emit('checkLogin', user);
            } else {
                console.log("로그인 실패")
            }
        })
    });

 

프로젝트 실행 및 테스트

 

npm start 실행시 나타나는 화면

로그인 실패 및 성공시의 서버 터미널에서 로그 확인

 

 

다음 구현 목표

• 채팅방 하나를 임시로 만들고 두 사용자 간의 채팅 구현