🖋️ 웹 소켓을 알아보자
개념
- 실시간 양방향 통신을 가능하게 하는 기술
- HTTP 와는 달리, 연결이 한 번 수립되면 서버와 클라이언트 간에 지속적인 데이터 교환 가능
- ex ) 실시간 채팅 애플리케이션, 온라인 게임, 실시간 협업 툴 등에서 매우 유용
왜 사용 ?
실시간 통신
서버와 클라이언트 간에 거의 실시간으로 데이터를 교환네트워크 효율
한 번의 연결을 통해 여러 메시지를 주고 받을 수 있어
HTTP 요청과 응답에 비해 네트워크 트래픽이 적음양방향 통신
클라이언트와 서버 양쪽 모두에서 언제든지 데이터를 전송사용법
설치
npm install ws expressserver.js 코드 작성
const http = require('http');
const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({server});
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
const handleListen = () => console.log("link on http://localhost:3000");
const onSocketClose = () => console.log("Disconnected!");
const sockets = [];
wss.on("connection", (ws) => {
sockets.push(socket);
console.log("Connected!");
ws.on("close", onSocketClose);
ws.on("message", (message) => {
sockets.forEach((aws) => aws.send(message.toString()));
});
});
server.listen(3000, handleListen);app.js 코드 작성
const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");
const socket = new WebSocket(`ws://${window.location.host}`);
function handleOpen() {
console.log("Connected to Server ✅");
}
socket.addEventListener("open", handleOpen);
socket.addEventListener("message", (message) => {
console.log("New message: ", message.data);
});
socket.addEventListener("close", () => {
console.log("Disconnected from Server ❌");
});
function handleSubmit(event) {
event.preventDefault();
const input = messageForm.querySelector("input");
socket.send(input.value);
input.value = "";
}
messageForm.addEventListener("submit", handleSubmit);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>Noom</title>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
</head>
<body>
<header>
<h1>Noom</h1>
</header>
<main>
<ul></ul>
<form>
<input type="text" placeholder="write a msg" required>
<button>Send</button>
</form>
</main>
<script src="/public/js/app.js"></script>
</body>
</html>
일단 한다