- Node socket 채팅 예제
- Node socket chat example
[Express.js] Node.js, socket.io 채팅 예제
socket.io 채팅 구현
(http://socket.io/get-started/chat/ 을 요약 번역)
Node.js 서버 구현
1. 작업할 빈 폴더 생성, 아래 내용의 package.json 파일 생성
{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": {} }
2. express 설치
- '--save' 옵션을 사용하면 설치시 package.json 파일 dependencies에도 추가해준다
$ npm install --save express
3. 아래 내용으로 index.js 파일을 생성해서 서버 구동을 확인한다.
var app = require('express')(); var http = require('http').Server(app); app.get('/', function(req, res){ res.send('<h1>Hello world</h1>'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
- 서버 구동
$ node index.js
- 접속 확인
Serving HTML
1. index.js 파일 수정
.. app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); ..
2. index.html 파일 생성
<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </body> </html>
3. 서버 재시동 후 확인
- Control+C로 서버 종료 후 node index.js로 재구동 후 접속 확인
nodemon 설치
- 소스 수정시마다 재구동이 번거롭다면 nodemon을 설치하면 매우 편리하게 쓸 수 있다.
(http://nodemon.io/)
- '-g' 옵션으로 글로벌 설치
$ npm install -g nodemon
- 이후 서버 구동은 nodemon으로 한다. 파일 수정시 자동으로 서버를 재시작해준다.
$ nodemon
Integrating Socket.IO
1. socket.io 설치
$ npm install --save socket.io
*Windows 환경의 경우 python이 설치 되어있지 않으면 node-gyp 관련된 socket.io의 dependency중 bufferutil, utf-8-validate 빌드 오류가 발생될 수 있다.
*이번 예제 진행에는 영향을 미치지 않으니 일단 무시하고 진행한다.
2. 서버 소스 수정
- index.js 파일 수정
- io에 'connection' 이벤트가 발생하면 콜백 함수를 실행하는 형태이다.
var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendfile('index.html'); }); io.on('connection', function(socket){ console.log('a user connected'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
3. 클라이언트 소스 수정
- index.html 파일 수정. body 맨 아래에 추가한다.
- socket.io.js를 로드해서 io() 라는 함수를 실행해서 연결한다.
... <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script> </body> ...
- nodemon을 사용했다면 자동으로 서버가 재시작 되었을테니 브라우저만 새로고침하면 확인 가능하다.
- 클라이언트는 직접적인 변화가 없으며, 접속시 서버 콘솔에 'a user connected'가 출력된다.
4. disconnect 이벤트 구현
- connection 콜백에서 disconnect 이벤트 리스너를 추가했다.
- 접속시, 해제시 서버측에 콘솔이 출력된다.
- 클라이언트는 직접적인 변화가 없으며, 접속시 서버 콘솔에 'a user connected'가 출력된다.
4. disconnect 이벤트 구현
- connection 콜백에서 disconnect 이벤트 리스너를 추가했다.
- 접속시, 해제시 서버측에 콘솔이 출력된다.
... io.on('connection', function(socket){ console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); }); ...
Emitting events
*Socket.IO를 이용해서 원하는 데이터를 원하는 이름의 이벤트로 전송이 가능하다.
1. index.html 수정
- 폼데이터 전송을 편하게 하기 위해 jquery를 추가했다.
- send 버튼을 누르면 input에 사용자가 입력한 값을 'chat message'라는 이름의 이벤트로 전송하는 내용이다.
... <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); </script> ...
2. index.js 수정
- 'chat message'라는 이벤트가 발생하면 메시지를 콘솔로 출력하는 내용이다.
... io.on('connection', function(socket){ socket.on('chat message', function(msg){ console.log('message: ' + msg); }); }); ...
3. 메시지 전송 확인
- 클라이언트 소스 수정이 있었으니 브라우저 새로고침 후 메시지 전송시 서버 콘솔에 출력되는지 확인한다.
Broadcasting
이제 다른 모든 유저에게 메시지를 전달해보자.1. index.js 수정
- 'client message' 이벤트가 발생하면 메시지를 서버 콘솔에 출력하고,
emit 함수를 이용해 'server message' 라는 이벤트를 모든 클라이언트에게 전달하는 내용이다.
- chat message 라는 이름을 공통으로 사용해도 되지만, 구분하기 쉽게 client message / server message 라는 이름으로 구분해서 사용한다.
... io.on('connection', function(socket){ socket.on('client message', function(msg){ console.log('message: ' + msg); io.emit('server message', msg); }); }); ...
2. index.html 수정
- 'chat message' 이벤트 이름을 'client message' 로 변경했다.
- 'server message' 라는 이벤트가 발생하면 브라우저에 수신된 메시지를 출력하는 내용을 추가했다.
... <script> var socket = io(); $('form').submit(function(){ socket.emit('client message', $('#m').val()); $('#m').val(''); return false; }); socket.on('server message', function(msg){ $('#messages').append($('<li>').text(msg)); }); </script> ...
3. 메시지 전송확인
- 브라우저 탭이나 창을 여러개 띄워서 메시지 전송을 확인한다.
- 메시지 전송시 서버와 접속중인 모든 클라이언트에 해당 메시지가 출력되는것을 확인할 수 있다.
------------------------
블로거에 썼던 글을 데려옴
http://hangaebal.blogspot.kr/2015/12/expressjs-nodejs-socketio-chat.html
------------------------
'개발' 카테고리의 다른 글
| [Homebrew] Mac OS brew install, brew 설치 (0) | 2016.01.06 |
|---|---|
| [Express.js] Node.js, socket.io 채팅 예제 (2) (0) | 2016.01.05 |
| [Express.js] 게시판 만들기 예제 (0) | 2016.01.05 |
| [Express.js] Express application generator (0) | 2016.01.05 |
| [Express.js] Node.js, Express.js 설치 (0) | 2016.01.05 |