[Node.js] socket.io로 채팅만들기(1)
파일트리
전체적인 코드
websocket
원리
웹소켓통신은 보통의 http통신이 한번의 요청에 한번의 응답만 하는 것과는 다르게 요청 없이도 응답을 여러번 줄 수 있게 하고, 응답이 없어도 요청을 여러번 할 수 있게 하는 통신이다.
보통 채팅에 많이 이용된다.
그러면 홈페이지도 websocket으로 하면 안돼냐고 물어볼텐데, 생각보다 번거롭다. 그렇기에 남들에게 보여주고 싶을 때만 웹소켓을 쓴다.
작동
기본적으로 websocket도 처음엔 HTTP통신을 해야한다. 101 포트를 통해 통신을 한다. 웹소켓은 한번의 통신을 통해 서로의 secret-key로 서로 인증한다. 이를 통해 socket을 사용할 수 있는 환경을 만들어 놓는다.
코드
server.js
//server.js
const express = require('express');
const app = express();
const nunjucks = require('nunjucks');
app.set('view engine','html');
nunjucks.configure('views',{
express:app,
})
// socket설치
const socket = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = socket(server);
//socket 경로 설정
app.use(express.static('./node_modules/socket.io/client-dist'))
app.get('/',(req,res)=>{
res.render('index.html');
})
//한번의 HTTP통신함
io.sockets.on('connection',(socket)=>{
//한번의 HTTP통신함(내용무)
socket.on('send',(data)=>{
socket.broadcast.emit('call',data.msg);
})
//데이터를 받을 때, 자신 빼고 메세지를 보낸다.(socket.broadcast)
})
server.listen(3000,()=>{
console.log('server3000');
})
코드설명
const socket = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = socket(server);```
바로 socket을 사용하기 위한 기본 세팅을 하는 작업이다.
npm i socket.io를 터미널창에 입력해주자.
http는 굳이 설치해줄 이유가 없다.
```javascript
socket.on('send',(data)=>{
socket.broadcast.emit('call',data.msg);
})socket.on>>소켓에서 데이터를 받는다. 그 후의 'send'는 html의 socket.emit태그와 짝을 맞춘다.
socket.broadcast>>자신 빼고 통신함
그렇기에 socket.broadcast.emit 은 자신빼고 데이터를 보내라는 것이다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello! socket!!<br>
<input type="text" id = "msg">
<input type = "button" id = "btn">
<div id = "content"></div>
<script type = "text/javascript" src = "./socket.io.js"></script> "
<script type = "text/javascript">
let socket = io('http://localhost:3000');
socket.on('connect',()=>{
const msg = document.querySelector('#msg');
msg.value = "접속완료 되었습니다."
})
const btn = document.querySelector('#btn');
btn.addEventListener('click',()=>{
const msg = document.querySelector('#msg');
socket.emit('send',{msg:msg.value});
const content = document.querySelector('#content');
content.innerHTML += `내가 쓴 글 ${msg.value}<br>`;
})
socket.on('call',(data)=>{
const contnet = document.querySelector('#content');
content.innerHTML += `남이 쓴 글 ${data}<br>`;
})
</script>
</body>
</html>
코딩 재밌어요!