테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 13년 전 · 2461 · 1
서버/클라이언트 스크립트 코드 합쳐서 100줄이 안 되는 간단한 채팅 프로그램입니다.

npm install
npm start
open http://localhost:3000/


<<< 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'



목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

빅뱅1
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
좋은 정보 고맙습니다.

게시글 목록

번호 제목
16762
기타 [팁] subversion에서 해당 사용자의 로그를 보고싶을때
16759
JavaScript top.location.href= 에서 타켓 지정하는 방법은 어떻게 하나요> 2
16758
PHP 글 내용보기에서 주메뉴 오버시 서브 메뉴가 보이지 않네요.
16755
JavaScript 이동하는 글자 2
16752
JavaScript 자바스크립트 메뉴 문제입니다 2
16746
PHP PHP 속도 향상 팁 5
16743
JavaScript jQuery 드롭다운메뉴 2
30241
HTML HTML5 CSS3 애니메이션 롤오버메뉴 2
16739
PHP 이게 잘못된건가요? ㅋ 3
16737
PHP php 에서 문자,숫자 중복 없이 출력 관련 문의 입니다. 1
16735
PHP 정말 간단한 php 스크립트 한줄 짜주실분 없으신가요? ㅜ.ㅜ 1
16734
JavaScript 트리구조의 테이블에서 복수 선택한 값을 일괄 전달하는 프로그램을 만들려하는데요..
16725
기타 작업 완료하면 소스코드 주워야 하는건가요? 8
16723
PHP php4 -> php5버전 up문제 1
16721
기타 php 4와 php5의 호환성문의입니다 1
16720
Linux 파일이나 프로그램 모니터링하기
30235
HTML HTML5를 지원하지 않는 웹브라우저에 비디오,오디오 재생해주는 html5media 5
16716
jQuery jQuery Mobile에 대한 잘 정리된 사이트가 있을까요? 3
30228
HTML css 표그리는법좀 문의 드립니다. 아무리 찾아도..ㅠㅜ 6
16714
기타 보안이좋은 호스팅사는 어디인가요 1
30220
HTML ie6 이게 더블 마진이면 해결을 어떻게 해야하나요? 7
30218
HTML 드림위버 롤오버요~ 1
30210
HTML 요걸우째설명해야될지;;; 7
30206
HTML li 가로정렬 3
4077
홈페이지 제작 관련 계약서 작성시 인감도장 찍으시나요? 6
16713
PHP 만화 권당 클릭해서 팝업나타내는방법좀~
16711
JavaScript 만화 권당 팝업드는방법 알려주세요 1
30190
HTML 반응형 웹 디자인 (Responsive Web Design) 15
16710
jQuery jQuery 입력박스 툴팁 소스
30188
HTML HTML5의 요소들에 대한 여러 웹브라우저의 지원여부를 확인할 수 있는 사이트 1
16707
jQuery 초보입니다... 도와주세요 ㅠㅠ 2
26290
기획서 사업진행스케쥴표 13
30182
HTML 님들은 html5공부 어떻게 하셨나요? 5
16701
MySQL mysql select 질문점 굽신굽신 5
16698
JavaScript 고수님들 부탁드려요ㅠㅠㅠ 자바스크립트가 익스 6에선 먹히질 않습니다ㅠㅠㅠ 2
16691
Mobile 스마트폰에서 ip camera 영상 보는 방법 6
4074
익스7 8을 빼놓고는 다른브라우져에서는 모든페이지의 소스가 표출되어버립니다. 2
16687
jQuery 회원이 메뉴색 변경하는 소스 질문드립니다. 3
16685
Linux SSH로 sql 패치 방법 1
4070
특정유저 접근 금지 하는 방법이 뭐뭐 있을까요~ 3
16683
PHP xml 파싱 도움좀 주세요.. 1
30168
HTML CSS를 이용한 DIV 레이아웃 문의드립니다. 13
16682
MySQL MySQL For C API
30166
HTML HTML5 API Vocabulary 1
16680
Mobile 3g모드에서는 모바일 사이트가 연결이 안됨니다, wifi는 되는데요 .. 이게 무슨 일일가요? 1
16679
PHP 서버에 대해 다시 질문합니다 좀 도와주세요ㅠㅠ
16674
기타 IIS 'HTTP 오류 404'에 관련해서 질문입니다. 4
16671
MySQL mysql backup shell 2
16664
MySQL cron backup shell 6
30156
HTML css 로 레이아웃 컨트롤 9
16660
JavaScript input박스 길이문제 3
16657
PHP php에 대해 좀 뭔가 에러났으니 좀 도와주세요ㅠㅠ 2
24373
아직 한국에서의 기획은 13
16654
Linux 리눅스시스템 스와핑 줄이기 2
16653
PHP 페이지 개수를 정하고 싶어요
30150
HTML 백그라운드 이미지위에 swf파일이 안겹쳐져요. 5
16652
Linux Linux용 GUI SmoothWall Express - Open Source Firewall Project
16649
JavaScript 인자별 함수 실행 part2 2
4066
[Q] 일정시간 지나면 sh 수행하게 할려면 ? (kde) 3
16647
기타 아살달 아사보드에 있는 자료들을 그누보드로 옮길려고 하는데 .... 1
16646
MySQL mysql5.0으로 업데이트했는데
16643
JavaScript 인자별 함수 중복 실행 방법 2
16637
JavaScript 파이어 폭스 호환성질문...; 5
16634
PHP 음 애드센스 같은기능은 어떻에만드나요? 2
30148
HTML HTML5 기능들을 테스트해볼수 있는 데모 사이트 1
16633
MySQL varchar 를 255 자 초과하여 사용하려면
16629
JavaScript 스트립트 오류좀 봐주세요 ㅠㅠ 3
16627
PHP [수정]아파치 타임아웃 1
30138
HTML 웹표준 권고사항에 CSS 작성시, 대소문자 구분도 있나요? 9
16624
PHP 최근게시물(PHP) 클릭시 팝업창을 띄우는 방법..도와주세요ㅠㅠ 2
16622
node.js Node.js 윈도우 XP 에 설치하기 + node 채팅설치 1
16619
MySQL 애왜안될까요;;; 2
16618
Linux 저거 뭘까요?
30135
HTML submit 버튼 안 보이게 하면 이상할까요? 2
30128
HTML 이미지에 들어가는 여백없애는 방법.. 이거 고민이네요;; 6
16615
MySQL 이런젠장 값전달이 안되네요 2
30109
HTML 또 다시 기초적인 css (div) 질문드려요.. 18
16613
PHP form action에서 질문 좀 드려요..ㅠ.ㅠ 1
16611
MySQL mssql 중복 데이터 질문인데요 부탁좀 드릴꼐요 ㅜㅜ 계속 삽질이네요 1
16606
PHP cURL 등으로 다른 서버로 파일 포스팅시 리턴값 못받는 문제 문의입니다. 4
16605
JavaScript 이미지로 메뉴 만들었을때요 해당 페이지로 넘어갔을 경우 롤 오버 이미지로 나오게 하는 방법좀 알려주세요
16604
JavaScript 스크립트한번만봐주세요 ㅠ
16599
MySQL mysql 속도 문제.. 4
16594
Linux 모든 파일의 ^M문자를 제거하는 쉘스크립트 4
16593
Linux 외부에서 플래시를 참조하는 건지 먼지 좀 봐주세요
16589
Linux 제서버에 남은 웹로그인데 해킹인것같은데요..고수님 조언 부탁드려요 ㅠㅠ 3
16587
Linux rsyncd 에러메시지 잘 아시는분? ㅠㅠ 1
16572
PHP (최종) 시리얼번호 생성 함수 14
4047
php 열공중인 초짜 입니다. 전문적으로 php하시는 분들 순서도 만들어서 하시나요? 18
16566
PHP 간단한 자릿수의 소수 구하기 5
30107
HTML 가운데 정렬 상관없이 레이어 고정 하는 방법이요ㅜㅜ 1
16564
PHP 파일 다운로드 질문입니다,. 1
16561
Linux 서버호스팅쓰시는분들 phpmyadmin 업글하세요 2
16558
MySQL 콤마 어떻게 찍는지 좀 가르쳐 주세요. 2
16557
기타 페이스북 연동 사진 삭제 관련 질문입니다
16552
PHP (수정) 영문 대문자 포함 시리얼 생성 4
16548
PHP php 엑셀 데이터 저장 관련 문의드려용~ 3
16546
node.js node.js + CoffeeScript + Socket.IO + jQuery Mobile 1 현재글
16543
JavaScript 고수님들 중 이런 에러 보신적 있으신가요? 2
16526
PHP 영문 대문자 포함 시리얼 생성 16
이전 다음
전체 목록