웹소켓 (websocket)
- 정의
서버와 클라이언트 간의 메시지를 교환하기 위한 통신 방법 중 하나로 HTTP 같은 통신 프로토콜중 하나이고, TCP 연결 기반으로 서버와 클라이언트가 양방향 통신을 가능하게 합니다. 전화라고 생각하면 될것같습니다.
- 사용하는 이유
기존의 사용하던 HTTP 통신은 클라이언트가 HTTP 요청을 하면 서버가 응답을 주는방식으로 통신을 하였었는데 특징이 하나 있다면 서버가 먼저 요청을 보내진 않는다는것입니다.
예를 들면 내가 먼저 문자를 보내지 않으면 절대 먼저 문자를 보내지 않는 그런 관계라고 보면 될거같습니다.
옛날에는 http 요청만으로 모든 웹 사이트를 다 만들었었지만 요즘 웹사이트는 실시간 통신을 기반으로 실시간 채팅도하고 주식 사이트에서 실시간으로 가격이 변동되기도 합니다.
물론 실시간으로 통신하고 있는것처럼 1초,2초마다 게속 요청을 보내고 응답을 받으면 실시간 통신처럼 보이기는 한다. 하지만 이렇게 계속 요청을 보내다보면 비효율적인것 같습니다.
그냥 알아서 서버가 바뀌는 데이터를 요청하지 않아도 실시간을 보내주면 더 효율적일것 같지 않은가요? 이렇게 효율적으로 문제를 해결하기 위해 사용하는것이 WebSocket입니다.
- WebSocket 작동원리
-
클라이언트가 서버에게 웹소켓으로 통신하자고 요청을 보냅니다. ( HTTP Upgrade )
-
서버가 웹 소켓통신을 허락합니다.
-
이제부터 양방향 통신이 가능해집니다. ( Handshake )
-
양방향통신을 다하고 웹 소켓을 닫습니다.
간단하게 전화로 생각해보면
- 전화걸고
- 전화받고
- 수다떨고
- 전화끊고
이런 느낌인것 같습니다.
웹소켓 동작원리 참조
실시간 채팅 구현하기
html
간단하게 메시지를 보낼 form과 받은 메시지를 render 해줄 ul로 만들었습니다.
server.js
webSocket(app.listen(3000))으로 websocket 서버를 열어주고 나중에 3000포트로 웹소켓을 연결해줄것입니다.
index.js ( 클라이언트 )
const webSocket = new WebSocket('ws://localhost:3000')로 서버에서 3000포트로 열어준 웹소켓 서버로 웹소켓통신을 요청할것입니다.
WebSocket 동작원리의 1번에 해당하는 내용입니다. ( 전화걸기 )
- 웹소켓 통신이 되었고 클라이언트가 웹소켓서버로 접속을 했을때 실행되는 함수입니다.
data를 웹소켓 서버에 보내주어 user 입장메시지를 보여줄것입니다.
이제부터는 Websocket 동작원리 3번에 해당하는 내용입니다. ( 양방향 통신 )
- 서버로부터 데이터를 받을때 실행되는 함수입니다.
받은 데이터로 화면을 보여줄것인데 welcome_msg 일경우에는 chating.data의 값만 보여줄것이기에 author의 영역은 display:none으로 가려줍니다.
- 이제부터는 form 태그안에 input에 채팅을 입력할때마다 채팅 데이터를 서버에 보내줄것입니다.
- 9번에서 모든 클라이언트들이 받은 데이터는 다시 이 함수가 실행하여 서버로부터 받은 데이터를 모두에게 보여줄것입니다. 이번에는 입장 메시지가 아니니 author도 같이 추가하여 누가 채팅을 쳤는지 확인하게끔 하였습니다.
socket.js ( 서버 )
const wss = new webSocket.Server({server})로 웹소켓통신을 허락합니다. server에는 포트번호가 들어갑니다.
WebSocket 동작원리의 2번에 해당하는 내용입니다. ( 전화받기 )
- 웹소켓 통신이 성공적으로 연결되고 다른 클라이언트가 웹서버에 접속하였을때 ws 연결된 브라우저 정보를 sockets 이라는 빈배열에 넣어줄겁니다.
- 웹소켓 서버에 클라이언트가 접속할때 보낸 데이터를 받을때 실행됩니다. 데이터를 모든 클라이언트에게 보내줍니다.
9 . 8번에서 클라이언트가 보낸 채팅을 다시 모든 클라이언트에게 보내줄것입니다.
코드가 왔다갔다가 많이되서 헷갈리지만 어떤 함수가 언제 실행되는지 알면 잘 이해할 수 있습니다.
결과
실시간 통신을 확인하기위해 firefox와 chrome 브라우저를 사용하였습니다.
페이지에 들어오면 입장 메시지가 출력되고 채팅을입력할때 밑에 파란색으로 userid를 표시하여 누가글을 올렸는지 확인할 수 있습니다.
( 다음에 연습할때는 nickname으로 해야겠습니다 )
채팅을 입력하면 본인이 쓴글은 빨간색으로 표시되고 상대방이 쓴글은 검정색으로 표시됩니다.
