1.Socket.IO
Socket.IO는 공식 문서의 정의에 따르면
(https://socket.io/docs/v4/#http-long-polling-fallback)
클라이언트와 서버 간의 짧은 대기시간, 양방향 및 이벤트 기반 통신을 가능하게 하는 라이브러리로,
WebSocket 프로토콜 위에 구축되었으며, HTTP 긴 폴링 또는 자동 재연결에 대한 폴백과 같은
추가 보장을 제공한다고 한다.
즉, 클라이언트-서버 양방향연결을 가능하게하는 라이브러리라고 생각하면 된다.
WebSocket 프로토콜 위에 구축되었다고 했는데, 이 WebSocket은 무엇일까?
WebSocket은 기존의 단방향 메세지 교환 방식보다 쉽게 상호작용이 가능한 웹페이지를 만들기 위해서
클라이언트(웹)-서버간 양방향 메시지 통신을 구현하고자 HTML5표준안의 일부로 등장한 프로토콜이다.
프로토콜은 쉽게 말하면 '약속'으로, 라이브러리인 Socket.IO과 개념적인 차이가 있다.
또한 WebSocket은 아직 확정된 상태가 아니므로, 브라우저 별로 지원하는 버전이 다르다.
그러나 Socket.IO의 경우 브라우저에 관계없이 웹을 구현할 수 있다는 차이점이 있다.
그래서 WebSocket보다 더 간편하고 효율적이다.
아래에 자세한 차이점을 표로 정리했다.
2.사용 방법
프로젝트 구조는 다음과 같다.
저기서 chat copy ejs는 무시해도 된다. 깜빡하고 안지웠네요..
설치하는 방법은 다음과 같다.
가.설치
npm i socket.io
나.클라이언트 - Socket.IO 불러오기
1) CDN 삽입
아래의 공식 문서에서 CDN을 불러온다.
https://socket.io/docs/v4/client-installation
Client Installation | Socket.IO
Version compatibility
socket.io
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js" integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+" crossorigin="anonymous"></script>위와 같은 CDN을 chat.ejs의 <head></head>에 삽입한다.
2) <script> 태그 내 Socket.IO 객체 생성
chat.ejs에서 코드가 길어질 것 같아서 static/index.js에 다음과 같이 소켓 객체를 생성했다.
let socket = io.connect();다.서버 - Socket.IO 불러오기
다음 포스터에서 더 자세하게 다룰 예정이다.
이번 포스터에서는 어떻게 불러오는지에 대해서만 다룬다.
1)express를 이용해 http서버 생성 -> Socket.IO서버로 upgrade
const express = require("express");
const app = express();
//1. express를 사용하여 http서버를 생성한다.
const http = require("http").Server(app);
//2. 그리고 생성된 Http 서버를 socket.io server로 upgrade한다.
const io = require("socket.io")(http);
const PORT = 8080;2)connection event handler 정의
사용자(클라이언트)가 Socket.IO 서버 접속 시 connection 이벤트가 발생한다.
이때 이 connection 이벤트 handler를 정의하는 것이 다음 코드이다.
connection이 수립되면 매개변수로 Socket객체가 전달된다.
즉, 파라미터 값을 설명하면 다음과 같다.
- event name: 클라이언트가 메시지 송신 시 지정한 이벤트 명(string) ex) connection
- function: 이벤트 핸들러. 핸들러 함수의 인자로 클라이언트가 송신한 메시지가 전달된다. ex) (socket)->{}
현재 접속되어 있는 클라이언트로부터의 메시지를 수신하기 위해서는 on 메소드를 사용한다.
최초 연결시 socket.id가 생성되며, 이는 고유 아이디로 웹 페이지마다 생성된다.
io.on("connection", (socket) => {
console.log("⭕ Server Socket Connected >> ", socket.id);
});3)라우트 정의
socket 사용시에는 http.listen으로 포트를 열어야한다.
이 이유가 궁금해서 찾아본 결과
socket 모듈이 http 서버 모듈 위에서 작동되기 때문에 http 인스턴스를 이용해서
서버를 실행해야한다고 한다.
그러나 express를 쓰는 경우 app.listen도 실상은 http를 사용하고 있어서
app.listen도 사용이 가능하지만 http.listen에서 더 세부설정이 가능해서
통상적으로는 http.listen를 사용한다고 한다.
//주의) socket을 사용할 때에는 http.listen으로 포트를 열어야함
http.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});
시간이 된다면 이후 포스팅에서 채팅 기능을 구현하는 코드를 자세히 리뷰하겠다.
'백앤드 > Node.js' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 7주차 | Session (1) | 2023.04.16 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 7주차 | Cookie (0) | 2023.04.12 |
| [포스코x코딩온] 웹개발자 입문 과정 6주차 | Sequelize (0) | 2023.04.10 |
| [포스코x코딩온] 웹개발자 입문 과정 6주차 | MySQL 서버 설치, pm2 (0) | 2023.04.10 |
| [포스코x코딩온] 웹개발자 입문 과정 6주차 | MVC MySQL 연동 (0) | 2023.04.08 |