둘 다 프로토콜(protocol)
브라우저와 backend사이에서만 http와 websocket을 사용하는 것이 아님
- real-time으로 소통하는 2개의 서버 사이에서도 사용, 작용!
stateless
, backend 즉 서버가 유저를 기억하지 못함. 유저와 backend 사이에 아무런 연결이 없음.wss://nomadcoders.co
- 지원하는 브라우저만 사용가능
handshake
클라이언트와 서버 사이의 websocket실행에서 검증된 ws라는 패키지를 사용할 것!
npm i ws
/src/server.js
import express from "express";
import http from "http";
import WebSocket from "ws";
const app = express();
const handleListen = () => console.log(`Listening on http://localhost:3000`);
// 서버 생성(http)
const server = http.createServer(app);
// websocket 서버 생성(http서버를 이용한) => http/ws 둘 다 사용가능
// websocket.server는 객체를 전달인자로 받아주는데
// {server, port}에서 포트를 생략해주면 http와 같은 port를 사용함!
const wss = new WebSocket.Server({ server });
server.listen(3000, handleListen);
/src/public/js/app.js
//front에서 back으로 연결할때
const socket = new WebSocket(`ws://${window.location.host}`);
이렇게 프론트와 백을 ws로 연결
백과 프론트 서로가 서로에게 메세지를 보내고 받을 수 있게 코드구성
/src/server.js
import express from "express";
import http from "http";
import WebSocket from "ws";
const app = express();
//뷰 엔진 설정과 express에 template 지정
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
//public url 생성해서 유저에게 파일 공유
app.use("/public", express.static(__dirname + "/public"));
//home.pug를 render
app.get("/", (req, res) => res.render("home"));
//페이지 홈만 쓸거라서
app.get("/*", (req, res) => res.redirect("/"));
const handleListen = () => console.log(`Listening on http://localhost:3000`);
// 서버 생성(http)
const server = http.createServer(app);
// websocket 서버 생성(http서버를 이용한) => http/ws 둘 다 사용가능
// websocket.server는 객체를 전달인자로 받아주는데
// {server, port}에서 포트를 생략해주면 http와 같은 port를 사용함!
const wss = new WebSocket.Server({ server });
function onSocketClose() {
console.log("Disonnected from the Browser ❌");
}
// function onSocketMessage(message) {
// //스트링으로 변환 안해주면 이상한 코드가 나옴
// console.log(message.toString("utf8"));
// }
// websocket작동
// wss는 서버전체, socket은 브라우저 하나대상
wss.on("connection", (socket) => {
console.log("Connected to Browser");
//브라우저가 닫혔을때
socket.on("close", onSocketClose);
// 브라우저가 서버에 메세지 보냈을때 다시 그 값을 브라우저에 보내주기
socket.on("message", (message) => {
const messageString = message.toString("utf8");
socket.send(messageString);
});
});
server.listen(3000, handleListen);
/src/public/js/app.js
const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");
//front에서 back으로 연결할때
const socket = new WebSocket(`ws://${window.location.host}`);
//소켓이 연결되었으면 프론트의 console에
socket.addEventListener("open", () => {
console.log("Connected to Server ✅");
});
// 소켓에 메세지가 들어오면
socket.addEventListener("message", (message) => {
console.log("New message:", message.data);
});
// 연결이 끊겼을때
socket.addEventListener("close", () => {
console.log("Disonnected from Server ❌");
});
// // 서버에 메세지 보내주기
// setTimeout(() => {
// socket.send("hello from the browser");
// }, 10000);
//프론트엔드에서 백엔드 그러니까 서버로 값을 보내주기
function handleSubmit(event) {
event.preventDefault();
const input = messageForm.querySelector("input");
socket.send(input.value);
// 보내줬으니까 비워주기
input.value = "";
}
messageForm.addEventListener("submit", handleSubmit);
연결되어있는 socket을 저장할 fake db를 만들어주고 거기에 저장한 모든 socket에게 메세지를 보내주면 간단하게 구현가능하다!
/src/server.js
//fake db
const sockets = [];
// websocket작동
// wss는 서버전체, socket은 브라우저 하나대상
wss.on("connection", (socket) => {
//연결되는 socket을 db에 저장
sockets.push(socket);
console.log("Connected to Browser");
//브라우저가 닫혔을때
socket.on("close", onSocketClose);
// 브라우저가 서버에 메세지 보냈을때 다시 그 값을 브라우저에 보내주기
socket.on("message", (message) => {
const messageString = message.toString("utf8");
// 각각의 연결된 소켓 모두에게 메세지 전달(보낸 나도 포함)
sockets.forEach((aSocket) => aSocket.send(messageString));
});
});