unknown

chatdev

...@@ -53,6 +53,23 @@ app.use(session({ ...@@ -53,6 +53,23 @@ app.use(session({
53 saveUninitialized: true 53 saveUninitialized: true
54 })) 54 }))
55 55
56 +const sessionMiddleware = session({ secret: 'keyboard cat', cookie: { maxAge: 60000 }}); // 세션 미들웨어
57 +
58 +app.use(sessionMiddleware);
59 +
60 +io.use((socket, next) => {
61 + sessionMiddleware(socket.request, {}, next);
62 + // sessionMiddleware(socket.request, socket.request.res, next); will not work with websocket-only
63 + // connections, as 'socket.request.res' will be undefined in that case
64 + });
65 +
66 +
67 +io.on('connection', (socket) => {
68 + const session = socket.request.session;
69 + session.connections++;
70 + session.save();
71 + });
72 +
56 app.use(passport.initialize()) 73 app.use(passport.initialize())
57 app.use(passport.session()) 74 app.use(passport.session())
58 app.use(flash()) 75 app.use(flash())
...@@ -61,6 +78,10 @@ app.use(router) // router 정의 ...@@ -61,6 +78,10 @@ app.use(router) // router 정의
61 // Socket.io 78 // Socket.io
62 io.sockets.on('connection', function(socket) { 79 io.sockets.on('connection', function(socket) {
63 80
81 + const session = socket.request.session;
82 + session.connections++;
83 + session.save();
84 +
64 /* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */ 85 /* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */
65 socket.on('newUser', function(name) { 86 socket.on('newUser', function(name) {
66 console.log(name + ' 님이 접속하였습니다.') 87 console.log(name + ' 님이 접속하였습니다.')
......
1 +/* 메인 */
2 +#main {
3 + margin: auto;
4 + margin-top: 100px;
5 + border-radius: 20px;
6 + background-color: lightblue;
7 + text-align: center;
8 + width: 500px;
9 + height: 800px;
10 + }
11 +
12 + /* 채팅 영역 */
13 + #chat {
14 + height: 90%;
15 + width: 100%;
16 + overflow-y: auto;
17 + }
18 +
19 + /* 접속 알림 */
20 + .connect {
21 + width: 90%;
22 + margin: auto;
23 + background-color: aquamarine;
24 + text-align: center;
25 + margin-top: 10px;
26 + }
27 +
28 + /* 접속 종료 알림 */
29 + .disconnect {
30 + width: 90%;
31 + margin: auto;
32 + background-color: indianred;
33 + text-align: center;
34 + margin-top: 10px;
35 + }
36 +
37 + /* 내가 보낸 메시지 */
38 + .me {
39 + width: 90%;
40 + margin: auto;
41 + background-color: lemonchiffon;
42 + border-radius: 5px;
43 + margin-top: 10px;
44 + }
45 +
46 + /* 상대방이 보낸 메시지 */
47 + .other {
48 + width: 90%;
49 + margin: auto;
50 + background-color: white;
51 + border-radius: 5px;
52 + margin-top: 10px;
53 + }
...\ No newline at end of file ...\ No newline at end of file
1 +var socket = io()
2 +
3 +/* 접속 되었을 때 실행 */
4 +socket.on('connect', function() {
5 + /* 이름을 입력받고 */
6 + var name = session.nickname;
7 +
8 + /* 서버에 새로운 유저가 왔다고 알림 */
9 + socket.emit('newUser', name)
10 +})
11 +
12 +/* 서버로부터 데이터 받은 경우 */
13 +socket.on('update', function(data) {
14 + var chat = document.getElementById('chat')
15 +
16 + var message = document.createElement('div')
17 + var node = document.createTextNode(`${data.name}: ${data.message}`)
18 + var className = ''
19 +
20 + // 타입에 따라 적용할 클래스를 다르게 지정
21 + switch(data.type) {
22 + case 'message':
23 + className = 'other'
24 + break
25 +
26 + case 'connect':
27 + className = 'connect'
28 + break
29 +
30 + case 'disconnect':
31 + className = 'disconnect'
32 + break
33 + }
34 +
35 + message.classList.add(className)
36 + message.appendChild(node)
37 + chat.appendChild(message)
38 +})
39 +
40 +/* 메시지 전송 함수 */
41 +function send() {
42 + // 입력되어있는 데이터 가져오기
43 + var message = document.getElementById('test').value
44 +
45 + // 가져왔으니 데이터 빈칸으로 변경
46 + document.getElementById('test').value = ''
47 +
48 + // 내가 전송할 메시지 클라이언트에게 표시
49 + var chat = document.getElementById('chat')
50 + var msg = document.createElement('div')
51 + var node = document.createTextNode(message)
52 + msg.classList.add('me')
53 + msg.appendChild(node)
54 + chat.appendChild(msg)
55 +
56 + // 서버로 message 이벤트 전달 + 데이터와 함께
57 + socket.emit('message', {type: 'message', message: message})
58 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,7 +9,7 @@ router.get('/', function(req, res){ ...@@ -9,7 +9,7 @@ router.get('/', function(req, res){
9 var id = req.user; 9 var id = req.user;
10 if(!id) res.sendFile(path.join(__dirname, "../../public/login.html")) 10 if(!id) res.sendFile(path.join(__dirname, "../../public/login.html"))
11 if(id){ 11 if(id){
12 - res.render('chat.ejs', {}) 12 + res.render('chat.ejs', {'nickname':id.nickname})
13 } 13 }
14 }); 14 });
15 15
......
...@@ -31,7 +31,7 @@ var connection = mysql.createConnection({ ...@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
31 port : 3306, 31 port : 3306,
32 user: 'root', 32 user: 'root',
33 password : '', 33 password : '',
34 - database : 'userdb' 34 + database : 'singer_composer'
35 }) 35 })
36 connection.connect(); 36 connection.connect();
37 37
......
...@@ -31,7 +31,7 @@ var connection = mysql.createConnection({ ...@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
31 port : 3306, 31 port : 3306,
32 user: 'root', 32 user: 'root',
33 password : '', 33 password : '',
34 - database : 'userdb' 34 + database : 'singer_composer'
35 }) 35 })
36 connection.connect(); 36 connection.connect();
37 37
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="en"> 2 +<html>
3 -<head> 3 + <head>
4 - <meta charset="UTF-8"> 4 + <meta charset="utf-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 + <title>채팅</title>
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 + <link rel="stylesheet" href="/css/chat.css">
7 - <title>Document</title> 7 + <script src="/socket.io/socket.io.js"></script>
8 -</head> 8 + <script src="/js/chat.js"></script>
9 -<body> 9 + <link href="../css/styles.css" rel="stylesheet" />
10 - 10 + </head>
11 -</body> 11 + <body>
12 + <nav class="navbar navbar-light bg-light static-top">
13 + <div class="container">
14 + <a class="navbar-brand" href="/main">묵호의 놀이터</a>
15 + <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
16 + <li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
17 + <li><a href="/board/list" class="nav-link px-2 link-dark">게시판</a></li>
18 + <li><a href="/chat" class="nav-link px-2 link-dark">채팅</a></li>
19 + <li><a href="http://khuhub.khu.ac.kr/2017104034/Singer-Composer" target="_blank" class="nav-link px-2 link-dark">사이트 git</a></li>
20 + </ul>
21 + <div class="user">
22 + <a href = "/profile"> <%=nickname%></a><a>님 안녕하세요</a>
23 + <a class="btn btn-primary" href="/logout">로그아웃</a>
24 + </div>
25 + </div>
26 + </nav>
27 + <div id="main">
28 + <div id="chat">
29 + <!-- 채팅 메시지 영역 -->
30 + </div>
31 + <div>
32 + <input type="text" id="test" placeholder="메시지를 입력해주세요..">
33 + <button onclick="send()">전송</button>
34 + </div>
35 + </div>
36 + <footer class="footer bg-light">
37 + <div class="container">
38 + <div class="row">
39 + <div class="col-lg-6 h-100 text-center text-lg-start my-auto">
40 + <ul class="list-inline mb-2">
41 + <li class="list-inline-item"><a href="/about">About</a></li>
42 + <li class="list-inline-item"></li>
43 + <li class="list-inline-item"><a href="http://khuhub.khu.ac.kr/2017104034/Singer-Composer" target="_blank">사이트 git</a></li>
44 + <li class="list-inline-item"></li>
45 + <li class="list-inline-item"><a href="http://ce.khu.ac.kr/">경희대학교 컴퓨터공학과</a></li>
46 + <li class="list-inline-item"></li>
47 + <li class="list-inline-item"><a href="http://geo.khu.ac.kr/">경희대학교 지리학과</a></li>
48 + </ul>
49 + <p class="text-muted small mb-4 mb-lg-0">&copy; Mukho 2021. All Rights Reserved.</p>
50 + </div>
51 + <div class="col-lg-6 h-100 text-center text-lg-end my-auto">
52 + <ul class="list-inline mb-0">
53 + <li class="list-inline-item me-4">
54 + <a href="#!"><i class="bi-facebook fs-3"></i></a>
55 + </li>
56 + <li class="list-inline-item me-4">
57 + <a href="#!"><i class="bi-twitter fs-3"></i></a>
58 + </li>
59 + <li class="list-inline-item">
60 + <a href="#!"><i class="bi-instagram fs-3"></i></a>
61 + </li>
62 + </ul>
63 + </div>
64 + </div>
65 + </div>
66 + </footer>
67 + </body>
12 </html> 68 </html>
...\ No newline at end of file ...\ No newline at end of file
......