1. 서버 만들기 nodejs 설치 서버 프로젝트 폴더 만들고 vscode로 열기 > server.js 파일 만든 뒤 세팅하기 터미널 열어서 npm init -y npm install express * 세팅 할 것 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function () { console.log('listening on 8080') }); 2. 연동 리액트 프로젝트를 별도로 만들기 리액트 프로젝트 빌드하기 npm run build 리액트 프로젝트 폴더를 서버 프로젝트 폴더에 넣기 서버 파일에 리액트 프로젝트 빌드해서 생긴 html 파일 get요청하기 /..
SSE와 WebSocket의 차이점 SSE: 서버 -> 사용자 - 일방적 통신 WebSocket: 서버 사용자 - 양방향 통신 1. socket.io 설치 npm install socket.io 2. socket.io 설정 const http = require('http').createServer(app); const { Server } = require('socket.io'); const io = new Server(http); app.listen -> http.listen으로 변경 // app.listen -> http.listen으로 변경 http.listen(process.env.PORT, function () { // listen(서버 띄울 포트번호, 띄운 후 실행할 코드) }); 여기까지 하면..
MongoDB Change Stream DB에 변동사항이 생기면 서버에 알려줌 -> 사용자에게 데이터 전송 1. Change Stream 설정 // const pipeline = [{ $match: {} }]; // 컬렉션 안의 원하는 document만 감시하고 싶으면 $match에 넣어주면 됨 const pipeline = [{ $match: { 'fullDocument.parent': 요청.params.id } }]; // 원하는 document(ex) parent: 요청.params.id)에 fullDocument. 붙여주기 const collection = db.collection('message'); const changeStream = collection.watch(pipeline); // w..
0. 채팅 데이터 전송 시 파라미터에 id담기 app.post('/message/:id', 로그인했니, function (요청, 응답) { // { 응답.write('event: test\n'); // 사용자에게 데이터 전송 - event: 보낼데이터이름\n // 응답.write('data:' + 결과 + '\n\n'); // 사용자에게 데이터 전송 - data: 보낼데이터\n\n // -> 이렇게 보내면 toArray()때문에 깨짐. 서버에서 실시간 전송시 문자자료만 전송 가능 응답.write('data: ' + JSON.stringify(결과) + '\n\n'); // JSON으로 보내기 }); }); 2. 채팅방 클릭시 만들어둔 채널로 입장 var 지금누른채팅방id; var eventsource; ..
1. 버튼 클릭 시 서버로 게시물 전송 var 지금누른채팅방id; $('.list-group-item').click(function () { 지금누른채팅방id = this.dataset.id; }); $('#send').click(function () { var 채팅내용 = $('#chat-input').val(); var 보낼거 = { parent: 지금누른채팅방id, content: 채팅내용, }; $.post('/message', 보낼거).then(() => { console.log('전송 성공'); }); }); 2. 서버에서 DB로 데이터 저장 app.post('/message', 로그인했니, function (요청, 응답) { var 저장할거 = { parent: 요청.body.parent, ..