qwef

솔직히 이것도 쉬워보이긴 한다. 먼저, 이제 클라이언트 쪽에서 데이터를 그냥 문자열이 아닌 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가지 소켓이란 연결된 사람에 대한 정보 ..

node.js에는 ws라는 라이브러리 지원됨. 일단 그럼 npm i ws 해서 설치 근데, 우리가 기존에 서버를 express로 쓰고 있었는데, express는 http지 웹소켓이 아님. 그래서 express에 ws를 사용할 수 있도록 추가해 줄거임. 약간 바뀌었다. import express from "express"; import http from "http"; import WebSocket, { WebSocketServer } from 'ws'; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.static(__dirname + "/p..

HTTP http는 stateless, 딱히 무언가 상태를 저장하고 있지 않음. (회원가입등은 서버가 DB와 연결하여 DB에 저장하는 거지 서버 자체에서 변수로 뭘 가지고 있거나 그러지 않음.) 즉 클라이언트에 대한 무언가를 저장하고 있지 않음. request가 오면 요청을 받고 response를 보냄. 끝임. 딱히 연결되어 있다거나 그런 게 아니고, 그냥 요청오면 응답 보내고 끝임. 마치 프린터 처럼 인쇄요청이 오면 인쇄 한 다음 끝임. 그냥 대기상태. 웹소켓은, 연결 요청을 보냄. 그럼 연결 수락응답을 보내면, 연결된거임. 즉, 클라이언트와 서버가 서로 기억함 이렇게 연결하면, 이제 서버는 프린터 같은 게 아니라 그냥 맘대로 클라이언트한테 데이터 보내고 할 수 있음. 요청 안와도. 양방향 통신이 됨...