[Web] 웹소켓이란?

728x90

서버와 유저가 데이터를 주고받으려면? → HTTP 요청

HTTP 요청을 쉽게 비유하자면 문자메세지와 비슷합니다.

우리가 서버에게 데이터를 달라고 요청을 하면, 서버는 답장으로 데이터를 보냅니다.

그런데 고유한특성이 있습니다. 서버가 먼저 연락하는 경우는 없습니다. 유저가 먼저 문자를 보내야 답변을 해줍니다.

예전에는 HTTP요청만으로 모든 웹서비스를 만들었으나,

허나 요즘 웹서비스는 실시간으로 채팅도하고 실시간 주식 거래도 합니다.

예를들어 2초마다 서버에 있던 코인가격 가져오려면 2초마다 서버에 HTTP 요청을 하면 되겠죠.

하지만 생각해보면 이 방식 비효율적입니다. 굳이 유저가 2초마다 서버에 요청을 보내야할까요?

서버가 알아서 2초마다 가격을 보내주면 얼마나 효율적일까요?

이 문제에 대한 해결책은 두가지 입니다.

1. Server-Sent Event

2. WebSocket

Server-Sent Event

HTTP통신을 종료하지 않고 계속 유지할수있는 방법입니다

서버가 일방적으로 데이터를 유저에게 메세지를 보내줍니다.

단점은 지속적인 데이터 수신만 가능합니다. (비유하자면 라디오같은...)

WebSocket

웹소켓을 쓰면 양방향 통신이 가능합니다. (비유하자면 전화같은...)

웹소켓 연결하는 방법은 이러합니다

유저가 서버에 HTTP요청을 일단 보냅니다. 서버가 이것을 허락을 하면, 웹소켓으로 업그레이드 해줍니다.

+ TCP/IP소켓과 웹소켓의 차이

일단 소켓과 웹소켓은 IP와 포트를 통한 통신을 한다는 점에서는 비슷하다.
또, 둘 다 양방향 통신을 한다는 비슷한 특징을 갖고 있기도 하다.
차이점은 웹 소켓은 HTTP 레이어에서 작동하는 소켓으로
TCP/IP 소켓의 레이어가 다르다!그러니 두 개념은 엄연히 다르다. 같다고 혼동하지 않아야한다.

참고 출처 : https://velog.io/@rhdmstj17/%EC%86%8C%EC%BC%93%EA%B3%BC-%EC%9B%B9%EC%86%8C%EC%BC%93-%ED%95%9C-%EB%B2%88%EC%97%90-%EC%A0%95%EB%A6%AC-2
소켓 포스팅 : https://rebornbb.tistory.com/entry/%EC%86%8C%EC%BC%93-%EC%A0%95%EB%A6%AC

웹소켓 여는 예시 (node.js)

node.js 설치 방법 : https://rebornbb.tistory.com/entry/JS-VSCODE%EC%97%90%EC%84%9C-JavaScript-%EC%8B%A4%ED%96%89-%EA%B2%B0%EA%B3%BC-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0

1. node.js 설치

2. 터미널 오픈해서 npm init 입력 + 엔터엔터엔터...

3. 라이브러리 설치하기

npm install express ws 입력

- express 서버만들어주는 라이브러리

- ws 웹소켓 연결을 뚫어주는 라이브러리

4. 웹서버 만드는 코드 복붙

const express = require('express');
const app = express();

app.use("/", function(req, res){
    res.sendFile(__dirname + '/index.html');
});

app.listen(8080);

5. 유저가 접속할수있는 html 파일 생성 + 터미널에 node 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>Document</title>
</head>
<body>

    <h4>채팅페이지입니다</h4>
    
    <button id="send"> 메세지 보내기 </button>
    
</body>
</html>

6. 웹소켓 열기 코드 작성

//웹소켓 열기 
const socket = new WebSocket.Server({
    port: 8081
});

7. 유저가 웹소켓 연결하고 싶다고 요청하는 법

<!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>

    <h4>채팅페이지입니다</h4>
    
    <script>

        let socket = new WebSocket ("ws://localhost:8081");
        //이 경로로 웹소켓 열어달라고 서버에게 부탁하는 코드
        //웹소켓 통신은 ws://~~ wss://~~ 으로 시작

    </script>

</body>
</html>

이렇게만 작성해도 웹소켓 연결 완료

8. 서버에게 메세지를 간략하게 보내고싶다면

<!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>

    <h4>채팅페이지입니다</h4>
    
    <button id="send" onclick="socket.send('ㅎㅇ')"> 메세지 보내기 </button>
    <!-- 웹소켓으로 유저→서버 메세지 보내려면 onclick="socket.send()" -->

    <script>

        let socket = new WebSocket ("ws://localhost:8081");
        //이 경로로 웹소켓 열어달라고 서버에게 부탁하는 코드
        //웹소켓 통신은 ws://~~ wss://~~ 으로 시작

    </script>

</body>
</html>

9. 서버는 유저가 보낸 메세지를 수신하고싶다면

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
});

//웹소켓으로 오는 유저 메세지 받으려면 .on
socket.on('connection', (ws, req)=>{   
    ws.on('message', (msg)=>{
        console.log('유저가 보낸거 : ' + msg);
        ws.send('ㅇㅇ');
    })
});

ws 대신 socket.io 라이브러리를 쓰면 훨씬 더 쉽게 웹소켓 기반 기능을 개발할 수 있습니다.

연결 끊기면 자동 재접속 기능
웹소켓 접속자마다 자동 id 부여
모든 웹소켓 유저에게 전체 메세지 전송가능
웹소켓방을 생성가능

출처 : 코딩애플 https://www.youtube.com/watch?v=yXPCg5eupGM

WebSocket 이벤트

이벤트란 addEventListner() 혹은 on이벤트이름을 활용하여 서버로부터 들어오는 이벤트에 따라 특정한 작동을 하도록 하는 것을 의미한다.

// WebSocket 연결 생성
const socket = new WebSocket('ws://localhost:8080');

// 연결이 열리면
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 메시지 수신
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

소켓이 정상적으로 만들어지면 아래 네 개의 이벤트를 사용할 수 있게 됩니다.

open : 웹소켓이 열릴 때 발생하는 이벤트입니다. 이 이벤트가 발생하면 서버와 클라이언트 간의 연결이 설정되었음을 알리는 신호가 됩니다.
message : 클라이언트가 서버로부터 메시지를 수신할 때 발생하는 이벤트입니다. 이 이벤트가 발생하면 클라이언트는 서버로부터 받은 메시지를 처리하게 됩니다.
close : 웹소켓이 닫힐 때 발생하는 이벤트입니다. 이 이벤트가 발생하면 서버와 클라이언트 간의 연결이 끊어졌음을 알리는 신호가 됩니다.
error : 웹소켓이 오류를 발생시킬 때 발생하는 이벤트입니다. 이 이벤트가 발생하면 오류 처리를 위한 코드가 실행되게 됩니다.

728x90

'STUDY > WEB' 카테고리의 다른 글

[Tomcat] 톰캣 캐시 부족 현상 해결방법 (0)	2023.03.13
[Web] 쿠키(Cookie)와 세션(Session)이란? (0)	2023.03.02
[Web] TCP / IP 란? (0)	2023.02.28
[Web] 웹서비스(Web Service)란? (0)	2023.02.28
[Tomcat] 백그라운드 캐시 퇴거 (0)	2023.02.09

Server-Sent Event

WebSocket

웹소켓 여는 예시 (node.js)

WebSocket 이벤트

'STUDY > WEB' 카테고리의 다른 글

티스토리툴바