노드 교과서 섹션 11

studyhard24 2023. 8. 18. 05:48

2023. 8. 18. 05:48

웹 소켓으로 실시간 데이터 전송하기

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>

</head>

<body>

<div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>

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

studyhard24