그냥 개발자 블로그

[nodejs] node.j로 간단한 채팅 만들기 본문

프로그래밍팁/node.js

[nodejs] node.j로 간단한 채팅 만들기

마음이파파 2015. 10. 3. 05:30

이전 시간에 node.js와 socket.io를 가지고 소켓 통신을 해봤었는데요.


오늘은 응용을 해서 간단한 채팅을 만들어볼게요.


제작에 앞서 역시 설계 단계가 필요하겠죠?


채팅의 베이직한 구조를 보면 내가 화면에 텍스트를 작성해서 node.js로 만들어진 소켓서버로 보내면 이를 나를 비롯한 같은 화면을 보는 모두에게 똑같이 뿌려주는거에요.


그럼 이제 시작해볼게요.






설치시 생성된 nodejs 디렉토리 안에 socketserver.js 라는 파일을 만들어 위과 같이 작성해주세요.


3303포트를 통해 대기하고 있다가 chat이라는 명령이 들어오면 받은 데이터를 그대로 돌려주게 되요.







클라이언트 서버(이전시간 php 서버)에는 nodejs_test.php 라는 파일을 만들어주고 간단히 socket.io와 jquery를 링크 시켜주세요.


chatinput 클래스를 가지는 text input에 글이 작성되고 button을 클릭하면 소켓통신을 위해 미리 준비되어 있던 녀석이 동작하여 


채팅서버(node.js로 만들어진 서버)에 채팅내용을 전달하고 soket.on을 통해 결과를 받아 chatwindow 아이디를 가지는 div 내에 추가해줘요.






moon_and_james-4 


이걸로 끝이에요. 간단하죠?


node.js로 만든 채팅프로그램이 실제 잘 동작하는지 확인해봐야겠죠?









nodejs 디렉토리내에 soketserver.js 라는 파일을 동작 시켜주고 정상동작함을 확인 하세요.








 


브라우저를 두개 열어 놓고 좌우에 한번씩 번갈아가며 텍스트를 쓴후에 SEND버튼을 눌러보세요.


정상적으로 만들어졌다면 내용이 똑같이 보여질 거에요.


물론 결과물이 학습용이라 시중의 채팅 프로그램 같지는 않지만 더 개발하고 수많은 예외처리 추가하고 하면 동일하게 만들수 있겠네요.






잘안보여서 유튜브 가서 보는게 낫겠네요...^^;;; 동영상 우측 하단에 유튜브 로고를 클릭하면 유튜브로가서 볼수 있어요.