최시원 / Singer-Composer

Go to a project
Toggle navigation Toggle navigation pinning
unknown
272e28e8 1 parent e654fdc8

chatdev

Inline Side-by-side
Showing 7 changed files with 201 additions and 13 deletions
......@@ -53,6 +53,23 @@ app.use(session({
saveUninitialized: true
}))
const sessionMiddleware = session({ secret: 'keyboard cat', cookie: { maxAge: 60000 }}); // 세션 미들웨어
app.use(sessionMiddleware);
io.use((socket, next) => {
sessionMiddleware(socket.request, {}, next);
// sessionMiddleware(socket.request, socket.request.res, next); will not work with websocket-only
// connections, as 'socket.request.res' will be undefined in that case
});
io.on('connection', (socket) => {
const session = socket.request.session;
session.connections++;
session.save();
});
app.use(passport.initialize())
app.use(passport.session())
app.use(flash())
......@@ -61,6 +78,10 @@ app.use(router) // router 정의
// Socket.io
io.sockets.on('connection', function(socket) {
const session = socket.request.session;
session.connections++;
session.save();
/* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */
socket.on('newUser', function(name) {
console.log(name + ' 님이 접속하였습니다.')
......
/* 메인 */
#main {
margin: auto;
margin-top: 100px;
border-radius: 20px;
background-color: lightblue;
text-align: center;
width: 500px;
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;
}
\ No newline at end of file
var socket = io()
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
/* 이름을 입력받고 */
var name = session.nickname;
/* 서버에 새로운 유저가 왔다고 알림 */
socket.emit('newUser', name)
})
/* 서버로부터 데이터 받은 경우 */
socket.on('update', function(data) {
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)
message.appendChild(node)
chat.appendChild(message)
})
/* 메시지 전송 함수 */
function send() {
// 입력되어있는 데이터 가져오기
var message = document.getElementById('test').value
// 가져왔으니 데이터 빈칸으로 변경
document.getElementById('test').value = ''
// 내가 전송할 메시지 클라이언트에게 표시
var chat = document.getElementById('chat')
var msg = document.createElement('div')
var node = document.createTextNode(message)
msg.classList.add('me')
msg.appendChild(node)
chat.appendChild(msg)
// 서버로 message 이벤트 전달 + 데이터와 함께
socket.emit('message', {type: 'message', message: message})
}
\ No newline at end of file
......@@ -9,7 +9,7 @@ router.get('/', function(req, res){
var id = req.user;
if(!id) res.sendFile(path.join(__dirname, "../../public/login.html"))
if(id){
res.render('chat.ejs', {})
res.render('chat.ejs', {'nickname':id.nickname})
}
});
......
......@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
port : 3306,
user: 'root',
password : '',
database : 'userdb'
database : 'singer_composer'
})
connection.connect();
......
......@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
port : 3306,
user: 'root',
password : '',
database : 'userdb'
database : 'singer_composer'
})
connection.connect();
......
<!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>
</head>
<body>
</body>
<html>
<head>
<meta charset="utf-8">
<title>채팅</title>
<link rel="stylesheet" href="/css/chat.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/js/chat.js"></script>
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board/list" class="nav-link px-2 link-dark">게시판</a></li>
<li><a href="/chat" class="nav-link px-2 link-dark">채팅</a></li>
<li><a href="http://khuhub.khu.ac.kr/2017104034/Singer-Composer" target="_blank" class="nav-link px-2 link-dark">사이트 git</a></li>
</ul>
<div class="user">
<a href = "/profile"> <%=nickname%></a><a>님 안녕하세요</a>
<a class="btn btn-primary" href="/logout">로그아웃</a>
</div>
</div>
</nav>
<div id="main">
<div id="chat">
<!-- 채팅 메시지 영역 -->
</div>
<div>
<input type="text" id="test" placeholder="메시지를 입력해주세요..">
<button onclick="send()">전송</button>
</div>
</div>
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-start my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item"><a href="/about">About</a></li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item"><a href="http://khuhub.khu.ac.kr/2017104034/Singer-Composer" target="_blank">사이트 git</a></li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item"><a href="http://ce.khu.ac.kr/">경희대학교 컴퓨터공학과</a></li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item"><a href="http://geo.khu.ac.kr/">경희대학교 지리학과</a></li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">&copy; Mukho 2021. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-end my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item me-4">
<a href="#!"><i class="bi-facebook fs-3"></i></a>
</li>
<li class="list-inline-item me-4">
<a href="#!"><i class="bi-twitter fs-3"></i></a>
</li>
<li class="list-inline-item">
<a href="#!"><i class="bi-instagram fs-3"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
\ No newline at end of file
......