WebSocket
본문 바로가기
더 알아보기/기능

WebSocket

by 은돌1113 2022. 1. 24.

  [ 서버가 유저와 데이터를 주고 받고 싶을 때는?? ]  

 

(옛날)

 

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

댓글