Question

我有以下问题：服务器通过websocket向客户端发送消息。在客户端上，我需要向用户显示此消息。但是问题是有时候消息很快，我需要组织某种队列并逐条显示这些消息。

我的传奇：

import { eventChannel, effects, takeEvery } from 'redux-saga';
import { types, actionCreators } from './actions';

const { call, put, take, race } = effects;

function watchMessages(socket) {
  return eventChannel((emitter) => {
    socket.onopen = (e) => (emitter(actionCreators.socketOpen(e)));
    socket.onclose = (e) => (emitter(actionCreators.socketClose(e)));
    socket.onerror = (e) => (emitter(actionCreators.socketError(e)));
    socket.onmessage = (e) => (emitter(actionCreators.socketMessage(e)));

    return () => {
      socket.close();
    };
  });
}

function* internalListener(socket) {
  while (true) {
    const data = yield take(types.SOCKET_SEND);
    socket.send(data.payload);
  }
}

function* externalListener(socketChannel) {
  while (true) {
    const action = yield take(socketChannel);
    yield put(action);
  }
}

function* wsHandling(action) {
  const socket = action.payload.socket;
  while (true) {
    const socketChannel = yield call(watchMessages, socket);
    const { cancel } = yield race({
      task: [call(externalListener, socketChannel), call(internalListener, socket)],
      cancel: take(types.SOCKET_CLOSE),
    });
    if (cancel) {
      socketChannel.close();
    }
  }
}

export default function* rootSaga(action) {
  yield takeEvery(types.SOCKET_CONNECT, wsHandling);
}

我的减速器：

function dataReducer(state = initialStateData, action) {
  switch (action.type) {
    case types.SOCKET_MESSAGE:
      if (action.payload.channel === 'channel1') {
        return state
          .set('apichannel1', action.payload);
      } else if (action.payload.channel === 'channel2') {
        return state
          .set('apichannel2', action.payload);
      } else if (action.payload.channel === 'channel3') {
        return state
          .set('apichannel3', action.payload);
      }
      return state;
    default:
      return state;
  }
}

现在，当收到新消息时，我正在更改状态并仅将其显示在屏幕上。

有什么想法可以将其转换为以下内容：将到达的消息放入某种队列中，并在某个自定义时间在屏幕上逐一显示它们？

Answer 1

您可以使用actionChannel效果在redux传奇中缓冲（排队）动作。

https://redux-saga.js.org/docs/advanced/Channels.html#using-the-actionchannel-effect

然后，您可以以自己的速度从通道的缓冲区读取数据。

我创建了一个简化的示例，该示例侦听消息并一次最多显示3条消息，每次显示5秒。参见：

https://codesandbox.io/s/88m88z2o60

在底部有一个控制台面板，使用它来调用addMsg('Msg: ' + Math.random())以模拟新的socket.io消息。

Answer 2

所以我是这样做的，下面是代码，也许对某人有用

let pendingTasks = [];
let activeTasks = [];

function watchMessages(socket) {
  return eventChannel((emitter) => {
    socket.onopen = (e) => (emitter(actionCreators.socketOpen(e)));
    socket.onclose = (e) => (emitter(actionCreators.socketClose(e)));
    socket.onerror = (e) => (emitter(actionCreators.socketError(e)));
    socket.onmessage = (e) => (emitter(actionCreators.socketMessage(e)));

    return () => {
      socket.close();
    };
  });
}

function* internalListener(socket) {
  while (true) {
    const data = yield take(types.SOCKET_SEND);
    socket.send(data.payload);
  }
}

function* externalListener(socketChannel) {
  while (true) {
    const action = yield take(socketChannel);
    pendingTasks = [...pendingTasks, action];
  }
}

function* wsHandling(action) {
  const socket = action.payload.socket;
  while (true) {
    const socketChannel = yield call(watchMessages, socket);
    const { cancel } = yield race({
      task: [call(externalListener, socketChannel), call(internalListener, socket)],
      cancel: take(types.SOCKET_CLOSE),
    });
    if (cancel) {
      socketChannel.close();
    }
  }
}

function* tasksScheduler() {
  while (true) {
    const canDisplayTask = activeTasks.length < 1 && pendingTasks.length > 0;
    if (canDisplayTask) {
      const [firstTask, ...remainingTasks] = pendingTasks;
      pendingTasks = remainingTasks;
      yield fork(displayTask, firstTask);
      yield call(delay, 300);
    }
    else {
      yield call(delay, 50);
    }
  }
}

function* displayTask(task) {
  activeTasks = [...activeTasks, task];
  yield put(task);
  yield call(delay, 3000);
  activeTasks = _.without(activeTasks, task);
}

export default function* rootSaga(action) {
  yield [
    takeEvery(types.SOCKET_CONNECT, wsHandling),
    takeEvery(types.SOCKET_CONNECT, tasksScheduler),
  ];
}

redux-saga，websocket和操作队列

2 个答案: