代码之家 › 专栏 › 技术社区 › Adnan Ali

Redux传奇未对带电插座采取行动

laravel-echo redux-saga socket.io redux reactjs

0

Adnan Ali · 技术社区 · 5 年前

每当有响应出现在实时套接字上时,我都会使用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
}

这里缺少什么,任何帮助都将不胜感激。

0 回复 | 直到 5 年前

1

2

Adnan Ali 5 年前

我能够通过以下方式解决这个问题 事件频道

上述示例的工作代码为:

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)
    }
}

下面是更新的套接字订阅和监听代码:

从“..”导入商店/存储/配置存储' 从“laravel Echo”导入Echo 从“socket.io客户端”导入Socketo 从“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
}