chatdev

@@ -53,6 +53,23 @@ app.use(session({
    saveUninitialized: true
    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.initialize())
 app.use(passport.session())
 app.use(passport.session())
 app.use(flash())
 app.use(flash())
@@ -61,6 +78,10 @@ app.use(router) // router 정의
 // Socket.io
 // Socket.io
 io.sockets.on('connection', function(socket) {
 io.sockets.on('connection', function(socket) {
 
 
+    const session = socket.request.session;
+    session.connections++;
+    session.save();
+    
     /* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */
     /* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */
     socket.on('newUser', function(name) {
     socket.on('newUser', function(name) {
         console.log(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;
     var id = req.user;
     if(!id) res.sendFile(path.join(__dirname, "../../public/login.html"))
     if(!id) res.sendFile(path.join(__dirname, "../../public/login.html"))
     if(id){
     if(id){
-            res.render('chat.ejs', {})
+            res.render('chat.ejs', {'nickname':id.nickname})
     }
     }
 });
 });
 
 

@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
     port : 3306,
     port : 3306,
     user: 'root',
     user: 'root',
     password : '',
     password : '',
-    database : 'userdb'
+    database : 'singer_composer'
 })
 })
 connection.connect();
 connection.connect();
 
 

@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
     port : 3306,
     port : 3306,
     user: 'root',
     user: 'root',
     password : '',
     password : '',
-    database : 'userdb'
+    database : 'singer_composer'
 })
 })
 connection.connect();
 connection.connect();
 
 

 <!DOCTYPE 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>
-</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>
 </html>
\ No newline at end of file