Sokcet.io + 간단한 실시간 채팅 구현

Socket.io 란?

기존 웹 소켓은 HTML5 기술이라서 오래된 버전의 웹 브라우저는 웹 소켓을 지원하지 않는다.

Socket.io는 node.js 기반으로 만들어진 기술로, 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리이다.

100% 자바스크립트로 구현되어 있으며, 현존하는 대부분의 실시간 웹 기술들을 추상화했다.

다시 말해, Socket.io는 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.

 

Socket.io 시작하기 [ Server ]

package 설치

Socket.js 미들웨어 만들기

connection 메서드로 연결하여 test 메서드 만들기

Socket.io 시작하기 [ Client ]

[F12] - [Network]

풀링 방식과 웹 소켓 방식 둘 다 찍히는 모습을 확인할 수 있다.

Websocket의 Messages

간단한 실시간 채팅 만들기 [ Server ]

bin 시작 폴더에서 socket 시작하기

chat 메서드에 보면 broadcast.emit과 emit을 쓴 것을 볼 수 있는데 그냥 emit을 하면 내가 보낸 Message가 안보이기 때문에 broadcast로 전체 사용자에게 보내준다. 

 

간단한 실시간 채팅 만들기 [ Client ]

client ejs code

동작 과정

동작과정 1

1. 메인 페이지에 접속하면 아이디와 비밀번호를 입력하게 하고, 아이디가 없다면 회원 가입 페이지로 이동시켜 DB에 저장

2. 접속이 완료되면 Chat Example 페이지로 넘어가 DB에서 값을 가져와 화면에 보여주고, socket.name에 해당 아이디 값 저장

동작과정 2

3. 최초 접속시 chatLogs에 접속한 이름을 보여준다.

4. 채팅을 치면 소켓을 통해 서버로 해당 메시지가 전달되고, 다시 서버에서 클라이언트로 메시지 값 전달해 chatLogs에 표현해준다.

5. 다른 사용자가 접속 시 아이디 chatLog에 접속한 것 보여주고, 메시지 전송 또한 위와 같이 이루어진다.

 

github 주소 : https://github.com/jiwonman/Socket

GitHub - jiwonman/Socket

인용 : https://inpa.tistory.com/category/Node.js/Socket.IO