웹페이지 준비
웹페이지 뷰를 위한 css 파일과, ejs 파일을 먼저 만들어야겠죠?
dalkom_talk.ejs 라는 파일을 먼저 만들어 봅시다.
jquery-1.11.3.min.js위 파일 클릭시 다운로드할 수 있습니다. 지정된 폴더에 집어넣어주셔야 정상 작동합니다
전체 소스는 기본적으로 HTML과 jquery에 관한 내용이므로 여기에선 설명하지 않도록 하겠습니다.
중요한 것은 위의 socket 관련 함수에 관한 것입니다.
12번 라인의 var socket = io('http://localhost:3000/'); 는 socket.io 서버에 연결하는 부분입니다.
그리고 그 아래 있는 socket.on('분류', function(변수)) 는 만약 분류에 해당하는 메시지가 오면, 함수로 이렇게 처리해라 라는 부분입니다.
예를 들어 13번의 코드같은 경우에는,
socket.on('my message', function (msg)
my message 라는 토픽으로 socket 통신이 오면, 통신에 있는 msg 라는 변수를 가지고 다음 함수를 실행해라, 라는 뜻입니다.
$('#messages').append($('<p class="talk me">').text(msg));
이 부분은 jquery 부분을 좀 아셔야 합니다. id가 messages인 태그에, <p class="talk me"> 태그를 만들고 그 안에 msg 변수의 값을 집어넣는다 라는 뜻입니다.
다음으로 아래 있는 socket.emit('분류', 변수) 는 on과 반대의 역할을 합니다.
'분류'로 다음 변수를 보내라 ! 라는 뜻입니다.
보통 변수를 1개 변수 혹은 배열, 혹은 json 형태로 보내게 됩니다.
css파일을 다운로드 받고, 직접 ejs 파일을 만들어보세요~
./io.js
저번 포스트에서 만들었던 io.js 파일을 손볼 예정입니다.
저번엔 단순히 서버를 만들기만 했는데, 이제 통신을 주고받게 만들어 봅시다.
1 2 3 4 5 6 7 8 9 10 11 12 | module.exports = function(server){ var io = require('socket.io')(server); io.on('connection', function(socket){ socket.on('message', function(msg){ console.log(msg); socket.emit('my message', msg); socket.broadcast.emit('other message', msg); }); }); return io; } | cs |
서버 부분이 오히려 더 간단하네요.
on 부분은 똑같습니다.
단지 다른것은, 서버에서 연결을 받는 io.on 부분이 있다는 것이네요.
socket.io 객체에서 on 함수로 연결을 관리합니다. 연결이 되면 socket이라는 변수를 사용해서 다음 함수들을 실행하겠다,라는 뜻입니다.
아래 보면 처음 보는 socket.broadcast.emit 이라는 함수가 있네요.
broadcast는 자신을 제외한 나머지 소켓들에게 통신을 보낸다는 뜻입니다.
메세지를 받아들이는 소켓이 현재 socket 이므로, socket을 제외한 나머지 연결 브라우저에게 전부 보낸다는 뜻입니다.
만약 현재 보낸 사람까지 포함해서 보내고 싶다면, 전체 변수인 io.emit을 사용하시면 됩니다.
라우터 설정
1 2 3 | router.get('/talk', function(req, res, next) { res.render('dalkom_talk'); }); | cs |
./routes/index.js 파일에 위의 내용을 추가하면 끝납니다.
실제 실행 모습
성실하게 express, socket.io, ejs 파일을 손봤다면 위와 같이 채팅 프로그램이 실행되는 것을 볼 수 있습니다 !
기회가 된다면 달콤톡 유저관리와 채팅방 관리까지 만들어보겠습니다.
말풍선 css 출처 http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
CSS 디자인 출처 : 카카오톡