Unable to properly establish a connection between React Native client and Node.js server with redux-saga and socket.io

Question

Quick context: I'm trying to build a react native prototype of a comment page where users can receive live updates (comments, users entering the comment screen, users leaving, etc.). To do this, I am using react-redux, redux-saga, socket.io, and node.js (server). I'm new to redux-saga so I might be missing something obvious here, so hang on, please... The culprit definitely lies in the watchCommentActions function/saga...

The problem: As soon as it is done mounting, the comment screen dispatches the following action { type: comment.room.join, value }, which is then correctly acknowledged by rootSaga, however, when trying to connect to the socket using a promise-resolve structure via const socket = yield call(connect); the promise never resolves, which blocks the generator (it does not proceed to the next yield). What's weird is that on the other side the server does log the connection to the socket, so the connection client --> server appears to be ok. Also, by hot reloading the app I can manage to resolve the promise (it's like the generator needs to run twice to resolve the socket connection), but then the socket.emit("join-room") never reaches the server and the generator gets stuck again. Similarly, when I try to fire the write generator by posting a comment and thus dispatching {type: comment.post.start, value } the *socket.emit("comment", {text: value.text}) does not reach the server either. To sum it up briefly nothing's really working and no error is getting thrown... GREAT.

Last words: Before moving my socket logic to saga the socket connection was working seamlessly. I've also tried to reuse the documentation's implementation with channels by using the same connect function instead of createWebSocketConection (https://redux-saga.js.org/docs/advanced/Channels.html) but the promise-resolve-socket situation still occurs. Also, I've noticed similar questions derived from the same git repo I've studied to understand the sagas logic (https://github.com/kuy/redux-saga-chat-example/blob/master/src/client/sagas.js), however, none of them allowed me to understand what's wrong with my implementation. Finally, if there is a better way to implement this logic with redux-saga, I am interested, all I want is a robust, centralized, and reusable implementation.

Sagas/index.js

import { all, takeEvery, takeLatest } from "redux-saga/effects";
import { comment } from "../Reducers/commentCacheReducer";
import { like } from "../Reducers/postsCacheReducer";
import { posts } from "../Reducers/postsReducer";
import flow from "./commentSagas";
import { likePost, unlikePosts } from "./likeSagas";
import { fetchPosts } from "./postsSagas";

function* watchLikeActions() {
    yield takeLatest(like.add.start, likePost);
    yield takeLatest(like.remove.start, unlikePost);
}

function* watchFetchActions() {
    yield takeEvery(posts.fetch.start, fetchPosts);
}

function* watchCommentsActions() {
    yield takeEvery(comment.room.join, flow);
}

export default function* rootSaga() {
    yield all([watchLikeActions(), watchFetchActions(), watchCommentsActions()]);
}

Sagas/commentSaga.js

import { eventChannel } from "redux-saga";
import { call, cancel, fork, put, take } from "redux-saga/effects";
import io from "socket.io-client";
import { endpoint } from "../../API/ServerAPI";
import { addUser, fetchComment, leaveRoom, removeUser } from "../Actions/commentActions";
import { comment } from "../Reducers/commentCacheReducer";

function connect() {
    const socket = io(endpoint);
    return new Promise((resolve) => {
        socket.on("connection", () => {
            resolve(socket);
        });
    });
}

function subscribe(socket) {
    return new eventChannel((emit) => {
        socket.on("users.join-room", ({ userId }) => {
            emit(addUser({ userId }));
        });
        socket.on("users.leave-room", ({ userId }) => {
            emit(removeUser({ userId }));
        });
        socket.on("comments.new", ({ comments }) => {
            emit(fetchComment({ comments }));
        });
        socket.on("users.join-room", ({ userId }) => {
            emit(addUser({ userId }));
        });

        return () => {};
    });
}

function* read(socket) {
    const channel = yield call(subscribe, socket);
    while (true) {
        let action = yield take(channel);
        yield put(action);
    }
}

function* write(socket) {
    while (true) {
        const { value } = yield take(comment.post.start);
        socket.emit("comment", { text: value.text });
    }
}

function* handleIO(socket) {
    yield fork(read, socket);
    yield fork(write, socket);
}

export default function* flow() {
    const socket = yield call(connect);
    socket.emit("join-room", (res) => {
        console.log(JSON.stringify(res));
    });

    const task = yield fork(handleIO, socket);

    let action = yield take(leaveRoom);
    yield cancel(task);
    yield put(action);
    socket.emit("leave-room");
}

server.js

const http = require("http");
const app = require("./app");
const socketIo = require("socket.io");
const mongoose = require("mongoose");

const normalizePort = (val) => {
    const port = parseInt(val, 10);

    if (isNaN(port)) {
        return val;
    }
    if (port >= 0) {
        return port;
    }
    return false;
};
const port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

const errorHandler = (error) => {
    if (error.syscall !== "listen") {
        throw error;
    }
    const address = server.address();
    const bind = typeof address === "string" ? "pipe " + address : "port: " + port;
    switch (error.code) {
        case "EACCES":
            console.error(bind + " requires elevated privileges.");
            process.exit(1);
            break;
        case "EADDRINUSE":
            console.error(bind + " is already in use.");
            process.exit(1);
            break;
        default:
            throw error;
    }
};

const server = http.createServer(app);

const io = socketIo(server);

server.on("error", errorHandler);
server.on("listening", () => {
    const address = server.address();
    const bind = typeof address === "string" ? "pipe " + address : "port " + port;
    console.log("Listening on " + bind);
});

// comments room
// Storing in variable just for testing purposes, will
// connect to MongoDB once the socket problem gets solved.
let userIds = [];

io.on("connection", (socket) => {
    console.log("[server] connect");
});

io.on("join-room", (socket, {userId}) => {
    console.log(`[server] join-room: ${userId}`);
    userIds.push(userId);
    socket.socket.username = userId;
    socket.broadcast.emit("users.join-room", { userId });
});

io.on("leave-room", (socket) => {
    const { userId } = socket.socket;
    if (userId) {
        console.log(`[server] leaving-room: ${userId}`);
        userIds = userIds.filter((u) => u !== userId);
        delete socket.socket["userId"];

        socket.broadcast("users.leave-room", { userId });
    }
});

// Storing in variable just for testing purposes, will
// connect to MongoDB once the socket problem gets solved.
let messages = [];

io.on("comment", (socket, { text }) => {
    console.log(`[server] message: ${text}`);
    const message = {
        id: messages.length,
        text,
        userId: socket.socket.userId
    };
    messages.push(message);

    socket.broadcast("comments.new", { message });
});

EDIT 1 After quickly going through socket.io documentation I realised that my server quick implementation was faulty, I simply forgot to register event handlers inside the connecting protocol... However, the generator still requires to be triggered twice for the socket connection to start, allowing the promise to resolve and the user to join the socket room.

io.on("connect", (socket) => {
    console.log("[server] connect");
    socket.on("join-room", ({ userId }) => {
        console.log(`[server] join-room: ${userId}`);
        userIds.push(userId);
        socket.username = userId;
        socket.broadcast.emit("users.join-room", { userId });
    });

    socket.on("leave-room", ({ userId }) => {
        if (userId) {
            console.log(`[server] leaving-room: ${userId}`);
            userIds = userIds.filter((u) => u !== userId);
            delete socket["userId"];

            socket.broadcast.emit("users.leave-room", { userId });
        }
    });

    socket.on("comment", ({ text }) => {
        console.log(`[server] message: ${text}`);
        const message = {
            id: messages.length,
            text,
            userId: socket.userId
        };
        messages.push(message);

        socket.broadcast.emit("comments.new", { message });
    });
});

Unable to properly establish a connection between React Native client and Node.js server with redux-saga and socket.io

Answers (1)

Related Questions