qwef

닉네임을 정하게 해보자. 정말 간단하다. form#name input(type="text" placeholder="Nickname", required) button Save 그냥 form 하나 새로 더 만들어서.. $nicknameForm.addEventListener("submit",(e)=>{ e.preventDefault(); const $input = $nicknameForm.querySelector("input"); socket.emit("nickname", $input.value); }); 이벤트를 추가해 주었다. 서버에 nickname이라는 이벤트를 내가 적은 input의 값과 함께 전달 할 것이다. io.on("connection", socket =>{ socket.nickname = "A..

떠나는 걸 알림 SocketIO에는 당연히 우리가 명명한 이벤트 말고도, 다양한 이벤트가 있다. 그 중 하나가 disconnecting 이거는 disconnect와 다르다. 말 그대로 연결을 끊는 '중'이다. 그러니까 왜, 완전히 끊어버리면 뭔갈 못하니까, 완전히 끊기 전에 하고 싶은 거 날리는 그런 거다. io.on("connection", socket =>{ socket.on("disconnecting", ()=>{ socket.rooms.forEach(room => socket.to(room).emit("bye")); }) }) 추가로 등록해 줬다. socket이 연결을 끊고 있을 때, 그 소켓이 가입했던 모든 방에다가 "bye"라는 이벤트를 날린다. 그러면, socket.on("bye",()=>{..

이 room 기능, 그러니까 특정 소켓끼리 묶는 이 기능을 이미 socketIO는 제공해 준다. 굉장히 쉽다. 그냥 socket.join("방이름") 해주면 끝이다. https://socket.io/ Socket.IO Reliable Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect. socket.io 여기 ServerAPI, ClientAPI에서 공식 문서 확인할 수 있다. socket.onAny(e=>{ console.log(`s..

대충 클라이언트의 문서에 form input(placeholder="room name", required, type="text") button Enter Room 이렇게, 스크립트에 const socket = io(); const $welcome = document.getElementById("welcome"); const $form = welcome.querySelector("form"); $form.addEventListener("submit", (e)=>{ e.preventDefault(); const $input = $form.querySelector("input"); socket.emit("enter_room", {payload : $input.value}); $input.value = ""; ..

npm i socket.io 설치하고, 이제 사용해 보자. 기존에 사용하던 websocket 지우고, socket.io를 사용할 것이다. const server = http.createServer(app); const wss = new WebSocketServer({server}); 기존에 이렇게 http 서버를 웹소켓으로 감싸면서 둘이 연결하였다. socket.io도 마찬가지 이다. const server = http.createServer(app); const io = SocketIO(server); 이렇게 하고 사용하면 된다. 이렇게 하면, 또 하나 자동으로 만들어지는 url이 있다. http://localhost:3000/socket.io/socket.io.js 이 url인데, 이게 뭐냐면, 클라..

Socket IO는 나온지 오래 되었다. 안정적이다. Socket IO는 실시간, 양방향, event 기반의 통신이 가능하다. Socket IO는 websocket과 다르다고 함. 그러니까 가끔 Socket IO가 websocket을 이용하기는 하는데, 다른 거 라고 함. 프록시나 방화벽이 있다고 해도 socket IO는 계속 작동한다고 한다. 그리고 Socket IO가 만약 브라우저가 websocket을 지원한다는 것을 확인하면 websocket을 이용한다고 한다. 또, websocket을 지원하지 않으면 다른 걸 사용한다고 한다. (HTTP long-polling을 사용한다고 한다.) 이런 걸 탄력성이라 한다. 그러니까, 뭐랄까 어댑터? 같은 역할이려나. 그런 걸 websocket 등 소켓 이용하는 ..

솔직히 이것도 쉬워보이긴 한다. 먼저, 이제 클라이언트 쪽에서 데이터를 그냥 문자열이 아닌 json 형태로 보내야 한다. 거기에 nickname, message를 필드로 가지고 있다. 뭐 그냥 바로 해보자. 사실 별 문제는 없었다. 클 -> 서버로 가는 데이터가 버퍼로 와서 변환해 줬다. 먼저 일단, 클쪽에서 문자열인 데이터를 Json으로 바꿔보자. $msgForm.addEventListener("submit", (e)=>{ e.preventDefault(); const $nickname = $msgForm.querySelector("#nickname"); const $message = $msgForm.querySelector("#message"); const data = { nickname:$nickn..

쉽다. 다른 부분 제쳐두고, const sockets = []; wss.on("connection", (socket)=>{ sockets.push(socket); console.log("Connected to Client"); socket.send("hello!"); socket.on("message", (m)=>{ for(const sc of sockets){ sc.send(m.toString('utf-8')) } }); socket.on("close", (socket)=>{ const idx = sockets.indexOf(socket); sockets.splice(idx,1); console.log("Disconnected socket"); }); }); 연결될 시, 그 소켓을 sockets 라는 ..

사실 이제 그냥, 이벤트가 일어났을 때 어떻게 할지만 추가시켜주면 되는 부분이다. wss.on("connection", (socket)=>{ console.log("Connected to Client"); socket.send("hello!"); }); 서버쪽은 그냥 연결이 되었을 떄, 소켓을 통해 hello라는 메시지를 보내도록 했다. 소켓은 연결에 관한 정보, 연결된 상대, 연결을 통해 할수 있는 일 들을 모아놓은 객체이다. const socket = new WebSocket("ws://localhost:3000"); socket.addEventListener("message", (m)=>{ console.log(m.data); }); socket.addEventListener("open", ()=>..

먼저, 프론트엔드와 백엔드 사이의 연결을 만들 것이다. 메시지를 주고 받도록 할 것이다. 먼저 웹 소켓은, html 요소 이벤트 추가 하듯이, ("이벤트명", fuction) 할 수 있다. 웹소켓은 const wss = new WebSocketServer({server}); wss.on("connection", handleConnection) 이렇게 웹소켓서버의 on이라는 메소드로 이벤트를 추가할 수 있다. (handleConnection은 콜백함수) 추가할 수 있는 이벤트 종류는, connection, close, error, headers, listening이 있다. 또, 안에 콜백 함수로 넣어주는 인자는 소켓서버 그 자체와, 소켓과, request 요청 총 3가지 소켓이란 연결된 사람에 대한 정보 ..