on
NodeJS의 웹 소켓으로 채팅방 만들기
NodeJS의 웹 소켓으로 채팅방 만들기
express 서버 안에다가 websocket 생성
http,websocket 둘다 작동
굳이 같이 만들 http와 websocket을 같이 만들필요는 없다
같이 만드는 이유는 2개가 같은 port에 있길 원하기 때문
내 http 서버 위에 websocket 서버를 만들 수 있도록 하였다.
import http from "http"; import express from 'express'; import WebSocket from "ws"; 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(`go http://localhost:3000`); const server = http.createServer(app); // http 서버 const wss = new WebSocket.Server({server}); server.listen(3000, handleListen); // app.listen(3000,handleListen);
현재는 http,ws 2개의 protocol을 이해할 수 있다.
http 서버를 필요로 하는 이유는 views,static files, home,redirection을 원하기 때문
server.js
import http from "http"; import express from 'express'; import WebSocket from "ws"; 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(`go http://localhost:3000`); const server = http.createServer(app); // http 서버 const wss = new WebSocket.Server({server}); function handleConnection(socket){ console.log(socket); } wss.on("connection",handleConnection) server.listen(3000, handleListen); // app.listen(3000,handleListen);
server.js의 socket은 연결된 브라우저를 뜻한다
frontend와 backend 연결 하기
public/views/app.js
app.js의 socket은 서버로의 연결을 뜻한다.
const socket = new WebSocket(`ws://${window.location.host}`);
import http from "http"; import express from 'express'; import WebSocket from "ws"; 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(`go http://localhost:3000`); const server = http.createServer(app); // http 서버 const wss = new WebSocket.Server({server}); //socket에 있는 메소드 사용 wss.on("connection",(socket) =>{ console.log("Conneted to Browser"); socket.on("close", () => { console.log("브라우저 끊김"); }) socket.send("hello"); }) server.listen(3000, handleListen); // app.listen(3000,handleListen);
브라우저의 연결이 끊기면 서버에 event를 발생시키고
서버가 오프라인이 되면 브라우저한테 알려준다.
const socket = new WebSocket(`ws://${window.location.host}`); // socket.send("hello"); server.js 메세지 보냄 // 메시지 받기 socket.addEventListener("open", () =>{ console.log("Conneted to server"); }) // server.js에서 보낸 메시지 출력 socket.addEventListener("message", (message) =>{ console.log("just got this:", message.data, " from the server"); }) //서버 종료 socket.addEventListener("close", () =>{ console.log("from sever close"); })
app.js
const messageList = document.querySelector("ul"); const messageForm = document.querySelector("#message"); const nickForm = document.querySelector("#nick"); const socket = new WebSocket(`ws://${window.location.host}`); // object형식으로 만들어준다. function makeMessage(type,payload){ const msg = {type, payload} return JSON.stringify(msg); } function handleOpen() { console.log("Connected to Server ✅"); } socket.addEventListener("open", handleOpen); socket.addEventListener("message", (message) => { const li = document.createElement("li"); li.innerText = message.data; messageList.append(li); }); socket.addEventListener("close", () => { console.log("Disconnected from Server ❌"); }); //front-end form에서 backend로 무언가를 보낸다 function handleSubmit(event) { event.preventDefault(); const input = messageForm.querySelector("input"); socket.send(makeMessage("New_message", input.value)); //type과 payload const li = document.createElement("li"); li.innerText = `You : ${input.value}`; messageList.append(li); input.value = ""; } // type과 payload 형태로 전송 // json obejct로 전송 function nickSubmit(event){ event.preventDefault(); const input = nickForm.querySelector("input"); socket.send(makeMessage("nickname", input.value)); input.value = ""; } messageForm.addEventListener("submit", handleSubmit); nickForm.addEventListener("submit", nickSubmit);
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 }); function onSocketClose() { console.log("Disconnected from the Browser ❌"); } const sockets = []; //페이지에 버튼과 같다 //socket에 있는 메소드 사용 //페이지에 버튼과 같다. // 이코드는2번작동한다 brave와 연결 할때 작동 // firefox연결이 될때 작동 //브라우저가 연결될때마다 push를 통해 sockes배열에 넣어준다. wss.on("connection", (socket) => { sockets.push(socket); socket["nickname"] = "anon"; console.log("Connected to Browser ✅"); socket.on("close", onSocketClose); socket.on("message", (msg) => { const message = JSON.parse(msg); switch(message.type){ case "New_message": sockets.forEach((aSocket) => aSocket.send(`${socket.nickname}: ${message.payload}`)); case "nickname" : socket["nickname"] = message.payload; } }); }); server.listen(3000, handleListen); // app.listen(3000,handleListen);
from http://qweiop3334.tistory.com/52 by ccl(A) rewrite - 2021-11-12 16:00:41