socket.IO 란?
Socket.IO는 웹소켓 프로토콜을 지원하는 실시간 웹 애플리케이션(채팅, 메세지, 등)을 위한 JavaScript 라이브러리이다.
웹 클라이언트와 서버간에 실시간 양방향 통신이 가능하다.
브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리의 두 부분으로 구성된다. (위키백과)
socket.io는 웹소켓을 이용하여 비동기 이벤트 방식으로 클라이언트에 실시간으로 데이터를 전송한다.
사전에 참고할 사이트
https://socket.io/get-started/chat
이 사이트에 나온 튜토리얼대로 따라 기본적인 socket.IO의 틀을 만들어 놓자.
다 따라하고 난 뒤에는
위와 같은 파일들이 생성되고,
각각의 코드들은 이렇게 작성되어 있어야 한다.
1. index.js
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const { Server } = 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");
socket.broadcast.emit("hi");
socket.on("disconnect", () => {
console.log("user disconnected");
});
socket.on("chat message", (msg) => {
console.log("message: " + msg);
io.emit("chat message", msg);
});
});
server.listen(3000, () => {
console.log("listening on *:3000");
});
2. index.html
<!DOCTYPE html>
<html>
<head>
<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>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById("messages");
var form = document.getElementById("form");
var input = document.getElementById("input");
form.addEventListener("submit", function (e) {
e.preventDefault();
if (input.value) {
socket.emit("chat message", input.value);
input.value = "";
}
});
socket.on("chat message", function (msg) {
var item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</html>
- (style 태그의 내용은 prettier를 통해 정렬된 것이므로 신경쓰지 않아도 된다)
이렇게 준비가 되었다면 참고페이지 맨 아래의 숙제 기능들을 하나씩 구현해보도록 하자.
1. 누군가 연결이 되거나, 연결이 끊겼을 때 연결된 사용자들에게 메세지를 브로드캐스팅하기.
2. 닉네임 설정
3. 보낸 사용자에게 같은 메세지를 보게 하는 대신에 enter키를 누르는 즉시 메세지를 직접 추가하도록 하기.
4. "{user}이(가) 입력중입니다" 기능 추가
5. 누가 온라인 상태인지 표시
6. 비공개 메세지 기능 추가
등등..
이중에 지금까지 구현이 된것은 1,2,4,5번 이고 나머지는 앞으로 할지 안할지 모르겠지만
일단 1,2,4,5에 대한 포스팅을 다음편에서 알아보도록 하자.
'웹공부' 카테고리의 다른 글
| 웹크롤러, 검색과 SEO (0) | 2022.03.01 |
|---|---|
| Parcel Bundler 튜토리얼 (0) | 2022.02.04 |
| 유의적 버전 (SemVer, Semantic Versioning) (0) | 2021.10.14 |
| npm 시작하기 - 2 (0) | 2021.10.14 |
| npm 시작하기 - 1 (0) | 2021.10.14 |