728x90
Web Socket 채팅방 만들기_1
WS 이용
📌 package.json
npm init -y
📌 package.json
{
...
"version": "0.0.1",
"description": "GIF 웹소켓 채팅방",
"main": "app.js",
"scripts": {
"start": "nodemon start",
},
}
📌 .env
COOKIE_SECRET = gitchat
📌 install Library
npm i cookie-parser dotenv express express-session morgan nunjucks && npm i -D nodemon
npm i ws📄 app.js
const webSocket = require("./socket");
const server = app.listen(app.get('port'), () => {
console.log(app.get('port'), '빈 포트에서 대기 중');
});
webSocket(server);
📄 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) => {
// 메세지는 buffer라 우리가 읽을 수 있도록 string타입으로 전환
console.log(message.toString());
})
ws.on('error', console.error);
ws.on('close', () => {
console.log('클라이언트 접속 해제', ip);
clearInterval(ws.interval); // 연결 끊기면 3초마다 보내는것도 끓어줘야 메모리 문제 안생김.
})
ws.interval = setInterval(() => {
if (ws.readyState === ws.OPEN) {
ws.send('서버에서 클라이언트로 메세지를 보냅니다.'); // 3초마다 메세지 보냄
}
}, 3000);
});
};
📄 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GIF 채팅방</title>
</head>
<body>
<div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>
<script>
const webSocket = new WebSocket("ws://localhost:8005");
webSocket.onopen = function() {
console.log('서버와 웹 소켓 연결 성공');
}
webSocket.onmessage = function(event) {
console.log(event.data);
webSocket.send('클라이언트에서 서버로 답장을 보냅니다.');
}
</script>
</body>
</html>
3초마다 숫자가 올라감.
WS 라이브러리는 정말 간단한 기능 구현할 때 사용하는 것!
Socket.io 라이브러리는 복잡한 기능 구현할 때 사용하는 것!
'JavaScript' 카테고리의 다른 글
| Web Socket 채팅방 만들기_3 (0) | 2023.01.10 |
|---|---|
| Web Socket 채팅방 만들기_2 (0) | 2023.01.10 |
| 회원가입 데이터 정규식 unit Test (0) | 2023.01.06 |
| EJS공부 & 팀원 코드 이해하기2 (0) | 2023.01.06 |
| EJS공부 & 팀원 코드 이해하기1 (0) | 2023.01.06 |
