Project using node.js
-
Drawing canvas with socketIOProject using node.js/Cloning Catch-Mind 2020. 12. 15. 13:58
paint.js // paint.js import { getSocket } from "./sockets"; const beginPath = (x, y, size) => { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineWidth = size; }; const strokePath = (x, y, color) => { let currentColor = ctx.strokeStyle; if (color !== null) currentColor = color; ctx.strokeStyle = currentColor; ctx.lineTo(x, y); ctx.stroke(); }; const handleMousemove = (e) => { const x = e.offsetX; const..
-
Chat with socketIOProject using node.js/Cloning Catch-Mind 2020. 12. 15. 09:51
구현할 채팅 기능은 누가 보냈는지도 알려줘야 한다. 예를 들어 나의 아이디가 clown 이고 "Hello"를 치면 상대방에게 clown : Hello가 보여야 한다. 나에게는 시스템이 clown 대신 You라고 보여줄 것이다. 각자의 아이디는 브라우저의 localStorage에 저장할 것이다. Server 측 통신 // globalController.js export const notifyLogin = async (req, res) => { const { user: { id }, } = req; const newUser = await User.findById(id); const username = newUser.username; io.once("connection", (socket) => { io.to(..
-
socket.io로 로그인 알리기Project using node.js/Cloning Catch-Mind 2020. 12. 14. 14:24
socket.io로 로그인 알리기 // globalRouter.js globalRouter.post(routes.login, onlyPublic, postLogin, notifyLogin); login 부분에서 postLogin 뒤에 notifyLogin을 추가한다. 사용자가 로그인을 하면 게임을 하고 있는 모든 사용자에게 알림이 가도록 한다. import events from "../events"; import io from "../server"; const superBroadcast = (event, data) => io.emit(event, data); export const postLogin = passport.authenticate("local", { // successRedirect: rout..
-
Client가 서버의 변수 공유하기Project using node.js/Cloning Catch-Mind 2020. 12. 14. 14:20
socketIO // server.js import socketIO from "socket.io"; import { socketController } from "./socketController"; const server = app.listen(PORT, handleListening); const io = socketIO(server); io.on("connection", (socket) => socketController(socket, io)); export default io; socket.io는 브라우저와 서버가 실시간으로 event 기반으로 양방향 통신을 할 수 있게 하는 라이브러리다. // socketController.js export const socketController = (socket..
-
gulpProject using node.js/Cloning Catch-Mind 2020. 12. 14. 09:57
설치 npm install gulp gulp-sass node-sass gulp-autoprefixer gulp-csso del gulp-browserify babelify gulp gulp를 실행시킬 수 있다. package.json에서 "scripts"에 "dev:assets" : "gulp"를 설정함으로써 gulp를 실행시킬 수 있다. gulp-sass Sass plugin for gulp node-sass node.js에서 sass를 사용할 수 있게 하는 모듈이다. gulp-autoprefixer Prefix CSS with Autoprefixer gulp-csso Minify CSS with CSSO. CSS 파일의 공백을 없앰으로써 파일 크기를 줄인다. del Delete files and d..
-
login on Catch MindProject using node.js/Cloning Catch-Mind 2020. 12. 13. 20:05
Sign up을 통해서 저장한 사용자 정보로 이제 로그인을 해야 한다. 웹 애플리케이션에 로그인을 하면 서버는 세션 키를 준다. 이 세션 키를 가지고 있음으로써 로그인이 유지가 된다. 만약 내가 브라우저를 다 끄고 다시 키 애플리케이션에 접속하면 키 값은 소멸되어서 다시 로그인을 해야 한다. 이러한 기능을 구현하기 위해서 설치할 두 가지가 있다. #npm install express-session connect-mongo express-session은 cookie-password를 생성하고 connect-mongo는 쿠키 값을 mongoDB에 저장하게 한다. app.js import session from "express-session"; import MongoStore from "connect-mong..
-
Sign up - ControllerProject using node.js/Cloning Catch-Mind 2020. 12. 13. 19:13
Mongo DB // db.js import mongoose from "mongoose"; mongoose.connect(process.env.MONGO_URL, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false, }); const db = mongoose.connection; const handleOpen = () => console.log(`✅ Connected to DB`); const handleError = (error) => console.log(`❌ Connection ${error}`); mongoose.set("useCreateIndex", true); db.on("error", handleError); ..