이번에는 앞에서 만든 express 서버를 socket.io 라이브러리를 사용해서 웹소켓을 사용해 통신하겠습니다.
시작
먼저 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="/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();
서버 부분
server 에서 소켓을 통해 클라이언트와 서버가 연결될 경우 작동하도록 코드를 추가하겠습니다.
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 의 터미널을 확인하면 다음과 같이
socket 의 내용이 출력되는것을 확인할 수 있습니다.
[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
}
메세지 보내기
다음으로 form 에 입력한 값을 서버에서 받을 수 있도록 코드를 수정하겠습니다.
const socket = io();
const form = document.querySelector("form");
function messageSubmit(event) {
event.preventDefault();
const input = form.querySelector("input");
socket.emit("message", input.value);
input.value = "";
}
form.addEventListener("submit", messageSubmit);app.js 파일에 messageSubmit 이라는 매서드를 작성하고 socket 을 통해 "message" 라는 이벤트를 정의해서
input 값에 입력된 값을 보내게 됩니다.
emit 메서드는 사용자가 원하는 이벤트를 발생시키는 명령어
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);
socket.on("message", (message) => console.log(message));
});
const handleListen = () => {
console.log("Server Start");
};
httpServer.listen(3000, handleListen);server.js 에서는 socket.on 을 통해 "message" 이벤트가 발생했을 경우, 받은 message 를 출력하게 됩니다.
위와 같이 hello 를 입력하고 전송하면 visual studio code 의 터미널에 다음과 같이 출력이 됩니다.
[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/server.js`
Server Start
hello'Javascript' 카테고리의 다른 글
| chatting server - 채팅방 생성 및 접속(3) (0) | 2023.02.25 |
|---|---|
| chatting server - 채팅방 생성 및 접속(2) (0) | 2023.02.25 |
| chatting server - 채팅방 생성 및 접속(1) (0) | 2023.02.24 |
| chatting server - html 과 javascript, express 연동 (0) | 2023.02.24 |
| chatting server - 환경설정 (0) | 2023.02.24 |
