웹소켓 은 양방향 통신 프로토콜
-
실시간 채팅이나 거래소 같은 데이터 전송이 자주 일어나는 경우 사용하면 좋다.
-
페이지에 덧글을 달았을 때 페이지를 새로고침해야하는 현상을 웹소켓 양방향 통신을 이용해 실시간으로 처리가능.
웹소켓 통신을 위해 socket.io 라는 라이브러리 사용.
app.js
const socketIo = require("socket.io");
// 대기상태의 서버객체를 매개변수로 전달한다.
const server =app.listen(8080,()=>{
console.log("server on");
})
const io = socketIo(server);
// userId 라는 빈배열을 생성
let userId = [];
// 웹소켓에 연결
io.sockets.on("connection",(socket)=>{
// localhost:9090에 접속했을 때 socket 요소의 id를 출력
// 연결되었을 때 이니까 새로고침 할 때마다 바뀜
console.log("유저 접속",socket.id);
// userID 빈 배열에 socket.id 를 푸쉬해서 쌓는다.
// 브라우저를 2개 열어서 접속하면 2개가 배열에 쌓인다.
userId.push(socket.id);
console.log(userId);
브라우저 2개를 열었을 때 userId 배열에 값이 2개 들어감.
// 클라이언트로 부터 메세지 수신
// 클라이언트로 부터 hi 라는 이벤트 이름으로 송신이 오면
// 메세지가 data 인자에 담김.
socket.on("hi",(data)=>{
console.log(data);
//to()는 소켓 아이디로 보낸다는 뜻이다.
// 예를 들어 한 유저가 접속하여 qwer 라는 소켓 id를 받았으면 to(qwer) 이라고 해야 접속한 유저한테 data.msg가 전송된다.
io.sockets.to(data.id).emit("hi",data.msg);
})
// 유저가 접속을 해제했을 때 발생하는 이벤트
socket.on("disconnect",()=>{
console.log("유저 나감");
// 아래 2개의 값이 같음.
console.log(value);
console.log(socket.id);
// filter 메서드를 이용해 같지 않은것들만 배열에 남기는거임.
userId = userId.filter((value)=> value != socket.id);
})
main.ejs
// socket.io 모듈을 사용해서 연결을 하면
// 내부적으로 root 경로에 /socket.io/socket.io.js가 동적으로 생긴다.
// 그래서 아래처럼 연결을 해줘야 함.
<script src="/socket.io/socket.io.js"></script>
<body>
<label for="">문자</label><Br>
<input type="text" id="text"><Br>
<label for="">사용자아이디</label><Br>
<input type="text" id="user"><Br>
<button id="btn">전송하기</button>
</body>
<script>
window.onload = () =>{
// 위의 js에서 io를 가져와서 연결한다.
// 무조건 io 를 써야한다.
const socket = io.connect();
// 서버측에서 클라이언트에게 hi 라는 이벤트로
// 송신했을 때 data 에 담아 alert 으로 출력.
socket.on("hi",(data)=>{
alert(data);
})
btn.onclick = () =>{
socket.emit("hi",{msg: text.value, id: user.value}
}
}
</script>
한걸음씩