Jeongmin Seo / favorite_restaurant

Go to a project
Toggle navigation Toggle navigation pinning
Jumi Yang
46edde80 1 parent 67f92772

Update chatting feature

Expand all
Inline Side-by-side
Showing 6 changed files with 65 additions and 35 deletions
......@@ -4,6 +4,8 @@ const app = express();
const path = require("path")
const server = http.createServer(app);
const socketIO = require("socket.io")
const moment = require("moment")
const io = socketIO(server);
......@@ -12,7 +14,12 @@ const PORT = process.env.PORT || 3000;
io.on('connection', (socket) => {
socket.on("chatting", (data)=>{
io.emit("chatting", data)
const { name, msg } = data;
io.emit("chatting", {
name,
msg,
time: moment.format("h:ss A")
})
})
});
......
This diff is collapsed. Click to expand it.
......@@ -4,12 +4,14 @@
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon ./app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dayjs": "^1.11.2",
"express": "^4.18.1",
"moment": "^2.29.3",
"socket.io": "^4.5.1"
......
......@@ -16,7 +16,7 @@ html, body {
}
.user-container {
background: #a9bdce;
background: rebeccapurple;
flex: 1;
display: flex;
justify-content: flex-start;
......@@ -24,19 +24,21 @@ html, body {
padding: 0.5rem;
}
.user-container label {
.user-container .nickname {
font-size : 14px;
margin-right : 1rem;
margin-right : 1.5rem;
margin-left : 1rem;
color:#fff;
}
.user-container input {
border-radius: 3px;
border: none;
height: 100%;
height: 80%;
}
.display-container {
background: #b2c7d9;
background: #D2D2FF;
flex : 12;
overflow-y:scroll;
}
......@@ -65,14 +67,15 @@ html, body {
.send-button {
flex:1;
background: #ffeb33;
background: rebeccapurple;
color:#fff;
border:none;
height:100%;
border-radius:3px;
}
.chatting-list li {
width:90%;
width:50%;
padding:0.3rem;
display:flex;
justify-content: flex-start;
......@@ -105,7 +108,7 @@ html, body {
padding: 0.5rem;
font-size: 12px;
margin: 0 5px;
flex: 7;
flex: 10;
}
.time {
......@@ -119,7 +122,8 @@ html, body {
}
.sent .message {
background: #ffeb33;
background: #9986EE;
color: #fff;
}
.received .message {
......
......@@ -10,27 +10,12 @@
<body>
<div class="wrapper">
<div class="user-container">
<lable for="nickname">대화명</lable>
<lable class="nickname" for="nickname">닉네임설정</lable>
<input type="text" id="nickname">
</div>
<div class="display-container">
<ul class="chatting-list">
<li class="sent">
<span class="profile">
<span class="user">깔깔</span>
<img class="image" src="https://placeimg.com/50/50/any" alt="any">
</span>
<span class="message">그래 반가워</span>
<span class="time">오후 2:10</span>
</li>
<li class="received">
<span class="profile">
<span class="user">깔깔</span>
<img class="image" src="https://placeimg.com/50/50/any" alt="any">
</span>
<span class="message">그래 반가워</span>
<span class="time">오후 2:10</span>
</li>
</ul>
</div>
<div class="input-container">
......@@ -41,7 +26,7 @@
</div>
</div>
<!-- <script src="/socket.io/socket.io.js"></script>
<script src="js/chat.js"></script> -->
<script src="/socket.io/socket.io.js"></script>
<script src="js/chat.js"></script>
</body>
</html>
\ No newline at end of file
......
......@@ -5,18 +5,50 @@ 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")
sendButton.addEventListener("click", ()=>{
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.on("chatting", (data)=>{
const li = document.createElement("li");
li.innerText = `${data.name}님이 - ${data.msg}`;
chatlist.appendChild(li)
console.log(data)
const {name, msg, time} = data;
const item = new LiModel(name, msg, time);
item.makeLi()
displayContainer.scrollTo(0, displayContainer.scrollHeight)
})
console.log(socket);
\ No newline at end of file
//console.log(socket);
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)
}
}
\ No newline at end of file
......