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);