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: 허허허... 자야 하나.