본 포스팅은 노마드 코더 줌클론 강의를 수강한 뒤 작성되었습니다.
ws를 사용해서 backend와 fronetent 사이에서 connection(연결)을 만드는 방법은 아래와 같다.
WebSocket()
- Frontend에서는 브라우저가 이미 webSocket 클라이언트에 대한 implementation을 有
- ∴ webSocket을 이용해서 backend와 연결하고 싶다면, JS를 사용하면 됨
- Backend에서의 webSocket 사용은 frontend와 비슷하다.
Backend에서 WebSocket 사용하기
- webSocket에도 event가 있고, event가 발동될때 사용할 function을 만들면 됨.
- 아래와 같은 frontend 문법과 유사하게 생김새를 가짐.
btn.addEventListener("click", function의 이름)- webSocket은 listen할 특정한 event명을 가지고 有
- webSocket에서도, 추가적인 정보를 받을 function이 有
- 브라우저에서의 event의 예시 : click, submit, Wi-Fi on/off
Backend에서 WebSocket의 Event 종류 & Frontend에서 필요한 코드
해당 코드를 통해 진행한다.
wss.on("event작성", function 작성);
event의 종류는 총 5가지밖에 없다.
(1) connection
: 누군가가 우리와 연결(connect)했다는 뜻
cf) socket : 연결된 어떤 사람(연결된 브라우저와의 contact(연락) 라인)
<socket을 사용하여 Messages 주고받기>
우선 Backend에서 Frontend로 보낸 메세지를 받는 방법을 진행하면 아래와 같다.
<Backend의 코드>
function handleConnection(socket) {
console.log(socket)
}
wss.on("connection", handleConnection)위처럼 작성해도 되고, 아래처럼 작성해도 괜찮다.
wss.on("connection", (socket) => {
console.log(socket);
});∴ on method는 backend에 연결된 人의 정보를 제공
-> 해당 정보가 socket에서 옴
-> server.js에서의 socket은 연결된 브라우저를 의미
wss에 有는 기능이 X라, socket에 有는 기능을 사용
//connection이 생겼을때, socket으로 즉시 메세지를 보내준 것
wss.on("connection", (socket) => {
console.log("Connected to Browser ✅");
socket.send("hello!");
});이렇게 socket.send를 통해 서버에서 브라우저 쪽으로 메시지를 보낸 것!
그럼 frontend에서는 해당 메세지를 받는 코드가 필요하겠지..
<Frontend의 코드> ❗❗
frontend에서 backend로 연결하는 방법은 아래 코드를 사용하는 것!
const socket = new WebSocket(`ws://${window.location.host}`);-> app.js에서의 socket은 서버로의 연결을 의미
아래와 같이 EventListener를 통해 동작 가능
const socket = new WebSocket(`ws://${window.location.host}`);
//아래는 socket이 connection을 open했을때 발생할 것
socket.addEventListener("open", () => {
console.log("Connected to Server ✅");
});
//아래는 서버로부터 받은 message가 있다면, 진행됨
socket.addEventListener("message", (message) => {
console.log("Just got this: ", message.data, " from the Server");
});
//아래는 서버와의 connection이 끝났을때 발생할 것
socket.addEventListener("close", () => {
console.log("Disconnected to Server ❌");
});
다름으로 Frontend에서 Backend로 보낸 메세지를 받는 방법을 진행하면 아래와 같다.
<Backend의 코드>
wss.on("connection", (socket) => {
socket.on("message", (message) => {
//브라우저쪽에서 메세지를 보냈다면, 해당 메세지를 읽는것
console.log(message);
});<Frontend의 코드>
//Backend에 message 보내기
//10000초 뒤에 해당 메세지를 전송
setTimeout(() => {
"hello from the browser!";
}, 10000);전체 코드
1. server.js - Backend 부분
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("/", (req, res) => res.render("home"));
app.get("/*", (req, res) => res.redirect("/"));
const handleListen = () => console.log("Listening on http://localhost:3000");
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
//connection이 생겼을때, socket으로 즉시 메세지를 보내준 것
wss.on("connection", (socket) => {
console.log("Connected to Browser ✅");
socket.on("message", (message) => {
//브라우저쪽에서 메세지를 보냈다면, 해당 메세지를 읽는것
console.log(message);
});
socket.send("hello!");
});
server.listen(3000, handleListen);
2. app.js - Frontend 부분
const socket = new WebSocket(`ws://${window.location.host}`);
//Backend에서 보낸 message를 받기
//아래는 socket이 connection을 open했을때 발생할 것
socket.addEventListener("open", () => {
console.log("Connected to Server ✅");
});
//아래는 서버로부터 받은 message가 있다면, 진행됨
socket.addEventListener("message", (message) => {
console.log("Just got this: ", message.data, " from the Server");
});
//아래는 서버와의 connection이 끝났을때 발생할 것
socket.addEventListener("close", () => {
console.log("Disconnected to Server ❌");
});
//Backend에 message 보내기
//10000초 뒤에 해당 메세지를 전송
setTimeout(() => {
"hello from the browser!";
}, 10000);
