728x90
npm install nodemon -g(-g는 글로벌 옵션이라는 뜻: node module + 다른 곳에서도 작동)
설치 후
nodemon app명
index.css(채팅방 css)
#main { //채팅방 전체
margin: auto;
margin-top: 100px;
background-color: lightblue;
text-align: center;
width: 100%;
height: 800px;
}
#chat { //입력된 채팅 부분
height: 90%;
width: 100%;
overflow-y: auto;
}
.connect { //입장 메세지
width: 90%;
margin: auto;
background-color: aquamarine;
text-align: center;
margin-top: 10px;
}
.disconnect { //퇴장 메세지
width: 90%;
margin: auto;
background-color: indianred;
text-align: center;
margin-top: 10px;
}
.me{ //내가 쓴 메세지
width: 90%;
margin: auto;
background-color: lemonchiffon;
border-radius: 5px;
margin-top: 10px;
}
.other{ //남이 쓴 메세지
width: 90%;
margin: auto;
background-color: white;
border-radius: 5px;
margin-top: 10px;
}
index.html(채팅방)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="/css_4/index.css"><!-- 경로 자체는 /static/css_4/index.css이지만 static제외 -->
<script src="/socket.io/socket.io.js"></script>
<script src="/js/index4.js"></script>
</head>
<body>
<div id="main">
<div id="chat">
<!-- 채팅 메세지 영역 -->
</div>
<div>
<input type="text" id="test" placeholder="메세지를 입력해주세요.">
<button onclick="send()">전송</button><!-- /static/js.index.js send()호출 -->
</div>
</div>
</body>
</html>
index.js(채팅방 기능)
var socket = io();
socket.on("connect", function(){ //채팅방 입장했을 때 출력되는 모달창
var name = prompt("반갑습니다. 이름을 입력하세요", "");
if(!name){
name = "익명"
}
socket.emit("newUser", name);
});
socket.on("update", function(data){ // 채팅을 쌓는 기능+입력 종류에 따라 적용되는 css 분별
var chat = document.getElementById("chat");
var message = document.createElement("div");
var node = document.createTextNode(`${data.name}: ${data.message}`);
var className = "";
switch(data.type){
case "message":
className = "other";
break;
case "connect":
className = "connect";
break;
case "disconnect":
className = "disconnect";
break;
}
message.classList.add(className); //class효과 추가
message.appendChild(node);
chat.appendChild(message);
});
function send(){ // 내가 입력한 채팅을 채팅방에 쌓는 기능
var message = document.getElementById("test").value;
document.getElementById("test").value="";
var chat = document.getElementById("chat");
var mesg = document.createElement("div");
var node = document.createTextNode(message);
mesg.classList.add("me"); //class효과 추가
mesg.appendChild(node);
chat.appendChild(mesg);
socket.emit("message", {type: "message", message: message});
}
app.js
const express = require("express");
const socket = require("socket.io");
const http = require("http");
const fs = require("fs")
const app = express();
const server = http.createServer(app);
const io = socket(server);
app.use("/css_4", express.static("./static/css_4")); //다른 css파일 사용을 위한 변경
app.use("/js", express.static("./static/js"));
app.get("/", function(req, res){ //유저가 사이트에 들어올 때
console.log("유저가 /로 접속함");
fs.readFile("./static/index_4.html", function(error, data){
if(error){
res.send("에러 발생")
} else {
res.writeHead(200, {"Content-Type" : "text/html"});
res.write(data);
res.end();
}
});
});
io.sockets.on("connection", function(socket){ //채팅방 입장
socket.on("newUser", function(name){
console.log("서버");
console.log(name + "님이 접속하셨습니다.");
socket.name= name;
io.sockets.emit("update", {
type:"connect",
name: "SERVER",
message: name+"님이 접속하셨습니다."
});
});
socket.on("disconnect", function(){ //채팅방 퇴장
console.log(socket.name + "님이 나갔습니다.");
socket.broadcast.emit("update", {
type: "disconnect",
name: "SERVER",
message: socket.name+"님이 나가셨습니다."
});
});
socket.on("message", function(data){ //타인이 입력한 메세지
data.name = socket.name;
console.log("message이벤트: ", data);
socket.broadcast.emit("update", data);
})
socket.on("me", function(data){ //내가 입력한 메세지
data.name = socket.name;
console.log("me: ", data);
socket.broadcast.emit("update", data);
})
});
server.listen(8081, function(){ //서버 실행될 때
console.log("서버 실행중...");
});
'단순 코드 기록 > Node' 카테고리의 다른 글
| Node_소켓을 통한 채팅 (0) | 2024.03.27 |
|---|---|
| Node_소켓통신 적용 (0) | 2024.03.27 |
| Node_소켓통신에서 HTML, CSS, js파일 사용 (0) | 2024.03.27 |
| Node_소켓통신을 이용한 서버 가동 (0) | 2024.03.27 |
| Node_Template 사용 + Update (0) | 2024.03.26 |