-
[포스코x코딩온] WebSocket의 기본[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 8. 28. 20:12728x90
WebSocket
WebSocket을 하기에 앞서 기본 지식을 알아두면 좋다.
2023.08.28 - [개념 정리] - TCP/IP , OSI 7계층, 소켓, 소켓 프로그래밍 정리
TCP/IP , OSI 7계층, 소켓, 소켓 프로그래밍 정리
TCP/IP TCP/IP는 컴퓨터 네트워크에서 데이터 통신을 위한 프로토콜 스택으로, 네트워크 간의 데이터 교환을 가능하게 하는 중요한 기술 데이터를 분할하여 보냄 정확한 전송을 보장하며 데이터의
dongho-kang.tistory.com
WebSocket이란?
양방햔 소통을 위한 프로토콜(약속)이다.
- HTML5 웹 표준 기술
- 빠르게 작동하며 통신할 때, 아주 적은 데이터를 이용한다.
- 이벤트를 단순히 듣고, 보내는 것만 가능하다.
- Handshake: 클라이언트가 서버로 웹소켓 연결을 요청할 때, 서버와 클라이언트 간에 초기 핸드셰이크가 이루어지며 이 과정을 통해 웹소켓을 연결한다.
- 클라이언트 측에서는 브라우저의 WebSocket 객체를 사용하여 웹소켓 연결을 생성하고 관리한다.
이벤트
- open: 웹소켓 연결이 성공적으로 열렸을 때 발생
- message: 웹소켓을 통해 데이터를 주고받을 때 발생
- error: 웹소켓 연결 중 오류가 발생했을 때 발생. 연결 실패, 통신 오류 등이 해당
- close: 웹소켓 연결이 종료되었을 때 발생
HTTP Vs WebSocket
클라이언트
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> const socket = new WebSocket("ws://localhost:8000"); //서버에 연결 socket.addEventListener("open", (event) => { console.log("서버에 연결되었습니다."); socket.send("메세지가 간다."); }); //메세지 주고 받기 socket.addEventListener("message", (event) => { console.log(event); console.log(`서버로부터 받은 메시지: ${event.data}`); }); //오류 처리 socket.addEventListener("error", (event) => { console.log(`오류가 발생하였습니다.`, event.console.error); }); //종료 socket.addEventListener("close", (event) => { console.log("서버와 연결이 종료됨"); }); </script> </body> </html>
백엔드
브라우저 환경에서는 WebSocket API를 사용하여 웹소켓 클라이언트를 만들 수 있지만, 서버를 만들려면 별도의 라이브러리나 모듈이 필요하다.
npm install wsws
Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js. Latest version: 8.13.0, last published: 6 months ago. Start using ws in your project by running `npm i ws`. There are 16092 other projects in the npm registry using
www.npmjs.com
ws 모듈 이벤트
- connection : 클라이언트가 웹소켓 서버에 연결되었을 때 발생. 이 이벤트의 콜백 함수는 새로운 클라이언트 연결마다 실행
- message 이벤트: 클라이언트로부터 메시지를 받았을 때 발생
- error 이벤트: 웹소켓 연결 중 오류가 발생했을 때 발생
- close 이벤트: 클라이언트와의 연결이 종료되었을 때 발생
const ws = require("ws"); //websocket 불러옴.. const PORT = 8000; //웹소켓 서버 접속 const wss = new ws.Server({ port: PORT }); //서버 연결 wss.on("connection", (socket) => { //socket변수: 접속한 브라우저를 의미 console.log("클라이언트가 연결되었습니다."); //클라이언트에서 메시지 수신 socket.on("message", (message) => { console.log(`클라이언트로부터 받은 메시지: ${message} `); //클라이언트로 응답 메시지 전송 socket.send(`서버에서 받은 받은 메시지: ${message}`); }); //오류 처리 socket.on("error", (error) => { console.error("오류가 발생했습니다.", error); }); //접속 종료 socket.on("close", () => { console.log("클라이언트와 연결이 종료되었습니다."); }); });
연결 결과 확인
클라이언트에서 보낸 메시지가 서버로 전달되는 것을 확인할 수 있다.
그렇다면 이렇게 웹소켓을 사용하는 이유는 뭘까?
- 실시간 통신: 웹소켓은 클라이언트와 서버 간에 지속적인 연결을 제공하여 실시간으로 데이터를 주고받을 수 있어서 이를 통해 실시간 채팅, 실시간 게임, 주식 시장과 같은 실시간 업데이트가 필요한 곳에서 사용할 수 있다.
- 낮은 지연: 웹소켓은 HTTP와 달리 연결을 유지하면서 데이터를 전송하기 때문에, 매번 새로운 연결을 만들어야 하는 HTTP와 비교하여 데이터 교환의 지연이 줄어든다. 이는 사용자 경험을 향상시키고 서버와의 효율적인 통신을 가능하게 한다.
- 서버 푸시: 웹소켓을 사용하면 서버에서 클라이언트롤 데이터를 푸시(PUSH)할 수 있다. 이는 클라이언트가 서버에 직접 요청하지 않아도 서버가 변경된 정보를 보낼 수 있다. 이를 통해 실시간 업데이트가 필요한 알림이나 알람을 구현할 수 있다.
- 효율적인 통신: HTTP 프로토콜은 매 요청마다 헤저 정보가 추가되어 오버헤드가 발생하지만, 웹소켓은 한 번의 연결로 계속해서 데이터를 주고받을 수 있어 오버헤드가 적다.
- 양방향 통신: 웹소켓은 클라이언트와 서버 간의 양방향 통신을 지원한다. 따라서 클라이언트와 서버 간에 상호작용이 필요한 기능에 유용하게 사용할 수 있다.
이러한 이유로 웹소켓을 사용할 수 있다고 한다.
그러면 다음글에서는 웹소켓을 사용하여 간단한 채팅 기능을 구현해 보겠다.
728x90'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글
[포스코x코딩온]Socket.IO 기본 개념 및 기본 실습 (0) 2023.08.29 [포스코x코딩온] 웹소켓을 활용한 간단한 채팅 기능 구현 (0) 2023.08.28 [포스코x코딩온] 2달이 지난 회고 (0) 2023.08.27 [포스코x코딩온] 복습을 통한 추가 내용(8주차) (0) 2023.08.26 [포스코x코딩온] 암호화 실습 (Crypto, Bcrypt) (0) 2023.08.19