无法使用redux-saga和Node.js服务器正确地建立本机客户端和socket.io服务器之间的连接。

Question

快速上下文:我正在尝试构建一个评论页面的react原生原型，用户可以在其中接收实时更新(评论、用户进入评论屏幕、用户离开等等)。为此，我使用了react redux、redux、socket.io和node.js (服务器)。我刚开始重温传奇所以我可能遗漏了一些显而易见的东西，所以请稍等.罪魁祸首肯定是watchCommentActions函数/传奇.

问题：一旦完成挂载，评论屏幕就会发出以下操作{ type: comment.room.join、value }，然后rootSaga正确地确认了该操作，但是，当试图使用connect = proceed (Connect)连接到套接字时，承诺永远不会解决，这会阻塞生成器(它不会继续到下一个输出)。奇怪的是，在另一边，服务器会记录到套接字的连接，所以连接客户端->服务器似乎没有问题。此外，通过热重新加载应用程序，我可以设法解决承诺(就像生成器需要运行两次才能解决套接字连接)，但是socket.emit(“连接室”)永远不会到达服务器，生成器再次陷入困境。类似地，当我试图通过发布一个注释来触发写生成器，从而分配{type: comment.post.start，value }*socket.emit(“注释”，{text: value.text})也没有到达服务器。总之，没有什么是真正有效的，没有错误被抛出.太棒了。

最后一句话：在将套接字逻辑移到佐贺之前，套接字连接是无缝工作的。我还尝试通过使用相同的连接函数来重用文档的实现，而不是使用https://redux-saga.js.org/docs/advanced/Channels.html (https://redux-saga.js.org/docs/advanced/Channels.html)，但承诺解决套接字的情况仍然存在。此外，我也注意到了类似的问题，这些问题来自于我研究过的理解sagas逻辑(https://github.com/kuy/redux-saga-chat-example/blob/master/src/client/sagas.js)的git，但是，它们都没有让我理解我的实现有什么问题。最后，如果有更好的方法用redux-saga实现这个逻辑，我感兴趣的只是一个健壮、集中和可重用的实现。

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 });
});

编辑1在快速浏览socket.io文档之后，我意识到我的服务器快速实现是错误的，我只是忘了在连接协议中注册事件处理程序.但是，要启动套接字连接，仍然需要触发两次生成器，这样才能保证解析，并允许用户加入套接字室。

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 });
    });
});

Answer 1

是connect，不是connection

https://github.com/socketio/socket.io-client

(commentSagas.js > connect())