Redux 传奇 socket.io

Question

我目前正在开发一个聊天客户端，它必须能够接收消息和发送消息。我面临的唯一问题是我真的不知道如何在 Saga 示例的给定组件内发送消息。

我在他们的 API 文档 https://redux-saga.js.org/docs/advanced/Channels.html 中找到了示例。

我能否重用我在 watchSocketChannel 函数中创建的套接字常量？还是我只需要创建连接两次？你会建议做什么？

import {all, apply, call, fork, put, take} from 'redux-saga/effects'
import {eventChannel} from 'redux-saga';
import * as actions from "../actions";
import io from 'socket.io-client';

function createSocketConnection(url, namespace) {
    return io(url + '/' + namespace);
}

function createSocketChannel(socket) {
    return eventChannel(emit => {
        const eventHandler = (event) => {
            emit(event.payload);
        };

        const errorHandler = (errorEvent) => {
            emit(new Error(errorEvent.reason));
        };

        socket.on('message', eventHandler);
        socket.on('error', errorHandler);

        const unsubscribe = () => {
            socket.off('message', eventHandler);
        };

        return unsubscribe;
    });
}

function* emitResponse(socket) {
    yield apply(socket, socket.emit, ['message received']);
}

function* writeSocket(socket) {
    while (true) {
        const { eventName, payload } = yield take(actions.WEBSOCKET_SEND);
        socket.emit(eventName, payload);
    }
}

function* watchSocketChannel() {
    const socket = yield call(createSocketConnection, 'http://localhost:3000', 'terminal');
    const socketChannel = yield call(createSocketChannel, socket);

    console.log(socket);

    while (true) {
        try {
            const payload = yield take(socketChannel);
            yield put({type: actions.WEBSOCKET_MESSAGE, payload});
            yield fork(emitResponse, socket);
        } catch (err) {
            console.log('socket error: ', err);
        }
    }
}

export default function* root() {
    yield all([
        fork(watchSocketChannel),
    ])

我知道fork函数是把watchSocketChannel函数附加到saga上，不断监听。

Answer 1

我不确定我是否正确理解了你的问题...如果你要求 how/where 分叉 writeSocket saga 以允许你发送 actions.WEBSOCKET_SEND) 操作并将您的消息发送到套接字：

在创建套接字通道的过程中添加分支还不够吗？

const socket = yield call(createSocketConnection, 'http://localhost:3000', 'terminal');
fork(writeSocket, socket); // I've added this line
const socketChannel = yield call(createSocketChannel, socket);

Redux 传奇 socket.io

Redux Saga socket.io

socket.io

redux

redux-saga