javascript - SocketIO 离开房间并加入新的房间逻辑
问题描述
我想知道当我点击新房间时如何离开房间
我的页面是这样的。
左侧列表来自 MySQL 服务器,它获取我的聊天列表。每个房间名称都有 id 值,即房间名称。它还具有onclick功能,可以在客户端使用功能。
我想当我单击每个房间名称并运行 joinChat() 函数和在 joinChat() 函数内部时
- 使用 JoinRoom 套接字
- 在服务器端运行
socket.leave(`${data.joinedRoomName}`);
socket.join(`${data.joinedRoomName}`);
然后用代码加入新的 Clicked Room
但是我不知道点击新房间时如何传递当前房间名称。所以第2步有问题。
所以它看起来像这样。
<a href="#" onclick="joinChat()">
<h5 id="sangumee-Quarterican-KJ">sangumee</h5>
</a>
[客户端代码]
var socket = io.connect('http://118.35.126.220:3001');
function joinChat() {
let joinedRoomName = window.event.target.id; // Get clicked id (ROOM NAME)
$('.msg_history').empty(); // to Remove Previous Chats
socket.emit('JoinRoom', {
joinedRoomName: joinedRoomName
});
console.log(`Joined : ${joinedRoomName}`);
$('#chat').on('submit', function (e) { // Submit Event
var msg = $('#message').val(); // Get entered Message
e.preventDefault(); // Prevent reload the page
if (!msg) return; // If no Message return
$('#message').val('') // To clean chat input
socket.emit('send:message', {
message: msg,
userId: userId,
loginedId: loginedId,
joinedRoomName: joinedRoomName
});
// Draw to Outgoing side Chat (Send by me)
$('.msg_history').append(`<div class="outgoing_msg"><div class="sent_msg"><p>${msg}</p><span class="time_date"> 11:01 AM | June 9</span></div></div>`);
});
}
socket.on('receive:message', function (data) {
console.log(`${data.userId} : ${userId}`)
if (data.userId != userId) {
// Draw to Incoming Side Chat (Send by another person)
$('.msg_history').append(`<div class="incoming_msg"><div class="incoming_msg_img"><img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"></div><div class="received_msg"><div class="received_withd_msg"><p>${data.message}</p><span class="time_date"> 11:01 AM | June 9</span></div></div></div>`);
}
});
【服务器端代码】
/* MyPage User Chat Room */
router.get(`/:userId/admin/contact`, function (req, res, next) {
let userId = req.params.userId;
let loginedId = req.user.login;
db.query(`SELECT * FROM chatRoom WHERE chatReceiver=? OR chatSender=?`, [userId, userId], function (error, room) {
if (error) {
throw `Error From /:userId/admin/contact ROUTER \n ERROR : ${error}`;
}
console.log(`Room : ${room}`);
res.render('mypage/contact', {
userId: userId,
loginedId: loginedId,
room: room
// contactArray: contactArray
})
});
});
// Socket IO
io.on('connection', function (socket) {
// Join Room
socket.on('JoinRoom', function (data) {
socket.leave(`${data.joinedRoomName}`);
console.log(`DATA : ${data.joinedRoomName}`)
socket.join(`${data.joinedRoomName}`);
console.log(`NEW JOIN IN ${data.joinedRoomName}`)
})
socket.on('send:message', function (data) {
io.sockets.to(`${data.joinedRoomName}`).emit('receive:message', data);
console.log(`Message Send to : ${data.joinedRoomName}`)
console.log(`Message Content : ${data.userId} : ${data.message}`);
// Save Message In DB
db.query(`INSERT INTO chatData (roomName, chatSender, chatMessage) VALUES (?,?,?)`,[data.joinedRoomName, data.userId, data.message])
});
});
解决方案
当套接字尝试加入另一个房间时,您可以取消加入所有其他房间:
Object.keys(socket.room)
.filter(it => it !== socket.id)
.forEach(id => socket.leave(id));
或者您只是在客户端(或服务器)上保留一个变量:
let current;
然后,如果您加入,请将其发送到服务器并刷新:
socket.emit('JoinRoom', {
joinedRoomName,
leave: current,
});
current = joinedRoomName;
推荐阅读
- sql-server - 使用带有 LIKE 的通配符从 SQL Server 检索数据
- perl - 根据逻辑添加行
- javascript - 范围很大时看不到 Highcharts x 轴
- python - 线程一次运行时无法减少两个函数的运行时间
- laravel - 需要根据用户名创建子域类型的url
- angularjs - 无法使用自定义模板将动态数据加载到 ui-grid 下拉列表中(下拉数据是异步的)
- php - jQuery序列化多维表单数据无法在php中读取
- grafana - 格拉法纳点击屋
- angularjs - 为什么降序的 OrderBy 过滤器不起作用?
- php - 如何编写 GET 请求以检索 WooCommerce 上的所有产品(不仅是前 10 个)