서버/클라이언트 스크립트 코드 합쳐서 100줄이 안 되는 간단한 채팅 프로그램입니다.
npm install
npm start
open http://localhost:3000/
{
"name": "mobile_chat",
"version": "1.0.0",
"description": "Mobile chatting",
"main": "./app.js",
"dependencies": {
"express": ">= 2.5",
"socket.io": ">= 0.9.2"
},
"scripts": {
"start": "forever start -c coffee app.coffee",
"stop": "forever stop -c coffee app.coffee"
}
}
<<< app.coffee >>>
express = require 'express'
app = express.createServer()
app.configure ->
app.use express.static(__dirname + '/public')
app.get '/', (req, res) ->
res.sendfile(__dirname + '/views/index.html')
io = require('socket.io').listen(app)
io.sockets.on 'connection', (socket) ->
console.log '* CONNECT'
socket.on 'enter', (data) ->
username = data.username.trim()
if username
console.log "* ENTER: #{username}"
socket.username = username
socket.emit 'enter'
io.sockets.emit 'talk',
message: "[ENTER] #{username}"
socket.on 'leave', (data) ->
console.log "* LEAVE: #{socket.username}"
socket.broadcast.emit 'talk',
message: "[LEAVE] #{socket.username}"
delete socket.username
socket.on 'talk', (data) ->
console.log "* TALK: #{data.message}"
io.sockets.emit 'talk',
message: "#{socket.username}: #{data.message}"
socket.on 'disconnect', (data) ->
console.log "* DISCONNECT: #{socket?.username}"
if socket.username
socket.broadcast.emit 'talk',
message: "[DISCONNECT] #{socket.username}"
app.listen 3000
console.log "Express server listening on port #{app.address().port}"
<<< views/index.html >>>
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta charset="utf-8">
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" />
<link href="/css/stylesheet.less" rel="stylesheet" type="text/less" />
<script src="http://lesscss.org/js/less.js" type="text/javascript"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="/js/application.coffee" type="text/coffeescript"></script>
</head>
<body>
<section id="loading" data-role="page">
Loading...
</section>
<section id="home" data-role="page">
<header data-role="header">
<h1>Chat</h1>
</header>
<div data-role="content">
<p>Welcome!</p>
<form>
<input type="text" name="username" placeholder="Username" />
<input type="submit" value="Enter" />
</form>
</div>
</section>
<section id="chat" data-role="page">
<header data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-direction="reverse">Back</a>
<h1>Chat room</h1>
</header>
<div data-role="content">
<div id="chat-area">
----
</div>
<form>
<input type="text" name="message" placeholder="Input here" />
<input type="submit" value="Send" />
</form>
</div>
</section>
</body>
</html>
<<< public/css/stylesheet.less >>>
#chat-area {
height: 200px;
overflow-y: scroll;
word-wrap: break-word;
}
<<< public/js/application.coffee >>>
$ ->
socket = io.connect('http://localhost')
socket.on 'disconnect', (data) ->
$.mobile.changePage '#home',
transition: 'flip'
socket.on 'enter', (data) ->
$('#chat-area').text('')
$.mobile.changePage '#chat',
transition: 'flip'
socket.on 'talk', (data) ->
message = $('<p></p>').text(data.message)
$('#chat-area').append(message)
.scrollTop($('#chat-area').prop('scrollHeight'))
$('#home').on 'submit', 'form', ->
socket.emit 'enter',
username: $('#home').find('input[name=username]').val()
false
$('#chat').on 'submit', 'form', ->
socket.emit 'talk',
message: $('#chat').find('input[name=message]').val()
this.reset()
false
$('#chat').on 'click', 'a[href=#home]', ->
socket.emit 'leave'
$.mobile.changePage '#home',
transition: 'pop'
댓글 1개
13년 전
좋은 정보 고맙습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 630 | 19년 전 | 2364 | ||
| 629 |
 ⓦangcho |
19년 전 | 2027 | |
| 628 |
ⓦangcho |
19년 전 | 3140 | |
| 627 |
ⓦangcho |
19년 전 | 2045 | |
| 626 |
ⓦangcho |
19년 전 | 2074 | |
| 625 |
ⓦangcho |
19년 전 | 1734 | |
| 624 |
ⓦangcho |
19년 전 | 2243 | |
| 623 | 19년 전 | 2214 | ||
| 622 |
 뜨락의이름 |
19년 전 | 2521 | |
| 621 |
ⓦangcho |
19년 전 | 2928 | |
| 620 |
ⓦangcho |
19년 전 | 2422 | |
| 619 | 19년 전 | 2493 | ||
| 618 | 19년 전 | 3521 | ||
| 617 |
 Elbis |
19년 전 | 3243 | |
| 616 |
Elbis |
19년 전 | 3235 | |
| 615 |
Elbis |
19년 전 | 3060 | |
| 614 |
Elbis |
19년 전 | 2056 | |
| 613 |
Elbis |
19년 전 | 2406 | |
| 612 |
Elbis |
19년 전 | 2255 | |
| 611 |
Elbis |
19년 전 | 2096 | |
| 610 |
Elbis |
19년 전 | 2531 | |
| 609 |
Elbis |
19년 전 | 2439 | |
| 608 |
Elbis |
19년 전 | 2829 | |
| 607 | 19년 전 | 2204 | ||
| 606 | 19년 전 | 3547 | ||
| 605 | 19년 전 | 2007 | ||
| 604 | 19년 전 | 2630 | ||
| 603 | 19년 전 | 1629 | ||
| 602 |
 Dream |
19년 전 | 2851 | |
| 601 | 19년 전 | 3082 | ||
| 600 |
 빨간망토의비밀 |
19년 전 | 2159 | |
| 599 | 19년 전 | 2011 | ||
| 598 | 19년 전 | 2498 | ||
| 597 | 19년 전 | 2408 | ||
| 596 |
ⓦangcho |
19년 전 | 3086 | |
| 595 |
ⓦangcho |
19년 전 | 6773 | |
| 594 | 19년 전 | 2720 | ||
| 593 | 19년 전 | 3195 | ||
| 592 |
 damoa.biz |
19년 전 | 3098 | |
| 591 |
ⓦangcho |
19년 전 | 1947 | |
| 590 | 19년 전 | 3373 | ||
| 589 | 19년 전 | 2226 | ||
| 588 |
ⓦangcho |
19년 전 | 2712 | |
| 587 | 19년 전 | 2355 | ||
| 586 |
 cunic |
19년 전 | 4377 | |
| 585 | 19년 전 | 2510 | ||
| 584 | 19년 전 | 2773 | ||
| 583 |
ⓦangcho |
19년 전 | 3539 | |
| 582 |
ⓦangcho |
19년 전 | 3730 | |
| 581 |
ⓦangcho |
19년 전 | 3267 | |
| 580 | 19년 전 | 2498 | ||
| 579 | 19년 전 | 3105 | ||
| 578 | 19년 전 | 4015 | ||
| 577 | 19년 전 | 3841 | ||
| 576 | 19년 전 | 1786 | ||
| 575 |
ⓦangcho |
19년 전 | 2238 | |
| 574 |
 happycommunity |
19년 전 | 5416 | |
| 573 | 19년 전 | 6748 | ||
| 572 | 19년 전 | 2589 | ||
| 571 | 19년 전 | 2122 | ||
| 570 | 19년 전 | 2614 | ||
| 569 | 19년 전 | 3328 | ||
| 568 | 19년 전 | 3552 | ||
| 567 | 19년 전 | 2991 | ||
| 566 | 19년 전 | 2612 | ||
| 565 |
ⓦangcho |
19년 전 | 4738 | |
| 564 |
ⓦangcho |
19년 전 | 6747 | |
| 563 |
ⓦangcho |
19년 전 | 5022 | |
| 562 |
ⓦangcho |
19년 전 | 5966 | |
| 561 |
ⓦangcho |
19년 전 | 2716 | |
| 560 |
ⓦangcho |
19년 전 | 2577 | |
| 559 |
ⓦangcho |
19년 전 | 2244 | |
| 558 |
ⓦangcho |
19년 전 | 2316 | |
| 557 | 19년 전 | 4599 | ||
| 556 |
 Photofly |
19년 전 | 4678 | |
| 555 | 19년 전 | 2520 | ||
| 554 | 19년 전 | 2189 | ||
| 553 | 19년 전 | 2534 | ||
| 552 |
Photofly |
19년 전 | 3184 | |
| 551 | 19년 전 | 2952 | ||
| 550 |
Elbis |
19년 전 | 1907 | |
| 549 |
Elbis |
19년 전 | 1979 | |
| 548 |
Elbis |
19년 전 | 3160 | |
| 547 |
Elbis |
19년 전 | 2362 | |
| 546 |
Elbis |
19년 전 | 3635 | |
| 545 |
Elbis |
19년 전 | 2572 | |
| 544 |
Elbis |
19년 전 | 1871 | |
| 543 |
Elbis |
19년 전 | 2468 | |
| 542 |
Elbis |
19년 전 | 1741 | |
| 541 |
Elbis |
19년 전 | 1422 | |
| 540 |
Elbis |
19년 전 | 1563 | |
| 539 |
Elbis |
19년 전 | 1815 | |
| 538 |
Elbis |
19년 전 | 1604 | |
| 537 |
Elbis |
19년 전 | 1806 | |
| 536 |
Elbis |
19년 전 | 1574 | |
| 535 |
Elbis |
19년 전 | 1965 | |
| 534 |
Elbis |
19년 전 | 1856 | |
| 533 |
Elbis |
19년 전 | 1468 | |
| 532 |
Elbis |
19년 전 | 1454 | |
| 531 |
Elbis |
19년 전 | 1376 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기