Node.js
웹소켓(WebSocket) 1장 - ws 라이브러리
blackbearwow
2023. 6. 3. 20:43
1. 웹 소켓이란?
위키백과에 의하면 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이라고 한다. 처음에는 이게 무슨 말인가? 이해하기 쉽지 않다. tcp통신은 4계층에서 일어나는 통신이고 http는 7계층에서 일어나는 통신이니까. 완벽히 이해되지는 않지만, webSocket은 7계층 통신이며, tcp에 의존적이라는 것이다. (http도 7계층 통신이며 tcp에 의존적이라는 것에서 공통점이다).
나중에 위키백과를 정독하면 더욱 원리를 알게 될 것이다.
위키백과 링크:
2. nodejs에서의 webSocket
이번엔 nodejs에서 웹 소켓을 어떻게 사용하는지 알아보자.
ws이라는 외부 라이브러리가 있다.
일단 express, ejs, ws라이브러리를 설치한다.
npm install express ejs ws코딩애플님의 코드를 따라해 간단한 예제를 만들어보자.
const express = require('express');
const app = express();
const webSocket = require('ws');
const port = 8888;
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.listen(port, function(){
console.log(`listening on ${port}`);
});
app.get('/', function(req, res){
const title = "이게 타이틀 입니다.";
res.render('client', {title, count:5});
})
const wss = new webSocket.Server({
port: 8081
})
wss.on('connection', (ws, req) => {
ws.on('message', (msg)=>{
console.log(`from client: ${msg}`);
})
})-server.js-
<!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><%= title %></title>
<script>
let socket = new WebSocket("ws://127.0.0.1:8081");
</script>
</head>
<body>
<div>
<button onclick='socket.send("gdgd")'>버튼입니다</button>
</div>
</body>
</html>-client.ejs-
해당 코드를 실행하면, 클라이언트에서 버튼을 클릭할 때마다 서버에 전달되는 것을 볼 수 있다.
