Javascript 如何使用套接字IO创建客户端队列
我正在尝试为每个超过每次聊天2次限制的套接字创建一个队列,这样我想保持套接字连接,以便在聊天室中的两个人中的一个离开后为队列中的套接字建立连接(我想创建一个客户服务聊天室) 这是我的代码: 客户端:Javascript 如何使用套接字IO创建客户端队列,javascript,node.js,sockets,websocket,socket.io,Javascript,Node.js,Sockets,Websocket,Socket.io,我正在尝试为每个超过每次聊天2次限制的套接字创建一个队列,这样我想保持套接字连接,以便在聊天室中的两个人中的一个离开后为队列中的套接字建立连接(我想创建一个客户服务聊天室) 这是我的代码: 客户端: import { useEffect, useRef, useState } from 'react'; import socketIOClient from 'socket.io-client'; const NEW_CHAT_MESSAGE_EVENT = 'newChatMessage';
import { useEffect, useRef, useState } from 'react';
import socketIOClient from 'socket.io-client';
const NEW_CHAT_MESSAGE_EVENT = 'newChatMessage';
const SOCKET_SERVER_URL = 'http://localhost:4000';
const useChat = (roomId) => {
const [messages, setMessages] = useState([]);
const socketRef = useRef();
useEffect(() => {
socketRef.current = socketIOClient(SOCKET_SERVER_URL, {
query: { roomId },
});
socketRef.current.on(NEW_CHAT_MESSAGE_EVENT, (message) => {
const incomingMessage = {
...message,
ownedByCurrentUser: message.senderId === socketRef.current.id,
};
setMessages((messages) => [...messages, incomingMessage]);
});
socketRef.current.on('disconnect', (data) => {
console.log('Connection fell or your browser is closing.');
});
return () => {
socketRef.current.disconnect();
};
}, [roomId, messages, socketRef]);
const sendMessage = (messageBody) => {
socketRef.current.emit(NEW_CHAT_MESSAGE_EVENT, {
body: messageBody,
senderId: socketRef.current.id,
});
};
return { messages, sendMessage };
};
export default useChat;
const express = require('express');
const server = require('http').Server(express);
const io = require('socket.io')(server, {
cors: {
origin: '*',
},
});
const PORT = 4000;
const NEW_CHAT_MESSAGE_EVENT = 'newChatMessage';
const users = [];
const queue = [];
io.on('connection', (socket) => {
const { roomId } = socket.handshake.query;
const queueManagement = (socket) => {
if (queue.indexOf(socket) !== -1) {
queue.remove(socket);
socket.join(roomId);
}
// else if (queue.length >= 3) {
// socket.leave(roomId);
// }
else {
queue.push(socket);
}
};
socket.join(roomId);
console.log('Queue', queue.length);
if (queue.length < 2) {
console.log('if');
users.push(socket.id);
queueManagement(socket);
} else {
console.log('else');
queueManagement(socket);
setTimeout(() => socket.disconnect(true));
console.log('userLogged', socket.id + 'add in the queue');
}
console.log('Queue', queue.length);
console.log('users arr', users.length);
console.log('User ' + socket.id + ' connected');
// console.log(users);
socket.on(NEW_CHAT_MESSAGE_EVENT, (data) => {
io.in(roomId).emit(NEW_CHAT_MESSAGE_EVENT, data);
});
socket.on('disconnect', () => {
console.log('User ' + socket.id + ' disconnected');
// queueManagement(users[1]);
socket.leave(roomId);
queue[0].join(roomId);
});
});
server.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
服务器:
import { useEffect, useRef, useState } from 'react';
import socketIOClient from 'socket.io-client';
const NEW_CHAT_MESSAGE_EVENT = 'newChatMessage';
const SOCKET_SERVER_URL = 'http://localhost:4000';
const useChat = (roomId) => {
const [messages, setMessages] = useState([]);
const socketRef = useRef();
useEffect(() => {
socketRef.current = socketIOClient(SOCKET_SERVER_URL, {
query: { roomId },
});
socketRef.current.on(NEW_CHAT_MESSAGE_EVENT, (message) => {
const incomingMessage = {
...message,
ownedByCurrentUser: message.senderId === socketRef.current.id,
};
setMessages((messages) => [...messages, incomingMessage]);
});
socketRef.current.on('disconnect', (data) => {
console.log('Connection fell or your browser is closing.');
});
return () => {
socketRef.current.disconnect();
};
}, [roomId, messages, socketRef]);
const sendMessage = (messageBody) => {
socketRef.current.emit(NEW_CHAT_MESSAGE_EVENT, {
body: messageBody,
senderId: socketRef.current.id,
});
};
return { messages, sendMessage };
};
export default useChat;
const express = require('express');
const server = require('http').Server(express);
const io = require('socket.io')(server, {
cors: {
origin: '*',
},
});
const PORT = 4000;
const NEW_CHAT_MESSAGE_EVENT = 'newChatMessage';
const users = [];
const queue = [];
io.on('connection', (socket) => {
const { roomId } = socket.handshake.query;
const queueManagement = (socket) => {
if (queue.indexOf(socket) !== -1) {
queue.remove(socket);
socket.join(roomId);
}
// else if (queue.length >= 3) {
// socket.leave(roomId);
// }
else {
queue.push(socket);
}
};
socket.join(roomId);
console.log('Queue', queue.length);
if (queue.length < 2) {
console.log('if');
users.push(socket.id);
queueManagement(socket);
} else {
console.log('else');
queueManagement(socket);
setTimeout(() => socket.disconnect(true));
console.log('userLogged', socket.id + 'add in the queue');
}
console.log('Queue', queue.length);
console.log('users arr', users.length);
console.log('User ' + socket.id + ' connected');
// console.log(users);
socket.on(NEW_CHAT_MESSAGE_EVENT, (data) => {
io.in(roomId).emit(NEW_CHAT_MESSAGE_EVENT, data);
});
socket.on('disconnect', () => {
console.log('User ' + socket.id + ' disconnected');
// queueManagement(users[1]);
socket.leave(roomId);
queue[0].join(roomId);
});
});
server.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
const express=require('express');
const server=require('http').server(express);
const io=require('socket.io')(服务器{
cors:{
来源:“*”,
},
});
常数端口=4000;
const NEW_CHAT_MESSAGE_事件='newChatMessage';
常量用户=[];
常量队列=[];
io.on('连接',(套接字)=>{
const{roomId}=socket.handshake.query;
常量队列管理=(套接字)=>{
if(queue.indexOf(socket)!=-1){
移除(套接字);
socket.join(roomId);
}
//否则如果(queue.length>=3){
//请假(室友);
// }
否则{
队列推送(套接字);
}
};
socket.join(roomId);
console.log('Queue',Queue.length);
如果(队列长度<2){
console.log('if');
push(socket.id);
队列管理(socket);
}否则{
console.log('else');
队列管理(socket);
setTimeout(()=>socket.disconnect(true));
log('userLogged',socket.id+'addin the queue');
}
console.log('Queue',Queue.length);
console.log('users arr',users.length);
log('User'+socket.id+'connected');
//console.log(用户);
socket.on(新的聊天信息事件,(数据)=>{
io.in(roomId).emit(新的聊天信息事件、数据);
});
socket.on('disconnect',()=>{
log('User'+socket.id+'disconnected');
//队列管理(用户[1]);
请假(室友);
队列[0]。加入(roomId);
});
});
服务器。侦听(端口,()=>{
log(`listing on port${port}`);
});
如有必要,我将提供任何其他信息。
Github repo及其所有代码: