app.js
//express 를 모듈에서 불러옴
const express = require("express");
const http = require("http");
//express의 실행 내용을 app에 담음
const app = express();
const path = require("path")
//express가 http로 실행될 수 있도록
const server = http.createServer(app);
//소켓 사용하기
const socketIO = require("socket.io");
//변수에 서버 담기
const io = socketIO(server);
//모먼트 사용(시간)
const moment = require("moment");
//한국시간으로 모먼트 설정
require('moment-timezone');
moment.tz.setDefault("Asia/Seoul");
//서버가 실행이 되면 보여줄 폴더를 지정
//path.join : 운영체제마다 경로를 나타내주는 기호가 다르기 때문에
app.use(express.static(path.join(__dirname, "src")));
//프로세스 환경에 포트가 지정되어 있으면 그것을 실행 아니면 5000실행
const PORT = process.env.PORT || 5000;
//연결이 되면 그것의 정보를 소켓에 담음
//소켓의 정보에 접근
io.on("connection", (socket) => {
//"채팅아이디"
socket.on("chatting", (data) => {
const { name, msg } = data;
io.emit("chatting", {
name,
msg,
time : moment(new Date()).format("h:ss A")
})
})
});
//app.listen(포트,명령) 포트라는 변수를 사용하기 위해서 백틱 사용
server.listen(PORT, ()=> console.log(`server is running ${PORT}`));
//서버 ctrl c 중지
//nodemon라이브러리를 사용하면 js파일에 변경이 있을 때 마다 자동으로 서버 재실행
// nodemon app.js 으로 실행하면 자동으로 해줌!
chat.js
//socket.io불러오기
"use strict"
const socket = io();
const nickname = document.querySelector("#nickname");
const chatList = document.querySelector(".chatting-list");
const chatInput = document.querySelector(".chatting-input");
const sendButton = document.querySelector(".send-button");
const displayContainer = document.querySelector(".display-container")
chatInput.addEventListener("keypress", (event)=>{
if(event.keyCode===13){
send()
}
})
function send(){
const param = {
name : nickname.value,
msg : chatInput.value
}
socket.emit("chatting",param);
}
//닉네임과 내용을 서버에 전송
sendButton.addEventListener("click",send)
// socket.emit("chatting","from front")
socket.on("chatting", (data) => {
const { name, msg, time } = data;
const item = new LiModel(name, msg, time);
item.makeLi();
displayContainer.scrollTo(0, displayContainer.scrollHeight)
})
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="profile">
<span class="user">${this.name}</span>
<img class="image" src="https://placeimg.com/50/50/any" alt="any">
</span>
<span class="message">${this.msg}</span>
<span class="time">${this.time}</span>`;
li.innerHTML = dom;
chatList.appendChild(li)
}
}
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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="user-container">
<label for="nickname">대화명</label>
<input type="text" id="nickname">
</div>
<div class="display-container">
<ul class="chatting-list">
</ul>
</div>
<div class="input-container">
<span>
<input type="text" class="chatting-input">
<button class="send-button">전송</button>
</span>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha512-MgkNs0gNdrnOM7k+0L+wgiRc5aLgl74sJQKbIWegVIMvVGPc1+gc1L2oK9Wf/D9pq58eqIJAxOonYPVE5UwUFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/chat.js"></script>
</body>
</html>npm install -g ngrok
: 내 컴퓨터를 외부의 사람들이 사용할 수 있게
명령프롬프트 -> ngrok http 5000(현재서버)
forwarding 된 주소가 접속 할 수 있는 주소
움~ 일단 열심히 따라서 만들어 보는 것에는 성공했지만.. 이해는 잘 하지 못했다. node.js가 정말 편한 것은 확실히 느껴져서 잘 사용 해 보고싶다. 서버 연결이 관건일 것 같다.
1일 1커밋 1일 1벨로그!