Web
socket.io 기본 채팅 서비스 만들기 (1)
- -
728x90
https://socket.io/get-started/chat
Get started | Socket.IO
Get started In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. Introduction# Writing a chat application with popular web application
socket.io
socket.io란 실시간으로 상호작용하는 웹 서비스를 만드는 기술인 웹소켓을 쉽게 사용할 수 있게 해주는 모듈이다.
웹소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다. Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. 웹소켓은 별도의 포트를 사용하지 않고 HTTP와 같은 포트를 사용하고 있어서 클라이언트인 웹 브라우저뿐만 아니라 웹 서버도 기능을 지원하고 있어야만 한다.
웹소켓은 HTML5의 기술이기 때문에 오래된 버전의 웹 브라우저는 웹소켓을 지원하지 않는다. 따라서 이를 해결하기 위해 나온 여러 기술 중 하나가 socket.io이다. 웹페이지가 열리는 브라우저가 웹소켓을 지원하면 웹소켓 방식으로 동작하고, 지원하지 않는 브라우저라면 일반 http를 이용해서 실시간 통신을 흉내내는 것이다.
Socket.io는 node.js 기반으로 만들어진 기술로, 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리이다. 이것은 100% 자바스크립트로 구현되어 있으며, 현존하는 대부분의 실시간 웹 기술들을 추상화해 놓았습니다. 다시 말해, Socket.io는 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.
Socket.io는 웹 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용한다.
사용방법은 AJAX와 비슷하지만, 개념면에서 AJAX와 차이를 두고 있다. AJAX는 웹 브라우저에서 데이터를 호출하면 웹 서버에서 호출된 값을 검색, 작성해서 웹 브라우저로 메세지를 보내는 형식의 구조라면 웹소켓의 경우는 웹 브라우저에서 호출해서 데이터를 가져가는 기능을 포함하여 반대로 서버에서 클라이언트를 호출할 수 있는 기능까지 있다.
예를들어 채팅 프로그램을 만들면, 채팅을 서버로 보내는 것은 가능하다. 그러나 AJAX로 만든 웹 페이지라면 서버 측에서 클라이언트가 보낼 수가 없다. 대응책으로 10초마다 데이터를 갱신해서 확인할 수 있지만, 웹 소켓은 서버에서도 클라이언트를 인지하는 상태이기 때문에 양방향 통신이 가능하다.
웹 프레임워크
Node.JS express 설치
package.json
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}npm install express@4
index.js 작성
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
app.get('/', (req, res) => {
res.send('<h1>hello world</h1>');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
터미널에서 아래와 같이 입력하면 다음과 같은 결과를 얻을 수 있다.
위에서는 html 문자열을 res.send를 통해 전달했다. html 코드가 길어지면 코드가 더러워지므로 html파일을 만들어 제공해보자.
index.js는 아래와 같이 sendFile로 수정
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
Socket.IO 통합
Socket.IO는 두 부분으로 구성된다.
- Node.JS HTTP Server socket.io와 통합되는 서버
- 브라우저 측 socket.io-client 에서 로드되는 클라이언트 라이브러리
socket.io를 설치하면 모듈이 설치되고 package.json에 종속성이 추가된다.
npm install socket.io
index.html에 script부분을 추가한다.
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</body>
</html>index.js
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const { Server, Socket } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) =>{
console.log('a user connected');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});위 코드대로 수정하고 node index.js를 실행하면 새로고침할 때마다 유저가 연결되었다는 메세지를 볼 수 있다.
728x90
300x250
Contents
소중한 공감 감사합니다