728x90
Web Socket 채팅방 만들기_2
2023.01.09 - [JavaScript] - Web Socket 채팅방 만들기_1
socket.io 이용
socket.io에서 제공하는 method 활용해
프로젝트에서 원하는 기능 만들 수 있음.
ws이랑의 차이점 비교해서 공부.
📌 install Library
npm i socket.io
📄 socket.js
const { emit } = require('nodemon');
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('disconnet',() => {
console.log('클라이언트 접속 해제', ip);
clearInterval(socket.interval); // 연결 끊기면 3초마다 보내는것도 끓어줘야 메모리 문제 안생김.
})
socket.on('reply', (data) => {
console.log(data);
})
socket.on('error', console.error);
socket.interval = setInterval(() => {
// send -> onmessage
// emit('키', '값')
// on('키', (값) => {})
socket.emit('news', 'Hello Socket.IO');
}, 3000);
});
};
📄 index.html
<!DOCTYPE html>
<html lang="en">
<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', (data) => {
console.log(data);
socket.emit('reply', 'Hello Node.JS');
})
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| Web Socket 채팅방 만들기_4 (0) | 2023.01.12 |
|---|---|
| Web Socket 채팅방 만들기_3 (0) | 2023.01.10 |
| Web Socket 채팅방 만들기_1 (0) | 2023.01.09 |
| 회원가입 데이터 정규식 unit Test (0) | 2023.01.06 |
| EJS공부 & 팀원 코드 이해하기2 (0) | 2023.01.06 |
