서버랑 클라이언트가 데이터를 주고받으려면
http 요청을 통해 주고 받는다.
필요한 데이터가 있으면 그때 그때 클라이언트에서 요청을 해서 서버에서 데이터를 내려주고 그것을 클라이언트에서 활용하는 것이다.
하지만 요즘 웹사이트는 실시간 채팅이나, 주식거래, 또는 코인거래 등의 실시간 자료를 내려받는 등등 매우 복잡해졌다.
그렇다고 실시간으로 자료를 내려받기위해 그때마다 서버에 요청을 하게 되면 뭔가 비효율적일것 같지 않을까?
하지만 전통(?)적인 방법의 http 통신 방법으로는 구현이 불가능 하기 때문에 아래 두가지 방법을 통해 해결해야 한다.
- Server-Sent Event
- WebSocket
지금은 Websocket에 대해 알아 보자
Websocket 을 사용하게 되면 TCP연결 기반으로 서버 유저간 양방향 통신이 가능해진다. 비유를 하자면 원할때마다 양쪽에서 누구나 이야기 할 수 있는 전화와 같다고 볼 수 있다.
- http 요청을 보낸다 (우리 Websocket 통신 하자)
- 서버가 요청을 받고 http 요청을 Websocket으로 업그래이드 해준다.
예제를 만들어보자
우선 node.js가 깔려있어야 한다.
패키지 폴더를 만들고 socket.js 파일을 만든다.
터미널을 열고 yarn init 을 입력한다.
나는 패키지 매니저로 yarn을 쓰기 때문에 yarn init 이라 입력했다. npm 을 쓴다면 npm init 이라 입력하면 된다. 입력을 하고 엔터를 계속 치면 Done 메세지가 나온다.
그리고 server.js 에 다음과 같이 코드를 작성하자
// server.js
const express = require('express')
const app = express();
app.use("/", function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.listen(8080);index.html 파일도 만들어서 다음과 같이 작성한다.
// index.html
<!DOCTYPE html>
<html>
<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>
<h4>채팅페이지 입니다.</h4>
<button id="send">메세지 보내기</button>
</body>
</html>그리고 터미널에 node server.js 라고 쳐서 페이지를 실행시켜서 미리보기를 띄운다. (이유는 모르겠는데 bash 로 실행이 안되서 powershell로 터미널을 바꿔 실행했더니 잘 실행됐다.)
server.js 로 다시 돌아가서 코드를 추가한다.
// server.js
const express = require('express')
const app = express();
app.use("/", function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.listen(8080);
// 추가한 코드
const WebSocket = require('ws')
const socket = new WebSocket.Server({
port: 8081 // 유저가 요청하면 이 경로로 웹소켓 연결해 줌
});웹소켓 열기가 끝났다.
index.html 에서 자바스크립트 코드를 추가해주자
// index.html
<!DOCTYPE html>
<html>
<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>
<h4>채팅페이지 입니다.</h4>
<button id="send">메세지 보내기</button>
// 추가한 코드
<script>
// 웹소켓 열어달라고 서버에게 부탁하는 코드
let socket = new WebSocket("ws://localhost:8081")
</script>
</body>
</html>일반적인 http 요청을 하려면 http://~~ 이런식으로 요청을 하는데 WebSocket 으로 통신을 하려면 ws://~~ wss://~~ 이런식으로 작성을 한다.
// index.html
...
<body>
<h4>채팅페이지 입니다.</h4>
<button id="send">메세지 보내기</button>
<script>
// 웹소켓 열어달라고 서버에게 부탁하는 코드
let socket = new WebSocket("ws://localhost:8081")
</script>
</body>
</html>버튼을 클릭을 하면 메세지를 서버로 보내고 싶어졌다.
onclick 에 위와 같이 코드를 작성해줬다.
// server.js
...
const socket = new WebSocket.Server({
port: 8081 // 유저가 요청하면 이 경로로 웹소켓 연결해 줌
});
socket.on('connection', (ws, req) => {
ws.on('message', (msg) => {
console.log('유저가 보낸거 : ' + msg)
ws.send('그래 안녕!') //서버가 유저에게 보내는 msg
})
});
이렇게 양방향으로 소통하는 WebSocket을 사용할 수 있다.
하지만 ws 보다는 socket.io 라이브러리를 사용하면
- 연결 끊기면 자동 재접속 기능
- 웹소켓 접속자마다 자동 id 부여
- 모든 웹소켓 유저에게 전체 메세지 전송 가능
- 웹소켓방 생성 가능
등등을 이용할 수 있어서 훨씬 더 쉽게 WebSocket 기반 서비스를 만들 수 있다.
다음에는 Socket.io 관련 내용을 정리해 봐야겠다.
