http 프로토콜은 프론트엔드의 요청이 있어야지만 백엔드가 응답을 할 수 있는 구조이지만 ws 프로토콜은 프론트엔드의 요청이 없어도 백엔드 응답 가능(양방향 통신)
const wss = new WebSocket.Server({ server }); // webSocket 서버 생성
// param socket : 서버와 브라우저간의 연결 정보
function handleConnection(socket) {
console.log(socket)
}
wss.on("connection" , handleConnection); // on method : 이벤트를 기다림
| 📄 server.js
import http from "http";
import WebSocket from "ws";
import express from "express";
const app = express();
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));
const handleListen = () => console.log(`Listening on http://localhost:3000`);
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
const sockets = [];// fake database
// 어느 브라우저에서 연결했는지를 알기 위함
// socket : 브라우저와의 연결 정보
wss.on("connection", (socket) => { // 브라우저와 연결 성공 시
sockets.push(socket); // 다른 브라우저 연결시, socketsArray에 추가해줌
console.log("Connected to Browser ✅");
socket.on("close", () => { // 브라우저 연결 실패 시
console.log("Disconnected from the Browser ❌");
});
socket.on("message", (message) => { // 브라우저로 부터 메시지 받았을 시
sockets.forEach((aSocket) => aSocket.send(message));
// 각 브라우저 각각을 aSocket으로 놓고 메시지 전송(sockets에서 꺼내와서 전송)
});
});
server.listen(3000, handleListen);
| 📄 app.js
const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");
const socket = new WebSocket(`ws://${window.location.host}`);
socket.addEventListener("open", () => {
console.log("Connected to Server ✅");
});
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);
🌟 socket의 의미
app.js(프론트엔드) : 생성한 ws 객체 (브라우저 당 개별적으로 존재)
server.js(백엔드) : 프론트엔드와의 연결상태
📢 ws 버전에 따라 문자가 나타나지 않는 문제 해결! ➡ 서버측에서 message.toString('utf-8') 로 String으로 변환해준다.
