이전
목록
다음
아

node.js + CoffeeScript + Socket.IO + jQuery Mobile

아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-03-22 (목) 15:20:50 · 4756 · 1
서버/클라이언트 스크립트 코드 합쳐서 100줄이 안 되는 간단한 채팅 프로그램입니다.

npm install
npm start


<<< package.json >>>
{
    "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'



#개발자팁 #개발자 #팁자료실 #node.js
|

댓글 1개

빅뱅1
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-04-23 (월) 11:42:23
좋은 정보 고맙습니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-02-26 조회 3,149
12-02-26 조회 3,462
12-02-26 조회 3,316
12-02-26 조회 3,398
12-02-26 조회 3,435
12-02-26 조회 3,283
12-02-26 조회 3,604
12-02-26 조회 3,427
12-02-26 조회 3,507
12-02-26 조회 3,983
12-02-26 조회 2,940
12-02-26 조회 5,135
12-02-25 조회 2,689
12-02-25 조회 3,158
12-02-24 조회 2,868
12-02-24 조회 3,263
12-02-24 조회 3,234
12-02-24 조회 3,551
12-02-24 조회 3,101
12-02-24 조회 3,884
12-02-24 조회 3,858
12-02-24 조회 3,452
12-02-24 조회 9,320
12-02-23 조회 2,837
12-02-23 조회 3,280
12-02-23 조회 3,199
12-02-23 조회 3,128
12-02-23 조회 3,752
12-02-23 조회 2,837
12-02-23 조회 3,331
12-02-23 조회 3,009
12-02-23 조회 2,764
12-02-22 조회 3,649
12-02-22 조회 5,410
12-02-22 조회 2,971
12-02-22 조회 4,378
12-02-22 조회 3,260
12-02-22 조회 3,088
12-02-22 조회 3,984
12-02-22 조회 3,884
12-02-22 조회 2,821
12-02-22 조회 3,860
12-02-22 조회 4,304
12-02-22 조회 3,722
12-02-22 조회 2,901
12-02-22 조회 4,547
12-02-21 조회 3,111
12-02-21 조회 2,886
12-02-21 조회 2,795
12-02-21 조회 3,696
12-02-21 조회 3,938
12-02-21 조회 3,370
12-02-21 조회 2,895
12-02-20 조회 3,138
12-02-20 조회 3,767
12-02-20 조회 3,709
12-02-20 조회 2,995
12-02-20 조회 5,777
12-02-20 조회 3,576
12-02-20 조회 6,788
12-02-20 조회 3,180
12-02-20 조회 4,154
12-02-19 조회 3,349
12-02-18 조회 3,085
12-02-18 조회 3,806
12-02-17 조회 2,935
12-02-17 조회 4,125
12-02-17 조회 3,027
12-02-17 조회 3,578
12-02-17 조회 3,347
12-02-17 조회 6,197
12-02-17 조회 4,401
12-02-17 조회 3,023
12-02-17 조회 3,055
12-02-17 조회 3,431
12-02-16 조회 3,257
12-02-16 조회 3,308
12-02-16 조회 4,680
12-02-16 조회 2,917
12-02-16 조회 5,305
12-02-16 조회 5,044
12-02-15 조회 3,605
12-02-15 조회 3,234
12-02-15 조회 4,766
12-02-15 조회 3,263
12-02-15 조회 3,649
12-02-15 조회 2,733
12-02-15 조회 4,005
12-02-14 조회 3,501
12-02-14 조회 3,620
12-02-14 조회 4,042
12-02-14 조회 3,074
12-02-14 조회 6,149
12-02-14 조회 3,088
12-02-14 조회 4,119
12-02-13 조회 3,388
12-02-13 조회 3,009
12-02-13 조회 7,167
12-02-12 조회 2,845
12-02-12 조회 5,218
글쓰기