Creating an Event Channel to Listen to Web Sockets

This example demonstrates how to create an event channel in Redux-Saga that listens to messages from a WebSocket connection, parses the incoming data, and dispatches actions to the Redux store based on the data received.
import { eventChannel } from 'redux-saga';
import { take, call, put } from 'redux-saga/effects';
import { websocketConnected, websocketMessageReceived } from './actions';
Import necessary effects from Redux-Saga and actions from the action creator.
function createWebSocketChannel(socket) {
  return eventChannel(emit => {
    socket.onmessage = event => {
      const parsedData = JSON.parse(;

    socket.onclose = () => {

    return () => {
Defines a function that creates an event channel from a WebSocket object. It listens for messages and closes the channel when the socket closes.
function* listenForSocketMessages(socket) {
  const socketChannel = yield call(createWebSocketChannel, socket);

  try {
    while (true) {
      const payload = yield take(socketChannel);
      yield put(websocketMessageReceived(payload));
  } finally {
    if (yield cancelled()) {
Saga that listens for messages on the WebSocket channel and dispatches an action with the message payload to the Redux store. It also handles saga cancellation.
function* websocketSaga() {
  const socket = new WebSocket('ws://');
  socket.onopen = function() {
    yield put(websocketConnected());
  yield fork(listenForSocketMessages, socket);
Main saga that initiates the WebSocket connection and starts the listener saga.