Redux Saga socket.io - PullRequest
Новая
       17

Redux Saga socket.io

0 голосов
/ 22 марта 2019

В настоящее время я разрабатываю чат-клиент, который должен иметь возможность получать сообщения и отправлять сообщения. Единственная проблема, с которой я сталкиваюсь, заключается в том, что я действительно не знаю, как отправлять сообщения внутри данного компонента из примера Saga.

Я нашел пример в их документации API https://redux -saga.js.org / docs / advanced / Channels.html .

Могу ли я повторно использовать const сокета, который я создал внутри функции 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 к саге и постоянно слушает.

1 Ответ

1 голос
/ 26 марта 2019

Я не уверен, что правильно понял ваш вопрос ... Если вы спрашиваете, как / где разветвлять сагу writeSocket, чтобы позволить вам отправить действие 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);
...