[ 서버가 유저와 데이터를 주고 받고 싶을 때는?? ]
(옛날)
1) HTTP
: http 요청은
문제 메세지랑 비슷하다.
하지만, 서버가 선톡은 절대 하지 않는다.
(현재)
1) Server-Send Event (서버의 단방향 통신)
: http 통신을 종료하지 않고도 계속 유지 할 수 있다.
정해진 시간마다 서버가 사용자에게 데이터를 전송한다.
단점으로는 서버만 일방적으로 데이터를 보낼 수 있다. (ex 라디오)
즉, 지속적인 데이터 수신만 가능
2) WebSocket (서버와 사용자의 양방향 통신)
: WebSocket은 전화 하는 것과 똑같다.
사용자가 서버에게 "오늘부터 웹소켓 할래?"라고 물으면
서버는 동의나 비동의를 날려주고 동의를 할 경우 양방향 통신이 가능하다.
[ 사용법 ]
terminal
npm init
npm install express ws (서버 생성 해주는 라이브러리)server.js
const express = require("express");
const app = express();
app.use("/", function(req, res) {
rssendFile(__dirname + "/index.html");
}
app.listen(8080);index.html
<!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>localhost:8080으로 접속 시 (페이지를 볼 수 있음)
유저와 웹 소켓 연결 (server.js에 추가)
... 생략
const socket = new WebSocket.Server({
port : 8081;
})웹 소켓을 열어 달라고 서버에게 부탁 (index.html에 추가) + 웹 소켓으로 유저 → 서버에게 메세지를 보낼 수 있다.
(일반적인 http 요청을 할 때는 http://~~~로 시작하고, webSocket을 요청 할 때는 ws://~~~ or wss://~~~으로 시작)
<body>
.. 생략
<button id="send" onClick="socket.send("hi")>메세지 보내기</button>
<script>
let socket = new WebSocket("ws://localhost:8081");
</script>
.. 생략
</body>웹 소켓으로 오는 유저 메세지를 받을 때는 (유저 → 서버)
socket.on("connection", (ws, req) => {
ws.on("message", (msg) => {
console.log("유저가 보낸 메세지 : " + msg)
})
})웹 소컷으로 유저에게 메세지를 보내려면 (서버 → 유저)
socket.on("connection", (ws, req) => {
ws.on("message", (msg) => {
console.log("유저가 보낸 메세지 : " + msg)
ws.send("Hi")
})
})[ ws 대신 socket.io 라이브러리를 사용하면 ]
- 연결 끊기면 자동으로 재접속 기능을 제공 할 수 있다.
- 웹 소켓 접속자마다 자동 id를 부여 할 수 있다.
- 모든 웹 소켓 유저에게 전체 메세지 전송이 가능하다.
- 웹 소켓 방을 생성 할 수 있다. (채팅방)
'더 알아보기 > 기능' 카테고리의 다른 글
| [React] JSX에서 Switch문 사용하는 방법 (0) | 2022.02.22 |
|---|---|
| Sentry (0) | 2022.01.24 |
| React-PWA-Install (0) | 2022.01.21 |
| react-div-100vh (0) | 2022.01.20 |
| AWS Amplify로 CI/CD 적용하기 (0) | 2022.01.19 |
댓글