초기설정
- yarn을통해 프로젝트를 초기 설정
yarn init
- express설치
yarn add express
import express from "express";
import http from "http";
const app = express();
app.set("port", 3001);
// 서버를 http로 등록한다.
const server = http.createServer(app);
server.listen(app.get("port"), () => {
console.log(`🏇${app.get("port")}에서 서버가 실행중입니다!🚴 `);
});Socket 설정
Socket.io와Cors를 설치한다.
Socket.io는 양방향 통신 기능을 구현하기 위한 핵심 라이브러리CORS는whiteList에 있는 URL만 통신을 허락하기 위해서 설치.
Server
import express from "express";
import http from "http";
import cors from "cors";
import { Server } from "socket.io";
import socket from "./socket.js";
const app = express();
// 포트세팅
app.set("port", 3001);
// cors미들웨어 선언
app.use(
cors({
origin: "http://127.0.0.1:5500",
credentials: true,
})
);
// 서버를 http로 등록한다.
const server = http.createServer(app);
const io = new Server(server, {
cors: {
origin: "http://127.0.0.1:5500",
credentials: true,
},
});
socket(io);
server.listen(app.get("port"), () => {
console.log(`🏇${app.get("port")}에서 서버가 실행중입니다!🚴🏻 `);
});Server Socket
export default function socket(socketIo) {
socketIo.on("connection", (socket) => {
console.log("소켓이 연결됐습니다.");
const room = "room1";
socket.on("disconnect", (reason) => {
console.log(`연결이 해제됐습니다. ${reason}`);
});
// Message 추가
socket.on("messageS", (message) => {
console.dir(message);
console.log("message가 도착했습니다.");
if (message.recepient === "ALL") {
socketIo.sockets.emit("messageC", message);
}
});
});
}클라이언트에서 사용하는
socket.io.js는
node_modules/socket.io client/dist/socket.io.js
를 가져와 사용했다.
Client
<!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>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="socket.io.js"></script>
<script>
let socket;
$(function () {
$("#connectButton").bind("click", (event) => {
println("버튼이 클릭됨.");
connectToServer();
});
$("#sendButton").bind("click", (event) => {
const sender = $("#senderInput").val();
const output = { sender: sender, recepient: "ALL", data: "Hello to All" };
console.log(`서버로 가는 데이터 : ${JSON.stringify(output)}`);
if (socket == undefined) {
alert("서버에 연결되지 않앗습니다.");
return;
}
socket.emit("messageS", output);
});
});
const connectToServer = () => {
let url = "http://localhost:3001";
let options = { forceNew: true };
socket = io(url, options);
socket.on("connect", () => {
println(`웹소켓이 연결됐습니다. ${url}`);
console.log(`socket.id : ${socket.id}`);
socket.on("messageC", (message) => {
console.log(JSON.stringify(message));
println(`<p> 수신 메시지 : ${message.sender}, ${message.recepient}, ${message.data} </p>`);
});
});
socket.on("disconnect", () => {
println(`웹소켓 연결 해제. ${url}`);
console.log(`socket.id : ${socket.id}`);
});
};
const println = (data) => {
console.log(data);
$("#result").append(`<p> ${data} </p>`);
};
</script>
</head>
<body>
<div>
<input type="button" id="connectButton" value="연결하기" />
</div>
<div>
<div><span>보내는사람 아이디 :</span> <input type="text" id="senderInput" value="test01" /></div>
<br />
<input type="button" id="sendButton" value="전송" />
</div>
<hr />
<p>결과 :</p>
<div id="result"></div>
</body>
</html>