Toggle navigation
Toggle navigation
This project
Loading...
Sign in
최시원
/
Singer-Composer
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
unknown
2021-11-23 01:23:01 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
272e28e8c52d1fa8446b288b1773dfed65d321f2
272e28e8
1 parent
e654fdc8
chatdev
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
201 additions
and
13 deletions
app.js
css/chat.css
js/chat.js
router/chat/chat.js
router/login/index.js
router/register/index.js
views/chat.ejs
app.js
View file @
272e28e
...
...
@@ -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
+
' 님이 접속하였습니다.'
)
...
...
css/chat.css
0 → 100644
View file @
272e28e
/* 메인 */
#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
js/chat.js
0 → 100644
View file @
272e28e
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
router/chat/chat.js
View file @
272e28e
...
...
@@ -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
})
}
});
...
...
router/login/index.js
View file @
272e28e
...
...
@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
port
:
3306
,
user
:
'root'
,
password
:
''
,
database
:
'
userdb
'
database
:
'
singer_composer
'
})
connection
.
connect
();
...
...
router/register/index.js
View file @
272e28e
...
...
@@ -31,7 +31,7 @@ var connection = mysql.createConnection({
port
:
3306
,
user
:
'root'
,
password
:
''
,
database
:
'
userdb
'
database
:
'
singer_composer
'
})
connection
.
connect
();
...
...
views/chat.ejs
View file @
272e28e
<!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"
>
©
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
...
...
Please
register
or
login
to post a comment