심재운 블로그

728x90
반응형


node.js 를 설치를 먼저 하고 옵니다.


http://aspdotnet.tistory.com/1849


express 를 설치 할 예정입니다. 먼저 폴더 nodesample 을 만들어서 거기에서 npm init 를 통해 package.json 을 생성합니다.

그 다음, npm 을 통해 express 를 설치 합니다. npm install --save express



sim-ui-MacBook-Air:~ shimjaewoon$ mkdir nodesample

sim-ui-MacBook-Air:~ shimjaewoon$ cd nodesample

sim-ui-MacBook-Air:nodesample shimjaewoon$ ls

sim-ui-MacBook-Air:nodesample shimjaewoon$ npm init

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.


See `npm help json` for definitive documentation on these fields

and exactly what they do.


Use `npm install <pkg> --save` afterwards to install a package and

save it as a dependency in the package.json file.


Press ^C at any time to quit.

name: (nodesample) 

version: (1.0.0) 

description: 

entry point: (index.js) 

test command: 

git repository: 

keywords: 

author: 

license: (ISC) 

About to write to /Users/shimjaewoon/nodesample/package.json:


{

  "name": "nodesample",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}



Is this ok? (yes) 

sim-ui-MacBook-Air:nodesample shimjaewoon$ npm install --save express

nodesample@1.0.0 /Users/shimjaewoon/nodesample

└─┬ express@4.15.2 

  ├─┬ accepts@1.3.3 

  │ ├─┬ mime-types@2.1.15 

  │ │ └── mime-db@1.27.0 

  │ └── negotiator@0.6.1 

  ├── array-flatten@1.1.1 

  ├── content-disposition@0.5.2 

  ├── content-type@1.0.2 

  ├── cookie@0.3.1 

  ├── cookie-signature@1.0.6 

  ├─┬ debug@2.6.1 

  │ └── ms@0.7.2 

  ├── depd@1.1.0 

  ├── encodeurl@1.0.1 

  ├── escape-html@1.0.3 

  ├── etag@1.8.0 

  ├─┬ finalhandler@1.0.1 

  │ ├── debug@2.6.3 

  │ └── unpipe@1.0.0 

  ├── fresh@0.5.0 

  ├── merge-descriptors@1.0.1 

  ├── methods@1.1.2 

  ├─┬ on-finished@2.3.0 

  │ └── ee-first@1.1.1 

  ├── parseurl@1.3.1 

  ├── path-to-regexp@0.1.7 

  ├─┬ proxy-addr@1.1.4 

  │ ├── forwarded@0.1.0 

  │ └── ipaddr.js@1.3.0 

  ├── qs@6.4.0 

  ├── range-parser@1.2.0 

  ├─┬ send@0.15.1 

  │ ├── destroy@1.0.4 

  │ ├─┬ http-errors@1.6.1 

  │ │ └── inherits@2.0.3 

  │ └── mime@1.3.4 

  ├── serve-static@1.12.1 

  ├── setprototypeof@1.0.3 

  ├── statuses@1.3.1 

  ├─┬ type-is@1.6.15 

  │ └── media-typer@0.3.0 

  ├── utils-merge@1.0.0 

  └── vary@1.1.1 


npm WARN nodesample@1.0.0 No description

npm WARN nodesample@1.0.0 No repository field.



그 다음, socket.io 도 npm 을 통해 설치 합니다.


sim-ui-MacBook-Air:nodesample shimjaewoon$ npm install --save socket.io

nodesample@0.0.1 /Users/shimjaewoon/nodesample

└─┬ socket.io@1.7.3 

  ├── debug@2.3.3 

  ├─┬ engine.io@1.8.3 

  │ ├── base64id@1.0.0 

  │ ├── debug@2.3.3 

  │ ├─┬ engine.io-parser@1.3.2 

  │ │ ├── after@0.8.2 

  │ │ ├── arraybuffer.slice@0.0.6 

  │ │ ├── base64-arraybuffer@0.1.5 

  │ │ ├── blob@0.0.4 

  │ │ └── wtf-8@1.0.0 

  │ └─┬ ws@1.1.2 

    ├── options@0.0.6 

    └── ultron@1.0.2 

  ├─┬ has-binary@0.1.7 

  │ └── isarray@0.0.1 

  ├── object-assign@4.1.0 

  ├─┬ socket.io-adapter@0.5.0 

  │ └── debug@2.3.3 

  ├─┬ socket.io-client@1.7.3 

  │ ├── backo2@1.0.2 

  │ ├── component-bind@1.0.0 

  │ ├── component-emitter@1.2.1 

  │ ├── debug@2.3.3 

  │ ├─┬ engine.io-client@1.8.3 

  │ │ ├── component-emitter@1.2.1 

  │ │ ├── component-inherit@0.0.3 

  │ │ ├── debug@2.3.3 

  │ │ ├── has-cors@1.1.0 

  │ │ ├── parsejson@0.0.3 

  │ │ ├── parseqs@0.0.5 

  │ │ ├── xmlhttprequest-ssl@1.5.3 

  │ │ └── yeast@0.1.2 

  │ ├── indexof@0.0.1 

  │ ├── object-component@0.0.3 

  │ ├─┬ parseuri@0.0.5 

  │ │ └─┬ better-assert@1.0.2 

  │ │   └── callsite@1.0.0 

  │ └── to-array@0.1.4 

  └─┬ socket.io-parser@2.3.1 

    ├── component-emitter@1.1.2 

    ├─┬ debug@2.2.0 

    │ └── ms@0.7.1 

    └── json3@3.3.2 


npm WARN nodesample@0.0.1 No repository field.




둘다 설치하면 package.json 에 포함되어 있는 것을 보실 수 있습니다.


{

  "name": "nodesample",

  "version": "0.0.1",

  "description": "example node.js",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "shimpark",

  "license": "ISC",

  "dependencies": {

    "express": "^4.15.2",

    "socket.io": "^1.7.3"

  },

  "devDependencies": {}

}




서버단 node.js 를 구현해 보죠. node_chat_server.js


var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket){ console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); socket.on('chat message', function(msg){ console.log('msg: ' + msg); //모든 접속 사용자에게 전송함. io.emit('chat message', msg); }); }); http.listen(8088, function(){ console.log('Http server started with :8088'); });


클라이언트 단도 구현합니다. index.html   

<!doctype html> <html> <head> <title>socket.io chat 샘플</title> </head> <body> <input id="sendMsg"/><button id="chatBtn">sumbit</button> <ul id="msg"></ul> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var chatBtn = document.querySelector('#chatBtn');

chatBtn.addEventListener("click", function(event) { socket.emit('chat message', $('#sendMsg').val()); }); socket.on('chat message', function(msg){ $('#msg').append($('<li>').text(msg)); }); </script> </body> </html>


node 로 서버 node.js 를 실행합니다. 브라우저 여러개 띄우고 테스트 해보시면 될듯 싶네요.


sim-ui-MacBook-Air:node_modules shimjaewoon$ node node_chat_server.js

Http server started with :8088

a user connected

user disconnected

a user connected

msg: 감사합니다.

msg: 감사합니다.12

a user connected

msg: 허허허... 자야 하나.

728x90
반응형

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드