/lecture_socketIO_01

๐Ÿ“– lecture_socketIO_01

Primary LanguageJavaScript

hello socket.io

00.gif 00.png sample01.png sample03.png

install

cd ./client && yarn install && yarn start
cd ./server && yarn install && yarn start

desc

  • socket.io ๋ฅผ ์ด์šฉํ•œ real-time ์ฑ—ํŒ… App์ž…๋‹ˆ๋‹ค.
  • ๊ฐ™์€ Room ์„ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋ผ๋ฆฌ ๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ
  • ๋™๋ช…์ด์ธ์€ ์ž…์žฅ ๋ถˆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  • FaceBook Message ์Šคํƒ€์ผ์„ ํด๋ก  ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

STACK

node.js ( express, socket.io, redux )
react ( styled-components)

server/side

  • users state ๊ด€๋ฆฌ

  • addUser

  • getUser

  • removeUser

  • getUsersInRoom

socket logic

  • ServerSide:emit

  • message : client๋กœ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ธ๋‹ค. โœ”

  • roomData : ๋ฐฉ์˜ ์ธ์› ์ •๋ณด๋ฅผ ๋ณด๋‚ธ๋‹ค. โœ”

  • ClientSide:emit

  • connection โœ”

  • disconnect โœ”

  • join โœ”

  • sendMessage โœ”

  • connection, disconnect

  • join : user๋“ฑ๋ก,๊ธฐ๋ณธ ๋ฉ”์‹œ์ง€, ๋ธŒ๋กœ๋“œ ์ผ€์ŠคํŠธ ์•Œ๋ฆผ, room์ •๋ณด ์ œ๊ณต

  • sendMessage & Message : ๋ฉ”์‹œ์ง€ ์ „ํŒŒ, cb

  • roomData : ๋ฐฉ์ •๋ณด ์ „ํŒŒ when join,disconnect

FB

  • react-router-dom : Link : onClick ์ด๋ฒˆํŠธ > to ์— ๊ฑธ๋ฆฌ ๊ฒฝ๋กœ๋กœ ๊ฐ€๋Š”๋ฐ, e.prevenDefault๋กœ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค.

FB

  • ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ์ด๋ผ ๋จธ๋ฆฌ ์•„ํ”„๋„ค...
  • emit์„ ํ• ๊ฒƒ๋งŒ ์ •ํ•˜์ž.

snippet

socket.join
socket.emit("",{},()=>{}) call bakc
socket.on("",({},()) =>{}))

io.to().emit
  • socket.emit 1:1 ๋ฉ”์‹œ์ง•
  • socket.broadcast.emit ๋‚˜๋นผ๊ณ  ์ „๋ถ€ ๋ฉ”์‹œ์ง•
  • io.to().emit ๋‚˜ ํฌํ•จ ์ „๋ถ€ ๋ฉ”์‹œ์ง•

BUG

  • ๋’ค๋กœ๊ฐ€๊ธฐํ•˜๋ฉด, useEffect cleanup ์•ˆ๋จ, ๋‹ค์‹œ ๋˜ ๋“ค์–ด๊ฐ€๋ฉด ์ถฉ๋Œ