堆栈 - React native、socket.io、Node.js
我正在开发一个聊天应用程序。在这一点上,我有这样的流程:
用户单击“发送消息”-> 消息由 socket.io 发送到服务器-> 服务器上的套接字连接获取消息。
现在,从那时起,我想要的是从服务器发送到 redux reducer 的消息,然后 reducer 将返回前端组件将呈现的新状态。
如何在服务器端套接字和 reducer 之间建立连接?
当前服务器:
const express = require("express");
const app = express();
const port = 3000;
const server = require("http").createServer(app);
let io = require("socket.io")(server);
app.get("/", (req, res) => res.send("Hello World!"));
io.on("connection", socket => {
console.log("a user connected");
socket.on("join", (name, message) => {
console.log("chat room connected")
});
});
server.listen(port, () => console.log(`listening on port ${port}!`));
电流 reducer :
const initialState = {
chats: [
]
};
const chatsReducer = (state = initialState, action) => {
let sender = action.sender;
let message = action.message;
switch (action.type) {
case SEND_MESSAGE:
let newMessage = {
sender: sender,
message: message
};
let newState = { ...state, chats: state.chats.push(newMessage) };
return state;
default:
state;
}
return state;
};
export default chatsReducer;
最佳答案
您可以像这样从节点服务器发出新消息。
let msg = {message: 'Actual Message', sender: 'Name of sender'}
io.on('connection', socket => {
socket.on('chat message', msg => {
io.emit('chat message', msg);
});
});
然后在聊天组件中监听聊天消息事件。
componentDidMount() {
this.socket = io("http://server.address:port");
this.socket.on("chat message", msg => {
this.props.onMessageReceivedAction (msg); // import action and will execute on message received event
});
});
然后添加 Action :
export const onMessageReceivedAction = (params) => {
return {type: MESSAGE_RECEIVED, payload:msg};
};
将收到消息的 reducer 案例添加到您的 reducer
case MESSAGE_RECEIVED:
let newMessage = {
sender: payload.sender,
message: payload.message
};
return { ...state, chats: state.chats.push(newMessage) };
这将返回新状态,并且映射到上述状态的组件属性将被重新渲染。
希望这能回答您的问题。
关于react-native - 将 socket.io 与 redux reducer 相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60004278/