问题描述
每当响应出现在使用 redux-saga 的实时套接字上时,我都会尝试分派一个动作。 我已经能够到达应该放置(调度)操作的代码行,但仅在此实时套接字情况下未调度实时操作。
这是我的代码:
export function* watchEditorAcceptInvitatioRequest(action) {
yield takeEvery(START_EDITOR_ACCEPT_INVITATION_SOCKET,edditorAcceptInvitationSocket)
}
export function* edditorAcceptInvitationSocket(action) {
const {token,user_id} = action.payload
const subscription = SocketIo.subscribe(token,'/broadcasting/authTest')
yield put(listenEditorAcceptInvitationSocket())
let result = yield call(SocketIo.listen,subscription,`new-test-channel.${user_id}`,'.new-test-test',(response) => edditorAcceptInvitationReceived({
func: receiveEditorAcceptInvitationSocket,response: response
}))
}
export function* edditorAcceptInvitationReceived(action) {
while(true) {
console.log(action.response) // I am seeing this in response but the action put in blow line
yield put(action.func(action.response))
}
}
import Echo from 'laravel-echo'
import Socketio from 'socket.io-client'
const BASE_URL = 'https://www.my domain.com'
const PORT = 1111
const subscribe = (token,authEndpoint) => new Echo({
broadcaster: 'socket.io',host: `${BASE_URL}:${PORT}`,client: Socketio,authEndpoint: authEndpoint,auth: {
headers: {
Authorization: 'Bearer ' + token,Accept: 'application/json',},})
const listen = (echo,channel,event,callback) => {
echo.private(channel).listen(event,e => {
const generator = callback(e)
generator.next()
})
}
export default {
subscribe,listen
}
这里缺少什么,任何帮助将不胜感激。
解决方法
我可以使用 eventChannel
解决这个问题上面例子的工作代码是:
export function* watchEditorAcceptInvitatioRequest(action) {
yield takeEvery(START_EDITOR_ACCEPT_INVITATION_SOCKET,edditorAcceptInvitationSocket)
}
export function* edditorAcceptInvitationSocket(action) {
const {token,user_id} = action.payload
const subscription = SocketIo.subscribe(token,'/broadcasting/authTest')
yield put(listenEditorAcceptInvitationSocket())
let channel = yield call(SocketIo.listen,subscription,`new-test-channel.${user_id}`,'.new-test-test',receiveEditorAcceptInvitationSocket)
while (true) {
const action = yield take(channel)
yield put(action)
}
}
下面是更新的socket订阅和监听代码:
从'../store/configureStore'导入商店 从'laravel-echo'导入回声 从“socket.io-client”导入 Socketio 从'redux-saga'导入{eventChannel}
const BASE_URL = 'https://www.my domain.com'
const PORT = 1111
const subscribe = (token,authEndpoint) => new Echo({
broadcaster: 'socket.io',host: `${BASE_URL}:${PORT}`,client: Socketio,authEndpoint: authEndpoint,auth: {
headers: {
Authorization: 'Bearer ' + token,Accept: 'application/json',},})
const listen = (echo,channel,event,callback) => {
return eventChannel( emitter => {
echo.private(channel).listen(event,e => {
emitter(store.dispatch(callback(e)))
})
return () => {
console.log('returning channel')
}
})}
export default {
subscribe,listen
}