이번에는 이전에 socket.io 라이브러리를 사용하여 웹 소켓을 사용하여 구축한 Express 서버와 통신할 것입니다.
시작하다
먼저 socket.io 모듈을 다운로드합니다.
PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> npm i socket.io다음으로 server.js 파일에 httpServer 또는 socketServer를 만듭니다.
import express from "express";
import http from "http";
import SocketIO from "socket.io";
const app = express();
const httpServer = http.createServer(app);
const socketServer = SocketIO(httpServer);
app.use("/js", express.static(__dirname + "/js"));
app.get("/", (req, res) => res.sendFile(__dirname + "/views/" + "home.html"));
app.get("/*", (req, res) => res.redirect("/"));
const handleListen = () => {
console.log("Server Start");
};
httpServer.listen(3000, handleListen);
앞부분
다음으로 home.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>Chatting</title>
</head>
<body>
<header>Chatting Web Page</header>
<main>
<h2>Welcome</h2>
<form>
<input type="text" placeholder="메세지를 입력해주세요." , required />
<button type="submit">전송</button>
</form>
</main>
</body>
<script src="http://jeehwan94.socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</html>위에서 설치한 socket.io를 통해 HTML 파일에서 socket.io를 사용할 수도 있습니다.
socket.io 태그는 app.js 태그 위에 선언되어야 합니다.
다음으로 app.js 파일을 편집합니다.
const socket = io();
서버 부분
서버에서 클라이언트와 서버가 소켓을 통해 연결될 때 작동하도록 코드를 추가합니다.
import express from "express";
import http from "http";
import SocketIO from "socket.io";
const app = express();
const httpServer = http.createServer(app);
const socketServer = SocketIO(httpServer);
app.use("/js", express.static(__dirname + "/js"));
app.get("/", (req, res) => res.sendFile(__dirname + "/views/" + "home.html"));
app.get("/*", (req, res) => res.redirect("/"));
socketServer.on("connection", (socket) => {
console.log(socket);
});
const handleListen = () => {
console.log("Server Start");
};
httpServer.listen(3000, handleListen);
결과
브라우저에서 다시 연결하고 Visual Studio Code 터미널을 검사하면 다음이 표시됩니다.
소켓의 내용이 출력되는 것을 볼 수 있습니다.
(nodemon) restarting due to changes...
(nodemon) starting `babel-node src/server.js`
Server Start
<ref *1> Socket {
_events: (Object: null prototype) {},
_eventsCount: 0,
_maxListeners: undefined,
...
auth: {}
},
(Symbol(kCapture)): false
}