- 서버와 유저가 데이터 주고 받으려면 http 요청을 이용한다.
- 유저 : 데이터 정보를 주세요 (http 요청을 날림)
- 서버 : 유저에게 해당 데이터를 보내줌
웹소켓
- 유저와 서버의 양방향 통신
준비
- 폴더 생성
server.js파일 성성 후 터미널에yarn init- package.json 파일이 생성된다.
- 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. 웹소켓방을 생성 가능
