Handling Real-time Events with Event Channel

Create an event channel that listens to a WebSocket connection for real-time data, showing how Redux-Saga can handle external events and dispatch actions to the store based on those events.
import { eventChannel, END } from 'redux-saga';
import { call, take, put } from 'redux-saga/effects';

// Creating an event channel from the WebSocket
function createWebSocketChannel(sock) {
  return eventChannel(emit => {
    sock.onmessage = (event) => {

    sock.onclose = () => {

    const unsubscribe = () => {
      sock.onmessage = null;

    return unsubscribe;
This code snippet creates a Redux-Saga event channel that listens to incoming messages from a WebSocket connection. Each message received is emitted to subscribers of this channel, and when the WebSocket closes, it emits an END signal to close the channel.
function* listenForSocketMessages() {
  const socket = new WebSocket('ws://');
  const socketChannel = yield call(createWebSocketChannel, socket);

  try {
    while (true) {
      // Taking events from the channel
      const payload = yield take(socketChannel);
      // Dispatching an action with the payload received from the WebSocket
      yield put({ type: 'SOCKET_MESSAGE_RECEIVED', payload });
  } catch (err) {
    console.error('socket error:', err);
  } finally {
    console.log('WebSocket disconnected');
This generator function demonstrates how to listen for messages from the created WebSocket channel. It waits for messages from the `take` effect, dispatches actions with received payloads to the Redux store, and handles errors or a disconnection in a structured way.