http 방식 : 클라가 요청을 해야 서버에서 응답. 단방향통신, 연결에 지속성이 없다
웹소켓 방식 : 양방향 소통, 터널 열려있는 거 마냥 계속 열려있음.
웹소켓 쉽게 사용할 수 있는 라이브러리 : socket.io
어젠다
1. 백엔드 세팅 : 데이터베이스 세팅(정보 저장), 웹소켓 세팅
2. 프론트엔드 세팅 : 웹소켓 세팅
3. 백엔드 프론트엔드 연결 테스트
4. 유저 로그인 기능
5. 메세지 주고받기
npm init-y
npm i express mongoose cors dotenv http
express : 서버 만듬 (데이터베이스를 express위에 올려놓음)
mongoose : 우리가 사용할 데이터베이스는 몽고DB지만 이걸 더 쉽게 해주는 라이브러리
cors : 프 / 백 연결에 문제 없도록 해주는 라이브러리
dotenv : 내가 설치한 환경변수를 들고오는데 필요한 라이브러리
http : http 서버를 만들 수 있음. 그 위에 웹소켓을 올려놓을 거임
정리) express에는 DB, http에는 웹소켓 올려놓을 거
npm i socket.io
데이터베이스에 어떤 데이터 저장하고 싶어?
2가지
1. 유저정보
유저라는 정보가 어떻게 생길 예정인지 그걸 보여주는 스키마 만듬
Models폴더 > user.js파일
Schema란? 설계도, blueprint
token : 연결 id 정보
online : 유저가 온/오프라인 상태인지 확인
- 채팅 메세지 정보
Models폴더 > chat.js파일
이 2 정보를 데이터베이스에 태워서 연결해야함.
app.j 파일 만들어 express를 써서 서버를 하나 만들자.
db주소는 중요한 변수므로 따로 파일을 빼서 만든다.
.env
nodemon을 통해 뭔가 파일에 변화가 생기면 스스로 인식함.재시작할필요 없게됨
nodemon app.js하니 생겼던 오류 해결->
err = new ServerSelectionError();
아 몽고db를 처음 써봐서 다운로드를 따로 받아야 하는 오류로 보이는데 해결 시도중..
됐당. 몽고db를 설칲해야하는 오류였음.
웹소켓 세팅할 차례.
index.js에서 http를 통해서 서버를 만들고, 그 위에 웹소켓도 얹고
express로 만든 서버도 얹을거. 2개다 올릴거임.
여기까지가 백엔드 세팅.
socket.io는 서버용,
socket.io-client는 프엔용
백엔드는 정보저장하는 등 복잡하지만 프엔쪽은 신경쓸게 딱히 없음.
socket.io-client
프엔쪽에서 npm i 후 npm start해서 띄운 다음 리프레쉬하면 백엔쪽 터미널에서 socket 연결 id가 나옴
npm ERR
-> 해결:
The most common cause of the error is using the npm install command without having your terminal open in the root directory of your project (where your package.json file is).
package.json 이 있는 곳에서 npm i와 npm start를 해야한다.
메세지 받는 input field
메시지 보여줄 메세지창
프엔쪽 vscode에서 server.js 만들고 다음과 같이 만들어줌
import { io } from "socket.io-client"
const socket = io("http://localhost:5001")
export default socket;App.js에서 import socket from './server'해주면 프엔 웹소켓 세팅 끝
코알누 클론중
깃클론한걸 내 레포에다 넣으려는데 허락이 필요하다는 에러문구.
remote 경로 재설정
git remote set-url origin 깃주소
다시 remote origin 경로를 재설정하는 명령문이다.
