Некорректный вывод данных в чат-приложении
Вопрос по поводу работы с приложением чата на react
+ react router
с одной стороны и node js
, socket.io
с другой стороны.
Начнем с того, что userHandler
получает переданные ему параметры при регистрации пользователя при помощи socket.emit
.
Вот код userHandler
:
import { JSONFilePreset } from "lowdb/node";
import { nanoid } from "nanoid";
const users = {users: []}
const db = await JSONFilePreset('db/users.json', users)
db.update((userInit) => {
userInit.users.push( {
email: 'name1gmail.com',
username: 'name1',
userId: nanoid(8),
roomId: 123
})
})
const socketHandler = (jwt,socket) => {
const token = socket.handshake.auth.token
try {
const decoded = jwt.verify(token, '111')
socket.handshake.auth.id = decoded.id;
socket.handshake.auth.email = decoded.email;
socket.handshake.auth.roomId = decoded.roomId
}
catch (err) {
console.error('ошибка аутентификации', err )
socket.disconnect()
}
}
const userHandler = (jwt,socket) => {
function emailHandler(params) {
const infoToken = {
id: params.userId,
username: params.username,
email: params.email,
roomId: params.roomId
}
const secretKey = '111'
const createTokenFunc = (infoToken, secretKey) => {
const tokens = jwt.sign(infoToken, secretKey,{expiresIn: '1h'})
return tokens
}
socket.emit('start', createTokenFunc(infoToken,secretKey))
socketHandler(jwt,socket)
db.update((usersFinal) => {
usersFinal.users.push({
...params,
})
})
db.write()
console.log('Пользователь подключился:', socket.handshake.auth.roomId)
socket.join(`room-${socket.handshake.auth.roomId}`)
console.log('user connected')
}
socket.on('email', emailHandler)
}
export default userHandler
Здесь срабатывает событие start
, которое передаёт токен через функцию, и затем должна выполняться функция socketHandler(jwt,socket)
, в которой будет декодироваться токен.
Проблема заключается в том, что он выводит в строке 'Пользователь подключился:' id предыдущей комнаты.
Вот код с клиентской части, где токен добавляется в локальное хранилище:
import {Main} from "components/Main";
import { useEffect, useState } from "react";
import { io } from "socket.io-client";
export function App() {
const [count, setCount] = useState(0);
const [socket, setSocket] = useState(null);
useEffect(() => {
const token = localStorage.getItem(`token-${count === 1 ? count : count + 1}`);
const newSocket = io('http://localhost:3001', {
auth: {
token: token,
},
});
newSocket.on('start', (tokens) => {
const newCount = count + 1;
setCount(newCount);
localStorage.setItem(`token-${newCount}`, tokens);
});
setSocket(newSocket);
return () => {
newSocket.disconnect();
};
}, [count]);
return (
<Main socket={socket}/>
);
}