웹 소켓

박서현·2023년 10월 2일
0
  • 서버와 유저가 데이터 주고 받으려면 http 요청을 이용한다.
  • 유저 : 데이터 정보를 주세요 (http 요청을 날림)
  • 서버 : 유저에게 해당 데이터를 보내줌

웹소켓

  • 유저와 서버의 양방향 통신

준비

  • 폴더 생성
  • server.js파일 성성 후 터미널에 yarn init
    • package.json 파일이 생성된다.
  • yarn add express ws
    • express : 서버를 만들어주는 라이브러리
    • ws : 웹소켓 연결을 뚫어주는 라이브러리

웹서버 만드는 코드 작성

  • 📁 server.js
const express = require('express');
const app = express();

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

app.listen(8080);

유저가 접속 할 html

  • 📁 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>웹소켓 연습하기</title>
</head>
<body>
  <h4>채팅페이지입니다</h4>
  <button id="send">메세지 보내기</button>
</body>
</html>
  • 실행


유저 웹소켓 연결하기

  • 📁 server.js 코드 추가
const webSocket = require('ws');

const socket = new webSocket.Server({
  port: 8081
})

유저가 웹소켓 요청하기

  • 📁 index.html 코드 추가
<script>
  let socket = new webSocket("ws://localhost:8081")
</script>

웹소켓으로 유저가 서버에게 메세지 보내기

  • 📁 index.html 코드 수정
<button id="send" onclick="socket.send('원하는 문자 입력')">메세지 보내기</button>

서버에서 메세지 수신하기

  • 📁 server.js 코드 추가
socket.on('connection', (ws, req) => {
  ws.on('message', (msg) => {
    console.log('유저가 보낸거 : ' + msg);
    ws.send('서버에서 유저에게 보내는 메세지');
  });
});

ws대신 socket.io라이브러리 쓰면
1. 연결 끊기면 자동 재접속 기능
2. 웹소켓 접속자마다 자도 ㅇid 부여
3. 모든 웹소켓 유저에게 전체 메세지 전송 가능
4. 웹소켓방을 생성 가능

0개의 댓글

관련 채용 정보