웹 소켓으로 실시간 데이터 전송하기
WS 모듈 사용하기
필요한 것들을 아래와 같이 설치해준다.
D:\code\node\gifchat>npm i cookie-parser dotenv express express-session morgan nunjucks && npm -i D nodemon
added 82 packages, and audited 83 packages in 5s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Unknown command: "D"
To see a list of supported npm commands, run:
npm help
이번에 사용할 ws 도 추가로 설치해준다.
D:\code\node\gifchat>npm i ws
added 1 package, and audited 84 packages in 1s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
웹소켓에는 네 가지 상태가 있다. CONNECTING(연결 중), OPEN(열림), CLOSING(닫는 중), CLOSED(당힘) 이다. OPEN일 때만 에러 없이 메세지를 보낼 수 있다.
보낼 때는 ws.send 로 보내고 받을 때는 ws.on 으로 받는다.
//socket.js 파일
const WebSocket = require("ws");
module.exports = (server) => {
const wss = new WebSocket.Server({ server });
wss.on("connection", (ws, req) => {
// 웹소켓 연결 시
const ip = req.headers["x-forwarded-for"] || req.socket.remoteAddress;
console.log("새로운 클라이언트 접속", ip);
ws.on("message", (message) => {
// 클라이언트로부터 메시지
console.log(message.toString());
});
ws.on("error", (error) => {
// 에러 시
console.error(error);
});
ws.on("close", () => {
// 연결 종료 시
console.log("클라이언트 접속 해제", ip);
clearInterval(ws.interval);
});
ws.interval = setInterval(() => {
// 3초마다 클라이언트로 메시지 전송
if (ws.readyState === ws.OPEN) {
ws.send("서버에서 클라이언트로 메시지를 보냅니다.");
}
}, 3000);
});
};
서버를 실행하면 아래와 같이 서버에서 클라이언트로 메세지를 보내는 것 확인 가능
서버에서도 확인 가능
Socket.IO 모듈 사용하기
socket.io에서는 키와 값으로 보낸다.
emit(’키’,’값’)
socket.io는 http로 연결을 한다.
socket.io는 polling 과 websocket 을 둘 다 지원한다.websocket으로만 사용하도록 설정할 수도 있다.
socket.js 와 index.html을 변경하면 아래와 같이 확인이 가능하다.
//socket.js
const SocketIO = require("socket.io");
module.exports = (server) => {
const io = SocketIO(server, { path: "/socket.io" });
io.on("connection", (socket) => {
// 웹소켓 연결 시
const req = socket.request;
const ip = req.headers["x-forwarded-for"] || req.socket.remoteAddress;
console.log("새로운 클라이언트 접속!", ip, socket.id, req.ip);
socket.on("disconnect", () => {
// 연결 종료 시
console.log("클라이언트 접속 해제", ip, socket.id);
clearInterval(socket.interval);
});
socket.on("error", (error) => {
// 에러 시
console.error(error);
});
socket.on("reply", (data) => {
// 클라이언트로부터 메시지
console.log(data);
});
socket.interval = setInterval(() => {
// 3초마다 클라이언트로 메시지 전송
socket.emit("news", "Hello Socket.IO");
}, 3000);
});
};
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>GIF 채팅방</title>
</head>
<body>
<div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io.connect("http://localhost:8005", {
path: "/socket.io",
transports: ["websocket"],
});
socket.on("news", function (data) {
console.log(data);
socket.emit("reply", "Hello Node.JS");
});
</script>
</body>
</html>
실시간 채팅방 만들기
몽고디비를 사용한다. 필요한 파일들을 아래과 같이 설치한다.
D:\code\node\gifchat>npm i mongoose multer color-hash@2
added 39 packages, and audited 167 packages in 9s
몽고디비를 사용해야 하기 때문에 실행시켜준다.
PS C:\Program Files\MongoDB\Server\7.0\bin> ./mongod --ipv6
서버를 시작해서 몽고디비까지 접속이 잘 되는 것을 확인다.
D:\code\node\gifchat>npm start
> gif-chat@0.0.1 start
> nodemon app
[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node app.js`
(node:4060) [MONGODB DRIVER] Warning: useNewUrlParser is a deprecated option: useNewUrlParser has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version
(Use `node --trace-warnings ...` to show where the warning was created)
8005 번 포트에서 대기중
몽고디비 연결 성공
에러 없이 서버가 잘 실행되면 아래와 같이 2개의 웹브라우저에서 접속해본다.
서버에서도 2개의 세션이 붙은 것을 확인할 수 있다.
#c587b0 J5RByMDgnkNN_nux7zrvG6EGaEi0d-QJ
Mongoose: rooms.find({}, {})
GET / 304 27.828 ms - -
room 네임스페이스 접속 해제
GET /main.css 304 1.593 ms - -
room 네임스페이스에 접속
Mongoose: rooms.find({}, {})
GET / 304 4.459 ms - -
room 네임스페이스 접속 해제
GET /main.css 304 1.506 ms - -
room 네임스페이스에 접속
room 네임스페이스 접속 해제
chat 네임스페이스에 접속
#76862d 6t7e0goBwVLrd4Ny2Ok5g6FDYK-5Cmsj
GET /room 200 3.556 ms - 806
방을 생성하면 다른 세션에서 실시간으로 방이 생성된 것을 확인할 수 있고 방 입장도 가능하다.
입장하거나 퇴장하는 메세지도 잘 출력 되는지 확인한다.
메세지도 양쪽에서 잘 출력 되는지 확인한다.
최종적으로 gif 파일 올리기 까지 정상적으로 올라가는 것을 확인할 수 있다.
'Javascript > Node' 카테고리의 다른 글
| 노드 교과서 섹션 8 (0) | 2023.08.23 |
|---|---|
| 노드 교과서 섹션 9 (0) | 2023.08.22 |
| 노드 교과서 섹션 10 (0) | 2023.08.19 |
| 노드 교과서 섹션 12 (0) | 2023.08.17 |
| 노드 교과서 섹션 13 (0) | 2023.08.09 |
