이 코드는
https://www.youtube.com/watch?v=yXPCg5eupGM
이 강의를 참고하여 작성되었습니다.
차후 채팅서비스 구현 시 참조 사이트
https://cocoder16.tistory.com/62
90년대까지는 HTTP 요청만으로 모든 웹 서비스를 만들 수 있었다.
하지만 요즘의 웹 서비스는 꽤나 복잡하다.
그 중 하나가 웹소켓이다.
기존의 HTTP 통신은 서버가 먼저 클라이언트에게 전송을 할 수가 없었다. 일방적인 관계였던 거다.
하지만 그러기엔 복잡한 웹 서비스를 구현할 수 없었기 때문에 다른 통신들이 생겨났다.
HTTP 통신의 단점을 보완한 예시로 대표적인 2가지를 꼽을 수가 있다.
1. Server-Sent Event
> HTTP 통신을 끊기지 않고 유지할 수 있음
2. WebSocket
> 양방향 통신 가능
> 마치 전화처럼
그 중 하나인 WebSocket에 대해 알아보자
설치 방법
1 ) 터미널 오픈해서 npm init 입력
2 ) npm install express ws 입력
3 ) 웹 서버 만드는 밑의 코드 복붙
4 ) index.html 만들기
기본 코드
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
});
// 웹소켓으로 오는 유저메세지 받으려면??
socket.on('connection', (ws, req)=>{
ws.on('message', (msg)=>{
console.log('유저가 보낸거 :'+ msg);
})
});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" onclick="socket.send('ㅎㅇ')">메세지 보내기</button>
<script>
let socket = new WebSocket("ws://localhost:8081");
</script>
</body>
</html>
그런데 ws 대신 socket.io 라이브러리라는 것이 있다.
이 라이브러리를 쓰면
- 연결 끊기면 자동재접속 기능
- 웹소켓 접속자마다 자동 id 부여
- 모든 웹소켓 유저에게 전체 메세지 전송가능
- 웹소켓방을 생성가능
과 같은 장점이 있다.
'Study > 네트워크 공부' 카테고리의 다른 글
| QR코드 원리 (0) | 2023.05.23 |
|---|---|
| Virtualbox 다른 컴퓨터로 가상환경 옮기기 (0) | 2023.05.19 |
| Python - Requests 모듈 (0) | 2023.04.28 |
| aws - 클라우드 컴퓨팅이란? (0) | 2023.04.24 |
| Websocket 개념 정리 (0) | 2023.04.17 |