๋ฐ์ดํฐ ์์ค๋ ํ์ฌ ์๊ฐ, ์๋ฒ์ ์น ์์ผ ์ฐ๊ฒฐ, ํค๋ณด๋ ์ ๋ ฅ, ์ง๋ฆฌ์ ์์น ๋ณ๊ฒฝ, ํ์คํ ๋ฆฌ ๋ผ์ฐํ ๋ณ๊ฒฝ ๋ฑ์ด ๋ ์ ์์ต๋๋ค.
์ด ์ค์ ๋ฐ keyEvent์ ์ถ์ฒ์ websocket ๋๋ ๋ค๋ฅธ ๊ฒฝ์ฐ ์์ฑ ๋ฐฉ๋ฒ์ ์ดํดํ ์ ์์ต๋๋ค.
setup ๋ฐ keyEvent๋ ์ผ์์ ์ผ๋ก ์ฌ์ฉํ ์์๋ ํค์ด๋ฉฐ ๋ชจ๋ ๋ฌธ์์ด์ด ๋ ์ ์์ต๋๋ค.
์ฆ,์ด ํค๋ ๊ฐ๋ฐ์๊ฐ ์ฌ๊ธฐ์์ ํน์ ์ ํ์ ๊ธฐ๋ฅ์ ํ์ํ๋ ๋ฐ ๋์์ด๋๋ ์ฉ๋๋ก๋ง ์ฌ์ฉ๋๋ฉฐ, ๋์คํจ์น ๋ฐ ๊ธฐ๋ก ๋ง ์ ๋ฌ๋๋ฉฐ ํน์ ๋ชจ๋ํฐ๋ง ์ฝ๋์๋ ๋ชจ๋ํฐ๋ง์ ๊ตฌํํ๊ธฐ ์ํด ํน์ ํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํฉ๋๋ค.
๋ด ์ดํด๊ฐ ๋ง์ต๋๊น?
์, ์ฌ๊ธฐ์์๋ ํค / ๊ฐ ํ์์ ์ฌ์ฉํฉ๋๋ค. ํ์ฌ๋ ์ฃผ๋ก ์ดํํธ ๋ฐ ๋ฆฌ๋์์ ํ์์ ์ผ์น์ํค๋ ๊ฒ์ด ๋ชฉ์ ์ด๋ฉฐ, ์ฐจํ ๊ตฌ๋ ์ทจ์ ๊ธฐ๋ฅ์ด ์ง์๋๋ฉฐ ํค๊ฐ ์ฌ์ฉ๋ฉ๋๋ค.
์ดํดํฉ๋๋ค, ๊ฐ์ฌํฉ๋๋ค.
ํ์ง๋ง ์ ๋
ผ์์ ์๋ฏธ๋ฅผ์ด ๋ฌธ์์ ์ถ๊ฐ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ ์ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. :)
๊ตฌ๋ ์ ๋ฐ์ดํฐ๋ฅผ ๊ตฌ๋ ํ ์ฅ์๋ฅผ ์ ์ ํ ๋ฟ์ ๋๋ค. ๊ทธ๋ฌ๋ฉด ๋์คํจ์น์ ํ์คํ ๋ฆฌ๊ฐ ์ ๋ฌ๋๊ณ ๊ตฌ๋ ๋๋ ๋ชจ๋ํฐ๋ง ๋ฐฉ๋ฒ์ ๊ตฌํํ๋ ค๋ฉด ํ์ฌ ํด๋์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํฉ๋๋ค. ๊ทธ๊ฒ ์ดํด์ ๋๊น? ๋์คํจ์น๋ redux ์ ์ฅ์์ ๋์คํจ์น์ด๊ณ ํ์คํ ๋ฆฌ๋ react-router์ ํ์คํ ๋ฆฌ์ ๋๋ค. ์ดํด๋ฉ๋๊น?
@ roc2539 ์.
๊ตฌ๋ ์ค์ ์์ ์ํ ๋๋ ์ํ์ ์ฝํ ์ธ ์ ์ก์ธ์ค ํ ์ ์์ต๋๊น?
@gzbigegg ์๋์, ์์ ์ ํธ๋ฆฌ๊ฑฐํ๊ณ ํจ๊ณผ๊ฐ ์ฒ๋ฆฌํ๋๋กํฉ๋๋ค.
subscriptions: {
setup ({ dispatch }) {
dispatch({ type: 'query' })
}
}
๋ ๊ฐ์ง ์ง๋ฌธ์ด ์์ต๋๋ค. ๊ทธ๊ฒ์ด ๋ง๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ๋ฌธ์์๋ ๋๋ฆ ๋๋ฌด๊ฐ ๊ทธ๋ค๊ณผ ์ฐ๋ฝ ํ ์ ์ด ์๋ค๊ณ ๋์ ์์ผ๋ฉฐ ๊ตฌ๋ ์ ๋งค์ฐ ๋ช ํํ๊ฒ ์ดํดํ์ง ๋ชปํฉ๋๋ค.
websocket๊ณผ ๊ฐ์ ๊ตฌ๋ ์์ ๋ฅผ๋ณด๊ณ ์ถ์ต๋๋ค.
์ค์ ์์ ๋ ๊ฐ์ง ์์ ์ ๋ถ๋ฆฌํ๋ ๋ฐฉ๋ฒ
@ roc2539 ๊ตฌ๋ ๋ฑ๋ก์์ ์ฝ๋ฐฑ์ ํ์ด๋ฐ ๋ฐ ์ฃผ์ ๋งค๊ฐ ๋ณ์์ ๋ํ ๋ช ํํ ๋ฌธ์๊ฐ ์์ต๋๋ค. ๋๋ต ํ ์ ์์ต๋๊น?
ํด์ ๊ฒฝ๋ก๋ก ๋ณ๊ฒฝ ํ ํ ์ค์ ์์ ํค๋ณด๋์์ ์
๋ ฅ ํ URL์ ๋ณ๊ฒฝ์ ๋ชจ๋ํฐ๋ง ํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ browserHistory๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ด์ฐฎ์ต๋๋ค.
setup ({ dispatch }) {
console.log('models-app') // ๆๅจๆนๅurlๅฐๅ๏ผไธไผ่ฟๆญคๆนๆณ
dispatch({ type: 'query' })
},
์ฐธ์กฐ ์ฉ์ผ๋ก ์์ผ์ ์๋ํ์ต๋๋ค.
// model
import * as service from '../services/socket';
subscriptions: {
socket({dispatch}){ // socket็ธๅ
ณ
return service.listen(data => {
switch (data.type) {
case 'connect':
if (data.state === 'success') {
dispatch({
type: 'connectSuccess'
})
} else {
dispatch({
type: 'connectFail'
})
}
break;
case 'welcome':
dispatch({
type: 'welcome'
});
break;
}
})
}
},
// services
import io from 'socket.io-client';
let socket = '';
export function listen(action) {
if (socket === '') {
try {
socket = io("localhost:3000");
action({
type: 'connect',
state: 'success'
});
} catch (err) {
action({
type: 'connect',
state: 'fail'
});
}
}
socket.on('welcome', () => {
action({
type: 'welcome'
})
})
}
์ง์ ๋ ํค๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ๋ ์ ํธ๋ฆฌ๊ฑฐํ๋ ๋ฐฉ๋ฒ์ ์ฐพ์ผ๋ ค๊ณ ํ์ต๋๋ค. ์๋ ์ด๊ธฐํ๋๋ฉด ๋ชจ๋ ํ ๋ฒ ์คํ๋๋ฏ๋ก์ด โโ๊ตฌ๋ ์ ๋์คํจ์น ๋ฐ ํ์คํ ๋ฆฌ ๋ง ์ ๊ณตํฉ๋๋ค ๐
๊ตฌ๋
: {
์ค์ ({๋์คํจ์น}) {
dispatch ({type : 'query'})
}
} ์ด๊ฒ์ ๋์คํจ์น ์์
์ ์ด๊ธฐ ์คํ ์ผ ๋ฟ์ด๋ฉฐ ์ค์ ๋ก ๊ตฌ๋
์์
์ ์ํํ์ง๋ ์์ต๋๋ค.
๊ฐ์๊ธฐ ๊นจ๋ฌ์
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฐธ์กฐ ์ฉ์ผ๋ก ์์ผ์ ์๋ํ์ต๋๋ค.