설치

npm init -y  [ package.json 파일 생성 ]
npm install express socket.io moment
			[ 모듈  + 소켓    + 시간정보 설치]

배포[ ngrok ]

npm install -g ngrok [외부에서 내컴퓨터로 접속하기 좋음]
ngrok http [현재 내가 보여주고 싶은 포트]

서버 동작에서 필요한 변수 생성

const express = require("express");  //express를 가져와 변수에 저장
const http = require("http");  //서버의 정보
const app = express();  //express를 실행한 값을 app에 저장
const path = require("path");// 서버 경로를 저장한 변수
const server = http.createServer(app);

const socketIO = require("socket.io");
const io = socketIO(server);

const moment = require("moment");

요청을 받고(on) 다시 전송하는 역할(emit)

app.use(express.static(path.join(__dirname,"src")))

io.on("connection",(socket)=>{
    socket.on("chatting",(data)=>{
        const {name,msg,} = data;

      //요청을 받고 object형태로 전달
        io.emit("chatting",{
            name, /* es6부터는 이름이 같으면 생략 가능 */
            msg:msg, /*원래는 이렇게 객체이름에 맞게 위치시켜줘여 함*/
            time:moment(new Date()).format("h:ss A")/*시간*/
        })
    })
});

//프로세스에 설정된 기본 포드 혹은 5000번
const PORT = process.env.PORT||5000;
server.listen(PORT,()=> console.log(`Run on server${PORT}`));

---

화면단에서 처리되는 js

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js" 
        integrity="sha512-9mpsATI0KClwt+xVZfbcf2lJ8IFBAwsubJ6mI3rtULwyM3fBmQFzj0It4tGqxLOGQwGfJdk/G+fANnxfq9/cew=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
<script src="./js/chat.js"></script>

chat.js

//서버 js에서 전달한 socket을 변수에 저장
const socket = io();

const nickname = document.getElementById("nickname");
const chatList = document.querySelector(".chatting-list");
const chatInput = document.querySelector(".chatting-input");
const sendBtn = document.querySelector(".sendBtn");
const displayContainer = document.querySelector(".display-container");

chatInput.addEventListener("keypress",send)
sendBtn.addEventListener("click",send)

서버단으로 전송하는 함수

//입력을 검증후 파라미터를 저장해 서버로 전송한다
function send(){
    if(nickname.value.trim()==''){
        alert("닉네임을 입력후 메세지를 전송해주세요")
        return false;
    }
    const param = {
        name : nickname.value,
        msg  : chatInput.value
    }
    socket.emit("chatting",param);
}

서버에서 들어온 요청을 받은 함수

//메세지를 전달받음
socket.on("chatting",(data)=>{
    const{name,msg,time} = data;
    const itme = new LiModel(name,msg,time);
    //li 모델을 인스턴스 화
    itme.makeLi();
 
  //페이지의 높이를 화면에 높이에 맞게 이동
  displayContainer.scrollTo(0,displayContainer.scrollHeight);
})

li을 구성하고

function LiModel(name,msg,time){
    this.name=name;
    this.msg = msg;
    this.time=time;

    this.makeLi = ()=>{
        const li = document.createElement("li");
        li.classList.add(nickname.value===this.name ? "sent" :"received" )
        const dom = `
        <span class="porfile">
            <span class="user">${name}</span>
            <img class="imgs" src="https://placeimg.com/50/50/and" alt="temp">
        </span>
        <span class="messge">${msg}</span>
        <span class="time">${time}</span>`;


        li.innerHTML=dom;
        chatList.appendChild(li);
    }
}