Web/node.js

[socket.io] room에 join한 socket이 몇개인지 확인하기

socket으로 구현한 채팅방에 총 참가자 수를 구현하려고 한다. 추후에는 따로 배열이나 디비를 생성해서 관리를 할 것이지만 socket.io에서 제공하는 api가 있을것 같아 찾아보았다. socket.io의 room은 adapter로 구현이 된다. Adapter는 서버사이드 컴포넌트로 소켓과 room들의 관계를 저장하고 모든 클라이언트에게 이벤트를 브로딩캐스팅 하는 역할을 한다. 어댑터는 sids, rooms라는 두개의 Map객체가 있는데 이중 rooms 활용하여 특정 room에 참여한 소켓들을 확인 해 볼것이다. Map과 Set은 자바스크립트의 오브젝트 유형인데 오브젝트라고 생각하고 봐도 아래 내용 이해에 문제는 없을듯하다. Map,Set에 관한 MDN설명 : https://developer.mozi..

리액트, socket.io 채팅 구현하기

리액트와 socket.io, node.js를 활용하여 간단하게 채팅기능을 구현 해 보았습니다. 클라이언트 구현하기 리액트 컴포넌트 구조 각각의 메세지는 message컴포넌트, message들과 입력창을 담은 messages컴포넌트, messages를 담은 chatBox컴포넌트로 제작하였습니다. 소켓 설치방법 npm i socket.io-client npm으로 설치한 후 소켓을 설정합니다. 클라이언트 소스코드 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './app.jsx'; import { io } from 'socket.io-client'; const ..

node js 실습 - 사진 분류하기

nodejs-photoscript 확장자 혹은 수정 여부에 따라 사진, 동영상을 분리합니다. 실행방법 node photo 폴더명 node photo 폴더명 스크린샷 확장자 .png 혹은 .aae -> captured 수정된 사진의 원본 사진 -> duplicated 동영상 확장자 .mov 혹은 .mp4 -> video

[node.js 교과서] 9.5.1 스스로 해보기 - 게시글 삭제하기

로그인한 사용자가 작성한 글에만 삭제 버튼이 보이고 삭제를 누르면 글 삭제가 가능하다. 프론트 수정 //main.html ... {% if twit.User.id == user.id %} 삭제 {% endif %} ... {% block script %} {% endblock %} 라우터 추가 //routes/post.js router.post('/:id/delete',async(req,res,next)=>{ try{ const post=await Post.findOne({where:{id:req.params.id, userId:req.user.id}}); await post.destroy(); res.redirect('/'); } catch(error){ console.error(error); next..

[node.js 교과서] 9.5.1 스스로 해보기 - 게시글 좋아요 및 좋아요 취소

해당 게시글에 좋아요를 누른 사람을 기록 할 테이블이 필요하다. 사용자는 많은 게시글을 좋아요 할 수 있고 게시글은 많은 유저들에게 좋아요를 받을 수 있다. 따라서 사용자-게시글 간 모델 설정이 필요하다. /models/user.js ... static associate(db) { db.User.hasMany(db.Post); db.User.belongsToMany(db.User, { foreignKey: 'followingId', as: 'Followers', through: 'Follow', }); db.User.belongsToMany(db.User, { foreignKey: 'followerId', as: 'Followings', through: 'Follow', }); db.User.belong..

[node.js 교과서] 9.5.1 스스로 해보기 - 프로필 정보 변경하기

내 프로필에서 사용자의 정보를 수정 할 수 있게 한다. 프론트 코드 수정 //profile.html ... 이름 바꾸기 변경 ... submit으로 제출 하기 위해서 form이 필요하다. routes/user.js파일에 profile 라우터를 생성 해 준다. routes/user.js ... router.post('/profile',async(req,res,next)=>{ try{ await User.update({nick:req.body.nickname},{ where:{id:req.user.id}, }); res.redirect('/profile'); }catch(error){ console.error(error); next(error); } }); 닉네임을 바꾸면 db의 닉네임이 변경 되고 자동적으..