Wep Socket이란?
- 클라이언트와 서버 간의 양방향 통신이 가능하도록 지원하는 프로토콜
- 클라이언트가 요청을 먼저 보내지 않아도 서버 측에서 데이터를 보낼 수 있게 되었다.
3개의 파일을 우선 만들고
app.js는 서버 파일
const morgan = require("morgan");
const cookieParser = require("cookie-parser");
const session = require("express-session");
const express = require("express");
const app = express();
const webSocket = require("./socket.js");
// 포트 설정
app.set("port", process.env.PORT || 8080);
// 공통 미들웨어
app.use(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser("wsExample"));
app.use(
session({
resave: false,
saveUninitialized: false,
secret: "wsExample",
cookie: {
httpOnly: true,
secure: false,
},
})
);
// 라우터 설정
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
// 404 오류 처리
app.use((req, res, next) => {
const error = new Error(`${req.method} ${req.url} 해당 주소가 없습니다.`);
error.status = 404;
next(error);
});
// 오류 처리 미들웨어
app.use((err, req, res, next) => {
res.locals.message = err.message;
res.locals.error = process.env.NODE_ENV !== "production" ? err : {};
res.status(err.status || 500);
res.send("error Occurred");
});
// 서버와 포트 연결..
const server = app.listen(app.get("port"), () => {
console.log(app.get("port"), "번 포트에서 서버 실행 중..");
});
webSocket(server); //ws와 http 포트 공유
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>WebSocket</title>
</head>
<body>
<div>ws 모듈로 웹 소켓을 알아봅시다.</div>
<script>
// websocket으로 서버와 http 포트 연결. http포트와 공유해서 통신할 수 있음
// wesocket객체는 기본적으로 브라우저에서 지원
const webSocket = new WebSocket("ws://localhost:8080");
// 서버에서 wss.on('connection' 이 성공적으로 되면, 이벤트 실행
webSocket.onopen = function () {
console.log("Web Socket Connected");
};
// 사실상 .onmessage 와 .send 로 메세지 통신을 하게 되는 것이다
webSocket.onmessage = function (event) {
console.log(event.data);
webSocket.send("This Message From Client"); // 서버로부터 메세지 받으면 바로 서버로 메세지 보냄
};
</script>
</body>
</html>
socket.js는 웹소켓 파일
const WebSocket = require("ws");
module.exports = (server) => {
//express 서버와 웹소켓 서버를 연결 시킨다.
// 변수이름은 wss(web socket server)
const wss = new WebSocket.Server({ server });
//프론트에서 new WebSocket("ws://localhost:8080") 보냈을때, 웹소켓 연결 실행
wss.on("connection", (ws, req) => {
//* ip 파악
// req.headers['x-forwarded-for'] : 프록시 서버를 경유할때 ip가 변조될수 있다. 이를 감지하고 본ip파악해줄 수 있다.
const ip = req.headers["x-forwarded-for"] || req.connection.remoteAddress;
console.log("New Client : ", ip);
//* 클라이언트로부터 온 메시지
ws.on("message", (message) => {
console.log(message);
});
ws.on("error", (err) => {
console.log(err);
});
//* 연결 종료 시 (유저가 채팅방을 나간다거나)
ws.on("close", () => {
console.log("클라이언트 접속 해제", ip);
clearInterval(ws.interval); // 연결 끊기면 setInterval 중지
});
// 3초마다 클라이언트로 메시지 전송
//+ 함수 선언식은 정의하자마자 실행가능
ws.interval = setInterval(() => {
//! 웹소켓은 비동기이기 때문에 삑 날 수 있어, 웹소켓이 클라이언트랑 연결이 되었는지 검사하는 안전 장치
if (ws.readyState == ws.OPEN) {
ws.send("Message From Server.");
}
}, 3000);
});
};
npx nodemon ~app.js로 터미널로 실행을 했는데 에러가..
결국 ws 모듈을 재설치 --> 오류해결
그런데 3초마다 버퍼 값이 출력.. 원래는 “This Message From Client”가 출력되어야 하는데…
브라우저에서 클라이언트의 상태에서 확인하면 서버로부터 온 메시지가 콘솔에 3초마다 찍히는 건 되는데
Network 탭에서 websocket프로토콜 localhost의 [Mesage]탭에서 서버와 클라이언트 데이터가 모두 쌓이고 있지 않다.
원래 This message ~client, Thise message ~server가 번갈아가면서 쌓여야하는데..
---다시 해결책을 찾아보고 시도해보고 네트워크에 정상적으로 데이터가 쌓이고 버퍼값이 출력안되도록 수정할 예정!---
수정 완료!!
socket.js 에서 클라이언트로부터 온 message에 이진 내용의 전체 또는 일부를 문자열로 변환하는 toString()메서드를 활용하니 정상적으로 "This Message From Client"출력 완료!
구글링을 하다보니 우연찮게 얻어걸렸다..ㅋㅋ
Network 탭에서 websocket프로토콜 localhost의 [Mesage]탭에서 서버와 클라이언트 데이터가 모두 쌓이고 있었다..
한 줄로 보고있었으니 같은 메시지만 확인하고 있었던 것이다.. 결국 오류는 모두 해결 성공!
'nodeJs' 카테고리의 다른 글
| 템플릿 엔진 (0) | 2024.04.16 |
|---|---|
| express 모듈을 사용해 서버 만들기(2) (0) | 2024.02.26 |
| express 모듈을 사용해 서버 만들기(1) (1) | 2024.02.25 |
| nodeJS모듈로 서버 만들기 (0) | 2024.02.24 |
