cd ./client && yarn install && yarn start
cd ./server && yarn install && yarn start
- socket.io ๋ฅผ ์ด์ฉํ real-time ์ฑํ App์ ๋๋ค.
- ๊ฐ์ Room ์ ๊ฐ์ง ์ฌ๋๋ผ๋ฆฌ ๋ํํ ์ ์์ผ๋ฉฐ
- ๋๋ช ์ด์ธ์ ์ ์ฅ ๋ถ๊ฐํฉ๋๋ค.
- FaceBook Message ์คํ์ผ์ ํด๋ก ํ์์ต๋๋ค.
node.js ( express, socket.io, redux )
react ( styled-components)
-
users state ๊ด๋ฆฌ
-
addUser
-
getUser
-
removeUser
-
getUsersInRoom
-
ServerSide:emit
-
message : client๋ก ๋ฉ์์ง๋ฅผ ๋ณด๋ธ๋ค. โ
-
roomData : ๋ฐฉ์ ์ธ์ ์ ๋ณด๋ฅผ ๋ณด๋ธ๋ค. โ
-
ClientSide:emit
-
connection โ
-
disconnect โ
-
join โ
-
sendMessage โ
-
connection, disconnect
-
join : user๋ฑ๋ก,๊ธฐ๋ณธ ๋ฉ์์ง, ๋ธ๋ก๋ ์ผ์คํธ ์๋ฆผ, room์ ๋ณด ์ ๊ณต
-
sendMessage & Message : ๋ฉ์์ง ์ ํ, cb
-
roomData : ๋ฐฉ์ ๋ณด ์ ํ when join,disconnect
- react-router-dom : Link : onClick ์ด๋ฒํธ > to ์ ๊ฑธ๋ฆฌ ๊ฒฝ๋ก๋ก ๊ฐ๋๋ฐ, e.prevenDefault๋ก ๋ง์ ์ ์๋ค.
- ์๋ฐฉํฅ ํต์ ์ด๋ผ ๋จธ๋ฆฌ ์ํ๋ค...
- emit์ ํ ๊ฒ๋ง ์ ํ์.
socket.join
socket.emit("",{},()=>{}) call bakc
socket.on("",({},()) =>{}))
io.to().emit
- socket.emit 1:1 ๋ฉ์์ง
- socket.broadcast.emit ๋๋นผ๊ณ ์ ๋ถ ๋ฉ์์ง
- io.to().emit ๋ ํฌํจ ์ ๋ถ ๋ฉ์์ง
- ๋ค๋ก๊ฐ๊ธฐํ๋ฉด, useEffect cleanup ์๋จ, ๋ค์ ๋ ๋ค์ด๊ฐ๋ฉด ์ถฉ๋