Skip to content

Commit ae506fc

Browse files
author
dodortus
committed
* add chat start
0 parents  commit ae506fc

File tree

6 files changed

+189
-0
lines changed

6 files changed

+189
-0
lines changed

‎config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"webserver": {
3+
"host": "localhost",
4+
"port": 2016
5+
}
6+
}

‎contents/css/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@charset "utf-8";
2+
3+
* { margin: 0; padding: 0; font-weight: 300; }
4+
body {
5+
position: relative; height: 100%;
6+
margin: 0; padding: 1em; word-break: break-word;
7+
font-family: Malgun Gothic, Dotum, AppleGothic, Arial, Sans-serif; font-size: 16px;
8+
}
9+
footer { margin: 30px 0; padding: 20px 0; text-align: center; border-top: solid 1px #ebebeb; }
10+
footer a { color: #000; }
11+
footer a:hover { text-decoration: underline; }
12+
13+
.hidden { display: none }
14+
a { color: #6fa8dc; font-weight: 300; text-decoration: none; }
15+
.btn,
16+
button {
17+
background-color: #d84a38; border: none; border-radius: 2px; color: white;
18+
font-size: 0.8em; margin: 0 0 1em 0; padding: 0.6em 0.7em 0.6em 0.7em; cursor: pointer;
19+
}
20+
.btn:active,
21+
.btn:hover,
22+
button:active,
23+
button:hover { background-color: #cf402f; }
24+
.btn[disabled],
25+
button[disabled] { color: #ccc; cursor: default; }
26+
.btn[disabled]:hover,
27+
button[disabled]:hover { background-color: #d84a38 }
28+
h1 {
29+
border-bottom: 1px solid #ccc; height: 50px; line-height: 50px;
30+
font-weight: bold; margin: 0; padding: 0 0 0.2em 0;
31+
}
32+
h1 a { font-weight: 300; margin: 0 10px 0 0; white-space: nowrap; }
33+
34+
#wrap {
35+
position: relative; width: 600px; margin: 200px auto; font-size: 1.2em; text-align: center;
36+
}
37+
input[type="text"] { padding: 2px 5px; border: solid 1px #bbb; font-size: 1.3em; width: 120px; }
38+
#your-name { width: 250px; }
39+
#wrap button { vertical-align: top; min-width: 80px; }
40+
#wrap p { margin: 10px 0; }
41+
42+
header { position: relative; margin-bottom: 10px; }
43+
44+
/* chat */
45+
#chat-wrap { margin: 0 auto; width: 300px; }
46+
#chat-wrap input[type="text"] {
47+
width: 200px; font-size: 14px; padding: 6px; background: rgba(255,255,255,0.8); font-family: inherit;
48+
}
49+
#chat-content {
50+
padding: 10px; margin-bottom: 5px; height: 300px;
51+
overflow-y: auto; border: solid 1px #ccc; background: rgba(255,255,255,0.8);
52+
}
53+
54+
#chat-content li { clear: both; margin-bottom: 8px; padding-bottom: 1px; height: auto; overflow: hidden; }
55+
#chat-content li * { padding: 2px 5px; font-size: 10px; display: inline-block; }
56+
#chat-content .name { background: #333; color: #fff; border-radius: 3px; vertical-align: top; }
57+
#chat-content .message {
58+
max-width: 170px; font-size: 12px; background: #E5F1FB; border-radius: 3px; color: #000;
59+
box-shadow: 1px 1px 0 rgba(80, 80, 80, 0.3);
60+
}
61+
#chat-content .message .date {
62+
padding: 2px 0; margin-top: 5px; border-top: dotted 1px #fff; color: #666; font-size: 10px;
63+
}
64+
#chat-content .me * { float: right; }
65+
#chat-content .me .name { margin-left: 5px; }
66+
#chat-content .me .message { background-color: rgba(243, 178, 176, 0.3); }
67+
#chat-content .notice { margin: 0 0 8px; font-size: 0.8em; }
68+

‎contents/js/base.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*!
2+
*
3+
* Simple Chatting - base.js
4+
* @author codeJS (codejs.co.kr / dodortus@gmail.com)
5+
*
6+
*/
7+
$(function() {
8+
var socket = io();
9+
var $msgInput = $('#message');
10+
11+
$('form').submit(function() {
12+
socket.emit('message', $msgInput.val());
13+
$msgInput.val('');
14+
return false;
15+
});
16+
17+
socket.on('message', function(msg) {
18+
console.log('message', msg);
19+
$('#chat-content').append($('<li/>').text(msg));
20+
});
21+
});

‎package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"author": "dodortus",
3+
"name": "simple-chatting",
4+
"version": "0.0.1",
5+
"description": "nodejs simple chatting.",
6+
"dependencies": {
7+
"express": "4.13.*",
8+
"ejs": "2.4.*",
9+
"socketio": "1.4.*"
10+
},
11+
"engine": {
12+
"node": "0.12.x"
13+
}
14+
}

‎server.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var express = require('express')
2+
, app = express()
3+
, config = require('./config.json')
4+
, http = require('http').Server(app)
5+
, io = require('socket.io')(http);
6+
7+
app.engine('html', require('ejs').renderFile);
8+
app.set('views', __dirname + '/views');
9+
10+
app.get('/', function(req, res) {
11+
res.render('index.html', {
12+
title: "Main"
13+
});
14+
});
15+
16+
// socket
17+
io.on('connection', function(socket){
18+
console.log('a user connected');
19+
socket.broadcast.emit('');
20+
21+
socket.on('message', function(msg) {
22+
console.log('message: ' + msg);
23+
io.emit('message', msg);
24+
});
25+
});
26+
27+
// static 은 view 선언 다음에 사용
28+
app.use(express.static(__dirname + '/contents'));
29+
30+
// server listen start
31+
http.listen(config.webserver.port, function() {
32+
console.log('Simple Chatting server running at ' + config.webserver.host + ':' + config.webserver.port);
33+
});

‎views/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<title>Simple Chatting - <%= title %></title>
7+
<meta name="description" content="" />
8+
<meta name="author" content="Administrator" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="/css/style.css" type="text/css" rel="stylesheet" media="screen" />
11+
</head>
12+
<body>
13+
<header>
14+
<h1>Simple Chatting</h1>
15+
</header>
16+
17+
<div id="wrap">
18+
<section id="lobby">
19+
<button id="create-room" type="button">Create</button><br>
20+
<input type="text" id="your-name" placeholder="Your name" />
21+
<button id="join-room" type="button">Join</button>
22+
</section>
23+
24+
<section id="room">
25+
<div id="chat-wrap">
26+
<ul id="chat-content">
27+
<li class="notice">※ Welcome! ※ </li>
28+
</ul>
29+
30+
<form method="post" action="#">
31+
<input type="hidden" name="name" id="name" value="정식">
32+
<input type="text" name="message" id="message" value="" placeholder="메시지를 입력해 주세요.">
33+
<button type="submit">전송</button>
34+
</form>
35+
</div>
36+
</section>
37+
</div>
38+
39+
<footer>
40+
<p><a href="https://github.com/dodortus" target="_blank">© Copyright by codeJS</a></p>
41+
</footer>
42+
43+
<script src="//cdn.socket.io/socket.io-1.4.5.js"></script>
44+
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
45+
<script src="/js/base.js"></script>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)